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!

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

Solution 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

Solution 3

Put the icons inside the anchor tags for Bootstrap v3 (with icons from http://www.FontAwesome.com):

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

Example: http://jsfiddle.net/9ce3P/

Comments

[N1ck]

With this method, clicking the icon won't have the same effect as clicking the links.

[Brad Barrow]

Twitter bootstrap specifically used the i tag as it is an inline element. That way, you can use it inside <p> and <a> tags and it's still semantically correct. This is the method I'd use for sure.

[igrek]

@N1ck, but why doesn't it work this way(firefox): jsfiddle.net/ywkLt/40 ? Any clues how to fix it? Thanks

[João dos Reis]

@BradBarrow it may be syntactically correct, but I don't think using i for icons is semantically accurate :)

[Justin]

@N1ck, some of us may want that kind of behavior.

[Red]

I recommend adding the following css to your site so that icons are aligned roughly the same. If you have masking and layering it won't work as well. .dropdown-item i { min-width: 20px; text-align: center; }