CSS 将图标添加到引导下拉菜单项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16554172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding icons to bootstrap drop down menu items
提问by G-Man
I am trying to add some icons to a bootstrap dropdown menu ( see fiddle below ) as you can see the icon gets added, but it pushes the men u item to the right and that menu item is not aligned with the other items anymore.
我正在尝试将一些图标添加到引导程序下拉菜单（请参阅下面的小提琴），因为您可以看到添加了图标，但它将menu 项推到右侧，并且该菜单项不再与其他项对齐。
What is the appropriate way to do this ?
这样做的合适方法是什么？
<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>
采纳答案by Adam Plocher
This will work. Unfortunately it seems that you need to use !importanton the background-image which is usually best to try to avoid. Note, nth-of-type is not supported in some older browsers.
这将起作用。不幸的是，您似乎需要!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/
JS小提琴：http: //jsfiddle.net/syVk8/
EDIT: Ok, after a little clarification it turns out you don't want the text shifting over at all. Here is a similar example with no padding on the left and a class called 'ok' that you can apply to different menu items to add the checkbox (or whatever your icon might be):
编辑：好的，经过一些澄清后，事实证明您根本不希望文本移动。这是一个类似的示例，左侧没有填充，还有一个名为“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小提琴：http: //jsfiddle.net/syVk8/2/
回答by Brian Moeskau
Here's how I did this in Bootstrap 3.x:
这是我在 Bootstrap 3.x 中的做法：
Markup:
标记：
<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:
CSS：
.dropdown-menu a.icon {
position: relative;
padding-left: 40px;
}
.dropdown-menu a.icon .glyphicon {
top: 6px;
left: 10px;
font-size: 18px;
}
The key is that glyphicons are absolute-positioned, and even though they are "contained" inside the <a>in the markup, the positioning is relative to the entire menu by default. By adding the .iconclass to each menu anchor that contains an icon, it allows you to make the positioning relative to that anchor, and also pad the anchor text so that the icon has room to show properly. As you can see above, any menu items that do not contain the .iconclass or a glyphicon will display normally as a text link.
关键是字形是绝对定位的，即使它们“包含”在<a>标记中，默认情况下定位是相对于整个菜单的。通过将.icon类添加到包含图标的每个菜单锚点，它允许您相对于该锚点进行定位，并填充锚文本，以便图标有空间正确显示。正如您在上面看到的，任何不包含.icon类或字形的菜单项都将正常显示为文本链接。
If the intention in the original question was to always have the text aligned vertically icon or not, just move the padding to .dropdown-menu a.
如果原始问题的意图是始终使文本垂直对齐图标，只需将填充移动到.dropdown-menu a.
