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