Adding icons to a Bootstrap dropdown

Question

I want to add some icons to links in a Bootstrap dropdown, using code like this:

<ul>     <li class="dropdown">         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>         <ul class="dropdown-menu">             <li><i class="icon-arrow-up"></i><a href="#">Up</a></li>             <li><i class="icon-arrow-down"></i><a href="#">Down</a></li>             <li><i class="icon-arrow-left"></i><a href="#">Left</a></li>             <li><i class="icon-arrow-right"></i><a href="#">Right</a></li>         </ul>     </li> </ul> 

However, the icons are out of place:

I tried using the solution in this answer, but it doesn't seem to work. Can somebody provide a solution and explain why/how it works?

Demo

Thanks!

Answer 1

Put the icons inside the anchor tags:

<ul>      <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>          <ul class="dropdown-menu">              <li><a href="#"><i class="icon-arrow-up"></i> Up</a></li>              <li><a href="#"><i class="icon-arrow-down"></i> Down</a></li>              <li><a href="#"><i class="icon-arrow-left"></i> Left</a></li>              <li><a href="#"><i class="icon-arrow-right"></i> Right</a></li>          </ul>      </li>  </ul>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

Answer 2

Used to Position

Define your .dropdown-menu li position relative and i define position absolute

as like this

.dropdown-menu a {     white-space:normal; } .dropdown-menu > li{position:relative;}  .dropdown-menu > li > i{position:absolute;left:0;top:3px;} 

Live Demo