在Bootstrap下拉菜单项中添加图标

Question

我正在尝试将一些图标添加到Bootstrap下拉菜单中（请参见下面的fiddle）如您所见，图标被添加了，但它将菜单项推向右侧，导致该菜单项不再与其他项对齐。应该怎么做才是适当的方式呢？ js fiddle

<div class="pull-left">
<div class="pull-right">
    <div class="btn-group">                 
            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
                <span>Actions</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-ok"></i>Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li class="divider"></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </div>
</div>

- G-Man

---

我发布了一个答案，但是重新阅读了你的问题后，也许我没有回答你的问题。我不明白 - 是什么被移到右边了？你是在说下拉图标吗？我在你的Fiddle上没有看到任何图标。 - Adam Plocher

我已经添加了一张图片来说明我的意思 - 谢谢。 - G-Man

在您的fiddle上我看不到那个复选框？ 我不会使用<i>标签来实现。可以使用类似于我的示例中的背景图像，这样它就不会重新定位文本。我手动将文本向右移动5个像素，但如果从我的答案中删除padding-left，则它将不会移动... - Adam Plocher

明白了 - 谢谢 - 将标记为答案 - G-Man

谢谢，很高兴能帮到你。顺便说一下，我在底部添加了一个小更新。 - Adam Plocher

Answer 1

以下是我在 Bootstrap 3.x 中的做法：

标记：

<ul class="dropdown-menu">
  <li><a href="#" class="icon"><span
         class="glyphicon glyphicon-user"></span>User Profile</a></li>
  <li><a href="#">Log Out</a></li>
</ul>

CSS：

.dropdown-menu a.icon {
  position: relative;
  padding-left: 40px;
}
.dropdown-menu a.icon .glyphicon {
  top: 6px;
  left: 10px;
  font-size: 18px;
}

关键在于glyphicons是绝对定位的，即使它们在标记中“包含”在<a>内，位置相对于整个菜单。通过将.icon类添加到每个包含图标的菜单锚点中，可以使定位相对于该锚点，并且填充锚文本以便图标有足够的空间显示。如上所示，任何不包含.icon类或glyphicon的菜单项都将正常显示为文本链接。

如果原始问题的意图是始终垂直对齐文本和图标，则只需将填充移动到.dropdown-menu a即可。

- Brian Moeskau

Answer 2

这个会起作用。不幸的是，似乎你需要在背景图片上使用!important，但通常最好尽量避免使用。请注意，一些旧浏览器不支持nth-of-type。

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

/* First Menu Item */
.dropdown-menu li:nth-of-type(1) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

/* Second Menu Item */
.dropdown-menu li:nth-of-type(2) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
    padding-left: 5px;
}

JS Fiddle: http://jsfiddle.net/syVk8/

编辑：好的，经过一点澄清，事实证明您根本不想让文本向左移动。这里有一个类似的示例，左侧没有填充，并且有一个名为“ok”的类，您可以将其应用于不同的菜单项以添加复选框（或任何您的图标可能是）：

li.ok { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 3px 5px;
}

JS Fiddle: http://jsfiddle.net/syVk8/2/

JS Fiddle：http://jsfiddle.net/syVk8/2/

- Adam Plocher