Place the Awesome Font icons inside the ordered lists in the menu

Question

Place the Awesome Font icons inside the ordered lists in the menu

Navigation

#1 by (0 votes)

2

Colleagues.

I have a Bootstrap menu from which I would like to place the Awesome Font icons next to each item in that menu. The 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 the dropdown-menu looks 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);
}

When I visited the official Font Awesome website, I found a native class of them fa-ul and 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 from our left side. See next to Name A :

How would I fix it?

css font-awesome

asked by anonymous 13.02.2017 / 19:40

1 answer

ionic.config.json and / or $ ionicCloudProvider.init Method does not override or implement a method from a supertype

score 0 · Answer 1

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

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

.dropdown-menu{
  list-style: none;
}

<script src="https://use.fontawesome.com/796628eb4f.js"></script><ulclass="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>