0

Мне нужно, чтобы иконки выглядели так, как на скриншоте: введите сюда описание изображения

Пытался добиться этого при помощи border-radiusи padding, но судя по всему, делаю что-то не так (так как выходит криво).

введите сюда описание изображения

Есть ещё отдельная картинка-эллипс (возможно, при помощи неё получится добиться):

введите сюда описание изображения

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img src="vk-icon.png" alt="">
        <img src="facebook-icon.png" alt="">
        <img src="instagram-icon.png" alt="">
    </div>
</body>
</html>


* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #000;
}
.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container img {
    margin-right: 60px;
    border: 1px solid #fff;
    border-radius: 25px;
    padding: 15px;
}
2
  • Пропиши класс для всех img и задай в нем нужную тебе ширину и высоту, можешь в процентном соотношении от размера контейнера.
    – Kirzzz
    24 фев 2020 в 12:42
  • 1
    а вы для иконок не используйте img а используйте шрифтовые иконки 24 фев 2020 в 12:48

2 ответа 2

2

Предлагаю использовать шрифтовые иконки

Сморите дэмо

body{
  text-align: center;
}
i.fa{
  font-size: 30px;
  border: 1px solid;
  width: 60px;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

i.fa-facebook{
  margin: 0 30px;
}

i.fa:hover{
color: blue;

}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-vk"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>

1
  • 1
    У меня по-своему, но Ваше решение с шрифтовыми иконками помогло. Благодарю! 24 фев 2020 в 13:02
2

А так? Проверяйте

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  display: inline-block;
  margin-right: 60px;
  border: 1px solid #fff;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  width: 30px;
  height: 30px;
}
<div class="container">
  <img src="vk-icon.png" alt="">
  <img src="facebook-icon.png" alt="">
  <img src="instagram-icon.png" alt="">
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.