glyphicon and text links on different lines

Question

I'm trying to design a dropdown menu with Glyphicons on Rails 4.0.0 using Bootstrap 3.0.2. However, the Glyphicons and the texts with links don't show up on the same line. Here is my code:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <%= gravatar_for(current_user, size: 20) %> <span class="caret"></span></a>

    <ul class="dropdown-menu">
        <li>
            <a href="#"><span class="glyphicon glyphicon-user"></span> 
            <%= link_to "Profile", current_user %></a>
        </li>

        <li>
            <a href="#"><span class="glyphicon glyphicon-wrench"></span>
            <%= link_to "Settings", edit_user_path(current_user) %></a>
        </li>

        <li class="divider"></li>

        <li>
            <a href="#"><span class="glyphicon glyphicon-off"></span>
            <%= link_to "Sign out", signout_path, method: "delete" %></a>
        </li>
    </ul>
</li>

Now, if I replace the links with pure text, here is my code:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <%= gravatar_for(current_user, size: 20) %> <span class="caret"></span></a>

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

        <li>
            <a href="#"><span class="glyphicon glyphicon-wrench"></span>
            Settings</a>
        </li>

        <li class="divider"></li>

        <li>
            <a href="#"><span class="glyphicon glyphicon-off"></span>
            Sign Out</a>
        </li>
    </ul>
</li>

Now it works perfectly.

Could anyone please help and let me know what was done incorrectly? Thanks a lot!

Answer 1

The display style of anchor in the dropdown is set to block. display:block; set the hover effect to 100% width of the menu.

.dropdown-menu > li > a {display:inline;} will put your link and glyphicon on one line, but break the hover effect.

Try to add the glyphicon inside your link:

   <li><a href="#"><span class="glyphicon glyphicon-search"></span> Action</a></li>