Adding icons to a Bootstrap dropdown

css, drop-down-menu, html, icons, twitter-bootstrap

Solution

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

Problem

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</a> <ul class="dropdown-menu"> <li><a href="#">Up</a></li> <li><a href="#">Down</a></li> <li><a href="#">Left</a></li> <li><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!

Original source