Place Font Awesome icons inside the sorted lists in the menu

Asked

Viewed 1,476 times

3

Colleagues.

I have a Bootstrap menu that I’d like to place the Font Awesome icons next to each item in that menu. HTML looks like this:

<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>

The CSS of dropdown-menu is like this:

.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);
}

While accessing the official Font Awesome website, I found a native class of them fa-ul and the fa-li, so I put it this way:

<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>

The icon appeared, but burst on our left side. See next to the Name A:

inserir a descrição da imagem aqui

How I would fix?

css font-awesome
  • 2

    places the li's in position:relative; the i's within li's as absolute, and position them as you wish ;)

  • 1

    Hello Murilo. Forgive me ignorance, but I could not understand it properly. Could you show me an example?

  • 2

    ul li {position:relative;} and, li i{position:absolute;}, it is not ignorance any man ;D if n works and you can share the full code, by team Viewer I may be helping

  • 1

    Thanks Murilo. It worked.

  • puts your answer and within 2 days already as the right ;)

  • Murilo, be sure to post as an answer, otherwise the page is "lame"... as already answered in the comments, no one will put answer to a problem you solved, and then ends up being 'answered' but no answer...

Show 1 more comment

1 answer

0

The best way to use Font Awesome would be to insert the icon tag you want inside each element

  • . Another way is by inserting via css through the :before of the element consulted the content code in css that represents each icon for example "content: '/cf434'" but is a bad for future maintenance.

    • .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>

    Browser other questions tagged css font-awesome

    You are not signed in. Login or sign up in order to post.