Colegas.
Tenho um menu em Bootstrap do qual gostaria de colocar os ícones do Font Awesome ao lado de cada item desse menu. O HTML está dessa forma:
<ul class="dropdown-menu">
<li><a href="#">Todos os nomes</a></li>
<li><a href="#">Nome A</a></li>
<li><a href="#">Nome B</a></li>
<li><a href="#">Nome C</a></li>
<li><a href="#">Nome D</a></li>
<li><a href="#">Nome E</a></li>
</ul>
O CSS do dropdown-menu está assim:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
Ao acessar o site oficial do Font Awesome, encontrei uma classe nativa deles fa-ul e o fa-li, então coloquei dessa forma:
<ul class="dropdown-menu fa-ul">
<li><a href="#">Todos os nomes</a></li>
<li><a href="#"><i class="fa-li fa fa-check-square"></i> Nome A</a></li>
<li><a href="#">Nome B</a></li>
<li><a href="#">Nome C</a></li>
<li><a href="#">Nome D</a></li>
<li><a href="#">Nome E</a></li>
</ul>
O ícone apareceu, mas estourou pelo nosso lado esquerdo. Veja ao lado do Nome A:
Como eu faria para corrigir?
li
's emposition:relative;
osi
's dentro deli
's comoabsolute
, e posicione-os como quiser ;)ul li {position:relative;}
e,li i{position:absolute;}
, não é ignorância alguma man ;D se n funcionar e voc puder compartilhar o código completo, pelo team viewer posso estar ajudando