css - How do I get an image to line up with the text in Bootstrap nav list?

Question

I'm trying to align an image with some text within a list item. I can't seem to get them to align though (see image).

How can I get the text and image to align? I am using the default CSS files from Bootstrap and have no customized CSS for any of the classes or elements shown in my markup.

Markup:

<div class="col-md-3">
    <ul class="nav">
        <li><%= link_to "Connect", "#", class: "footer-heading" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
    </ul>
</div>

Answer 1

In your CSS put either:

ul img{ display: inline-block; }

or

ul img{ float: left; }

Which should cause the image to be displayed inline with the text.

Alternatively add the image as a background image to the ul and position the text using padding. You can use different images by applying a class (of, for example 'facebook_icon') to the ul.