Bootstrap 3-如何将图像放在下拉按钮上，插入符号在同一行上

Question

我是bootstrap / html wimp。 我正在尝试在Bootstrap下拉菜单中添加一个Facebook图标，并在同一行的旁边插入一个插入符号：

<div class="btn-group" role="group"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="facebookDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="/assets/facebook-sq.png" width="20" height="20">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-form" aria-labelledby="facebookDropdown">
        ...
    </ul>
</div>

所看到的插入符呈现Facebook图标下方本身在这里 。

从我的收集来看，这是因为img标签后面有一个中断。 我已经尝试过像某些人建议的那样使用“ display ='inline-block'”进行各种各样的变体，但无济于事。 有向导可以帮助我吗？

Answer 1

我认为这只是一个规模问题。 调整宽度和高度，直到感到舒适为止。

但是...如果您需要的是图标图像，我是否建议使用图标字体而不是图像； 您会发现这些方式不那么痛苦，而且更方便。 我最喜欢的是FontAwesome，但这里有一个图标字体存储库，其中包含许多收藏集供您选择。