Html 将图像添加到引导导航栏链接

我想在我的引导导航栏中的链接旁边添加一个小头像，如下所示：

我正在尝试将我的图像添加到

---

有没有合适的方法可以轻松地将图像添加到引导导航栏中，从而使所有链接仍然保持在一条直线上？

这里是@press'小提琴，它可以改变直线高度。很明显，你可以在填充物等周围走动。。随心所欲

---

感谢你们指出我需要改变线的高度。但是，仅仅更改行高度的问题是，这会弄乱引导导航栏的默认高度设置。所以我用更少的钱做了一些计算，以使所有的风格都能很好地发挥作用

@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;
    }
}

---

尝试在图像中使用类响应，这没有任何帮助。它使图像成为一个块，将链接向下推到下一行。好的，我认为这是一个可能的重复，如果我错了请纠正我：我认为这个问题是关于添加品牌图像，而不是将图像作为图标添加到链接。无论如何，这个问题的解决方案对我来说不起作用。我找不到这样做的问题。这是我的。我从来没有说过“只要”改变线的高度。事实上，我已经说过，您可以根据自己的喜好修改代码的其余部分。事实上，为了获得您最初想要的结果，您确实必须从更改线条高度开始。所以…“我们这些人”（只有我）中的“不客气”，指出你需要改变你的线条高度

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

@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;
    }
}