twitter-bootstrap 在 Bootstrap 中使用 Glyphicons 做列表样式的更好方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24015652/
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
Better way to do list styling with Glyphicons in Bootstrap less
提问by Timo77
Is there a way to achieve this same outcome purely in less? Is there way to do that in less, with less html code? Way to style that glyphicon to be as li icon in css/less?
有没有办法以更少的方式实现同样的结果？有没有办法用更少的html代码来做到这一点？将该字形样式设置为 css/less 中的 li 图标的方法？
html:
html：
<div id="sitefooter">
<ul>
<li><a href="/pal_apllaa.asp"><i class="glyphicon glyphicon-chevron-right"> </i>pla pal apllaa?</a>
</li>
<li><a href="/pal_apllaa.asp"><i class="glyphicon glyphicon-chevron-right"> </i>pal apllaa?</a>
</li>
<li><a href="/pal_apllaa.asp"><i class="glyphicon glyphicon-chevron-right"> </i>pal apllaa?</a>
</li>
</ul>
</div>
less css:
少CSS：
#sitefooter ul {
padding:0px;
list-style-type:none;
a:link {
color:#FFFFFF
}
}
回答by jme11
Sure. You can copy the styles for the icons and add them to your custom css like this:
当然。您可以复制图标的样式并将它们添加到您的自定义 css 中，如下所示：
#sitefooter ul {
list-style: none;
padding: 0;
}
#sitefooter li:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0 10px;
content: "\e080";
}
Now, any time you add list item in the site footer, it will automatically be styled with the chevron-right icon. The content: "\e080"specifies the character, so if you want to change it to a different one, I find it easiest to just look at the glyphicons.less file and search for the name of the icon there to find it's corresponding character number.
现在，每当您在站点页脚中添加列表项时，它都会自动使用 V 形右侧图标进行样式设置。该content: "\e080"指定字符，所以如果你想改变它到一个不同的，我觉得很简单的方法就是看glyphicons.less文件，然后搜索图标的名称那里找到它对应的字符数。
回答by Moustache_Me_A_Question
This is some debate on whether to use the i tag for icons. I would personally avoid it and use a span tag instead. This is what I typically use for something like that;
这是关于是否对图标使用 i 标签的一些争论。我个人会避免它并使用 span 标签代替。这就是我通常用于此类事情的方法；
<a href="http://yourlink.com" class="list-group-item active"><span class="glyphicon glyphicon-envelope"></span>Message</a>
But I think what you are asking is how you target that specific piece of code. You can add an additional class in your span or i tag such as:
但是我认为您要问的是您如何定位该特定代码段。您可以在 span 或 i 标签中添加一个额外的类，例如：
//HTML
<span class="custom_glyphicon"></span>
//CSS
.custom_glyphicon{background-color:#ffffff;}
Or you can write you css to target specifically the glyphicon
或者你可以写你的 css 来专门针对 glyphicon
//CSS
#sitefooter ul li .glyphicon {
padding:0px;
list-style-type:none;
a:link {
color:#FFFFFF
}
