Question

我想在Bootstrap中的导航栏的每个下拉菜单中添加一个方形图标，并且不希望由于添加图标而在下拉菜单中移动该文本。所以，当我点击Bootstrap中导航栏的下拉列表时，我希望它看起来如下所示：

[★] Stack Overflow
[●]   Ask Ubuntu
[∈] Think Different

将包含方括号的标志视为每个图标。所以我不希望文本Ask Ubuntu向左移动只是因为我在下拉列表的头部添加了一个图标。

是否可以按照我刚才描述的相同方式将图标添加到每个下拉列表的前面？

我在Stack Overflow（Adding icons to bootstrap drop down menu items）上找到了一个类似的问题和答案。但是，答案不再有效，因为他使用Bootstrap 2，因此jsfiddle链接不再起作用（实际上我试图在那里复制代码，但它没有工作），还如果可以避免的话，我不喜欢将!important用于CSS。

所以任何人都可以帮我正确地将图标添加到菜单中？

我使用Bootstrap 3.1，我希望它至少在最新的Chrome，Safari和Firefox上运行良好。如果它不能在IE或移动设备上运行，我不介意。

更新

text-align的默认.dropdown-menu li为center，因此在添加图标之前，点击导航栏打开下拉菜单时，这是默认样式：< / p>

Stack Overflow
  Ask Ubuntu
Think Different

然而，当我添加一个图标时，它变成如下所示：

[★] Stack Overflow
  [●] Ask Ubuntu
[∈] Think Different

换句话说，由于默认值为text-align: center，因此不仅Ask Ubuntu文字，而且[●]图标位于中心。

但是，我想只向左推图标，并将文字留在中间，例如：

[★] Stack Overflow
[●]   Ask Ubuntu
[∈] Think Different

而不是：

[★] Stack Overflow
[●] Ask Ubuntu
[∈] Think Different

无论如何，这是我目前的HTML：

                    <li class="dropdown">
                        <a href="/dropdown" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="/link1">
                                    <img src="image1.png">
                                    text1
                                </a>
                            </li>
                            <li>
                                <a href="/link2">
                                    <img src="image2.png">
                                    text2
                                </a>
                            </li>
                        </ul>
                    </li>

和CSS：

.dropdown-menu li
    text-align: left

paulalexandru，我在哪里说过＆＃34;不需要图标＆＃34;？我使用术语＆＃34;图标＆＃34;和＆＃34;图像＆＃34;互换。

Answer 1

这很容易。使用可用的Glyphicons（或Font Awesome等）并根据需要添加它们。

<ul class="dropdown-menu">
  <li><a href="#"><span class="glyphicon glyphicon-star"></span> Added star icon</a></li>
  <li><a href="#">Link with no icon</a></li>
</ul>

如何在Bootstrap的下拉列表前面添加图片？

更新

1 个答案: