Add image to Bootstrap Navbar Links

Question

I want to add a small avatar next to a link in my bootstrap navbar like this:

enter image description here

I am trying to add my image inside the <a> tags of the link, but this is pushing the link out of line with the other links, because the image is taller than the text of the links.

Here is my HTML

<li><a href="link">
    <img class="hidden-xs" src="img">
    MIKE
    </a>
</li>

Is there a proper way to easily add images to bootstrap nav-bars so that all the links still remain in line?

That doesn't help anything. It makes the image a block, which pushes the link down to the next line. — rfj001, Jan 10 '15 at 23:47
okay i think this is a possible duplicate, correct me if i am wrong: http://stackoverflow.com/questions/9893723/twitter-bootstrap-2-logo-image-on-top-of-navbar — Coding Enthusiast, Jan 10 '15 at 23:56
I think that that question is about adding a brand image, not about adding an image as an icon to a link. At any rate, the solution in that question is not working for me. — rfj001, Jan 11 '15 at 00:01
I can't find an issue in doing this. Here is my [Fiddle](http://jsfiddle.net/c6f1ecrv/1/). — Wild Beard, Jan 11 '15 at 00:07
@Press, when I change the height of the image and add another link you can see that the links do not line up. http://jsfiddle.net/c6f1ecrv/3/ Do I need to change the line height to make it match my image height? — rfj001, Jan 11 '15 at 00:21
@rfj001 Nah look at Jake Taylor's answer below. It'll fix it for you. — Wild Beard, Jan 11 '15 at 01:08

score 3 · Answer 1 · answered Jan 11 '15 at 00:49

3

Here's @press' fiddle with the line height changed. You can obviously tweek around padding etc.. to your likes http://jsfiddle.net/c6f1ecrv/4/

.navbar-nav li a {
    line-height:3em;
    padding:5px 10px;
}

answered Jan 11 '15 at 00:49

Jake Taylor

4,246
3
15
16

score 0 · Accepted Answer · answered Jan 11 '15 at 03:07

Thanks to those of you who pointed out that I need to change line height. The problem with just changing line height, however, was that this would mess up the default height setting of the bootstrap nav bar. So I made some calculations with less to make all the styles play nicely.:

@nav-avatar-height: 40px;
@nav-link-line-height: @nav-avatar-height;
@nav-link-padding-vertical: calc((@navbar-height - @nav-avatar-height) / 2);

// Only apply extra spacing when not collapsed into dropdown
@media (min-width: @screen-xs-max) {
    .nav > li > a {
        font-size: 1.1em;
        line-height: @nav-link-line-height;
        padding-top: @nav-link-padding-vertical;
        padding-bottom: @nav-link-padding-vertical;
    }

    .nav > li > a > img {
        height: @nav-avatar-height;
        border-radius: 50%;
        border: 1px solid @gray-light;
    }
}

I never said to "just" change the line-height. I in fact stated that you could tweek the rest of your code to your liking. You did in fact have to start by changing your line-height in order to get the desired results that you originally wanted. So..."You're Welcome" from "those of us" (Only Me) that pointed out you need to change your line-height. :) — Jake Taylor, Jan 11 '15 at 03:38

Add image to Bootstrap Navbar Links

2 Answers2