Задать вопрос
@golovlevarts
css

Как сделать иконки в один ряд?

Как сделать иконки в один ряд с текстом? Важно, чтобы они были именно бекграундом
5d531d3c9c3c6573437963.png

<body>
<div class="nav">
    <div class="logo"></div>
    <div class="razdelitel"></div>
    <div class="social">
        <a class="be" href="#"></a>
        <a class="insta" href="#"></a>
        <a class="vk" href="#"></a>
    </div>
    <div class="contacts">
    <div class="mail">
    <div class="mailicon"></div>
  <a>PRIMER@GMAIL.COM</a>
</div>
<div class="telegram">
    <div class="telegramicon"></div>
    <a>@PRIMER</a>
</div>
    </div>
</div>
    </body>


body {
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
	background: #000000;

}
.nav {
    width: 1720px;
    display: flex;
    margin: 80px auto 0 auto;
    flex-flow: row nowrap;
}

.logo {
    width: 287px;
    height: 28px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
}

.razdelitel {
    margin-left:35px;
    width: 1px;
    height: 28px;
    background-color: #5b5b5b;
}

.be {
    display: inline-block;
    margin-top: 6px;
    margin-left: 35px;
    width: 21px;
    height: 16px;
    background-image: url(../images/be.png);
    background-repeat: no-repeat;
    
}

.be:hover {
    display: inline-block;
    transition: 1s;
    margin-top: 6px;
    margin-left: 35px;
    width: 21px;
    height: 16px;
    background-image: url(../images/behover.png);
    background-repeat: no-repeat;
    
}

.insta {
    display: inline-block;
    margin-top: 6px;
    margin-left: 15px;
    width: 16px;
    height: 16px;
    background-image: url(../images/insta.png);
    background-repeat: no-repeat;
    
}

.insta:hover {
    display: inline-block;
    transition: 1s;
    margin-top: 6px;
    margin-left: 15px;
    width: 16px;
    height: 16px;
    background-image: url(../images/instahover.png);
    background-repeat: no-repeat;
    
}

.vk {
    display: inline-block;
    margin-top: 6px;
    margin-left: 15px;
    width: 21px;
    height: 16px;
    background-image: url(../images/vk.png);
    background-repeat: no-repeat;
    
}

.vk:hover {
    display: inline-block;
    transition: 1s;
    margin-top: 6px;
    margin-left: 15px;
    width: 21px;
    height: 16px;
    background-image: url(../images/vkhover.png);
    background-repeat: no-repeat;
    
}

.contacts {
    display: flex;
}

.mailicon {
    display: inline-block;
    width: 21px;
    height: 16px;
    margin-left:;
    background-image: url(../images/mail.png);
    background-repeat: no-repeat;
}

.mailicon:hover {
    display: inline-block;
    width: 21px;
    height: 16px;
    margin-left:px;
    background-image: url(../images/mailhover.png);
    background-repeat: no-repeat;
}

.telegramicon {
    display: inline-block;
    width: 21px;
    height: 16px;
    margin-left:;
    background-image: url(../images/telegram.png);
    background-repeat: no-repeat;
}

.telegramicon:hover {
    display: inline-block;
    width: 21px;
    height: 16px;
    margin-left:;
    background-image: url(../images/telegramhover.png);
    background-repeat: no-repeat;
}

.mail {
    display: inline-block;
    margin-top: 6px;
    margin-left: 985px;
    width: 20px;
    height: 16px;

}
 
.mail:hover {
    display: inline-block;
    transition: 1s;
    margin-top: 6px;
    margin-left: 985px;
    width: 20px;
    height: 16px;
}
 


.telegram {
    display: inline-block;
    margin-top: 6px;
    margin-left: 150px;
    width: 20px;
    height: 16px;

}

 
.telegram:hover {
    display: inline-block;
    transition: 1s;
    margin-top: 6px;
    margin-left: 150px;
    width: 20px;

}


.mail a {
    display: inline-block;
    margin-left: 1px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.mail a:hover {
    display: inline-block;
    transition: 1s;
    color: #ff1e4f;
}

.telegram a {
    display: inline-block;
    margin-left: 1px;
    font-weight: 700;
    text-decoration: none;
    color: #5b5b5b;
}

.telegram a:hover {
    display: inline-block;
    transition: 1s;
    color: #ff1e4f;
}
  • Вопрос задан
  • 305 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@Narts
Если брать ваш вариант разметки, то так:
<div class="contacts">
    <div class="mail">
    <div class="mailicon"></div>
  <a>PRIMER@GMAIL.COM</a>
</div>


.contacts{
     position: relative;
     padding-left: 21px;
     line-height: 16px;
}
.mailicon{
     position: absolute;
     top: 0px;
     left: 0px;
}
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
DevOps задачи, работа с Yandex Cloud и Yandex Database
19 апр. 2024, в 18:38
1500 руб./в час
Верстка сайта -4-5 страниц
19 апр. 2024, в 18:36
1500 руб./за проект
MiniApp для телеграмм на React
19 апр. 2024, в 18:36
30000 руб./за проект
Ещё заказы