Задать вопрос
@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;
}
  • Вопрос задан
  • 375 просмотров
Комментировать
Подписаться 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 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Модернизация форума на xenforo
18 дек. 2024, в 11:03
5000 руб./за проект
Разработка программы для Windows
18 дек. 2024, в 10:44
130000 руб./за проект
Доработка веб-ПО на rust + vue.js
18 дек. 2024, в 10:02
7000 руб./за проект
Ещё заказы