如何在 Bootstrap 的下拉菜单前面添加图片？

Question

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

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

将用方括号括起来的标志视为每个图标。所以我不喜欢文本 Ask Ubuntu 被移到左边，因为我在下拉列表的头部添加了一个图标。

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

我在这里通过 Stack Overflow(Adding icons to bootstrap drop down menu items) 找到了一个类似的问题和答案。但是，答案不再有效，因为他使用 Bootstrap 2，因此那里的 jsfiddle 链接不再起作用（实际上我试图在那里复制代码，但它不起作用），而且我也没有如果可以避免的话，就像在 CSS 中使用 !important 的想法一样。

那么任何人都可以帮助我将图标正确添加到菜单中吗？

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

更新

.dropdown-menu li 的默认text-align 是center，所以在我添加图标之前，这是我点击导航栏打开下拉菜单时的默认样式：

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，我在哪里说过“不需要图标”？我交替使用术语“图标”和“图像”。

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>