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

Как сделать иконки в один ряд с текстом? Важно, чтобы они были именно бекграундом
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;
}
  • Вопрос задан
  • 66 просмотров
Решения вопроса 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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Эйлер Ульяновск
от 65 000 руб.
Naive Москва
от 150 000 руб.
JarSoft Новосибирск
от 2 000 до 2 500 usd.
26 авг. 2019, в 09:50
6000 руб./за проект
25 авг. 2019, в 23:48
4000 руб./за проект
25 авг. 2019, в 22:10
3000 руб./за проект