Adding icons to bootstrap drop down menu items

Question

I am trying to add some icons to a bootstrap dropdown menu ( see fiddle below ) as you can see the icon gets added, but it pushes the men u item to the right and that menu item is not aligned with the other items anymore.

What is the appropriate way to do this ?

js fiddle

<div class="pull-left">
<div class="pull-right">
    <div class="btn-group">                 
            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
                <span>Actions</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-ok"></i>Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li class="divider"></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </div>
</div>

Answer 1

Here's how I did this in Bootstrap 3.x:

Markup:

<ul class="dropdown-menu">
  <li><a href="#" class="icon"><span
         class="glyphicon glyphicon-user"></span>User Profile</a></li>
  <li><a href="#">Log Out</a></li>
</ul>

CSS:

.dropdown-menu a.icon {
  position: relative;
  padding-left: 40px;
}
.dropdown-menu a.icon .glyphicon {
  top: 6px;
  left: 10px;
  font-size: 18px;
}

The key is that glyphicons are absolute-positioned, and even though they are "contained" inside the <a> in the markup, the positioning is relative to the entire menu by default. By adding the .icon class to each menu anchor that contains an icon, it allows you to make the positioning relative to that anchor, and also pad the anchor text so that the icon has room to show properly. As you can see above, any menu items that do not contain the .icon class or a glyphicon will display normally as a text link.

If the intention in the original question was to always have the text aligned vertically icon or not, just move the padding to .dropdown-menu a.