3

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:

inserir a descrição da imagem aqui

Como eu faria para corrigir?

6
  • 2
    coloca as li's em position:relative; os i's dentro de li's como absolute, e posicione-os como quiser ;) Commented 13/02/2017 às 18:43
  • 1
    Olá Murilo. Perdoe-me a ignorância, mas não consegui entender direito. Poderia me mostrar um exemplo?
    – user24136
    Commented 13/02/2017 às 18:49
  • 2
    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 Commented 13/02/2017 às 19:00
  • 1
    Obrigado Murilo. Funcionou.
    – user24136
    Commented 13/02/2017 às 20:10
  • coloca sua resposta e dentro de 2 dias já da como a certa ;) Commented 14/02/2017 às 15:14

1 Resposta 1

0

A melhor maneira caso utilize Font Awesome seria inserido a tag do ícone que deseja dentro de cada elemento

  • . Outra maneira é inserindo via css através do :before do elemento consultado o código content em css que representa cada ícone por exemplo "content: '/cf434'" mas é um ruim para manutenção futura.

    .dropdown-menu{
      list-style: none;
    }
    <script src="https://use.fontawesome.com/796628eb4f.js"></script>
    <ul class="dropdown-menu">                          
        <li><a href="#"><i class="fa fa-child" aria-hidden="true"></i> Todos os nomes</a></li>
        <li><a href="#"><i class="fa fa-child" aria-hidden="true"></i> Nome A</a></li>
        <li><a href="#"><i class="fa fa-child" aria-hidden="true"></i> Nome B</a></li>
        <li><a href="#"><i class="fa fa-child" aria-hidden="true"></i> Nome C</a></li>
        <li><a href="#"><i class="fa fa-child" aria-hidden="true"></i> Nome D</a></li>
        <li><a href="#"><i class="fa fa-child" aria-hidden="true"></i> Nome E</a></li>
    </ul>