Supondo que você tenha um menu e queira adicionar um ícone antes dos links e ajustar a altura e largura.
<ul class="menu">
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul> |
<ul class="menu">
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul>
body {
background-color: black;
}
.menu a { color: white; }
.menu a::before{
background-image: url('url_da_imagem');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
} |
body {
background-color: black;
}
.menu a { color: white; }
.menu a::before{
background-image: url('url_da_imagem');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}
Para adicionar um ícone para cada link de menu, basta adicionar uma classe e referenciar no código CSS.
<ul class="menu">
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="" class="link_2">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul> |
<ul class="menu">
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="" class="link_2">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul>
body {
background-color: black;
}
.menu a { color: white; }
.menu a.link_2::before{
background-image: url('url_da_imagem');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
} |
body {
background-color: black;
}
.menu a { color: white; }
.menu a.link_2::before{
background-image: url('url_da_imagem');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}
Para finalizar, caso queira o ícone após o link, troque o ::before por ::after.
