使用FontAwesome或Glyphicons与CSS：之前
有没有什么办法在使用a :before伪元素的时候将HTMLembedded到css content:元素中？
我想在这样的用例中使用Font Awesome（或Glyphicon）：
h1:before { content: "X"; padding-right: 10px; padding-left: 10px; color: @orangeLight; }
其中X就像<i class="icon-cut"></i> 。
我当然可以在HTML中手动执行此操作，但是我真的想在这种情况下使用:before 。
同样，有什么方法可以用<i>作为列表项目符号？ 这可以正常工作，但对于多行项目不正确：
<ul class="icons"> <li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Buttons</li> <li><i class="icon-ok"></i> Button groups</li> <li><i class="icon-ok"></i> Navigation</li> <li><i class="icon-ok"></i> Prepended form inputs</li> </ul>
你所描述的实际上是什么FontAwesome已经在做。 它们将FontAwesome字体族应用于任何具有以“icon-”开头的元素的::before伪元素。
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; }
然后，他们使用伪元素::before将图标放置在具有该类的元素中。 我刚刚去http://fortawesome.github.com/Font-Awesome/和检查代码find这个：;
.icon-cut:before { content: "\f0c4"; }
所以，如果你想再次添加图标，你可以使用::after元素来实现这一点。 或者为你的问题的第二部分，你可以使用::after伪元素插入子弹字符看起来像一个列表项。 然后使用绝对定位将其放在左边，或类似的东西。
i:after{ content: '\2022';}
@keithwyland答案是伟大的。 这是一个SCSS混合：
@mixin font-awesome($content){ font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; content: $content; }
用法：
@include font-awesome("\f054");
在列表项目的情况下，可以使用一些小的CSS来达到预期的效果。
ul.icons li { position: relative; padding-left: -20px; // for example } ul.icons li i { position: absolute; left: 0; }
我已经在OS X上的Safari中testing了这一点。
这是做你正在尝试做的最简单的方法：
<style> ul { list-style-type: none; } </style> <ul class="icons"> <li><i class="fa fa-bomb"></i> Lists</li> <li><i class="fa fa-bomb"></i> Buttons</li> <li><i class="fa fa-bomb"></i> Button groups</li> <li><i class="fa fa-bomb"></i> Navigation</li> <li><i class="fa fa-bomb"></i> Prepended form inputs</li> </ul>
应该避免这种方法。 vertical-align的默认值是baseline 。 仅更改伪元素的font-family将导致具有不同字体的元素。 不同的字体可以有不同的字体指标和不同的基线。 为了使不同的基线alignment，元素的总高度将不得不增加。 在行动中看到这个效果 。
每个字体图标都有一个元素总是会更好。
Re：使用图标:before – 最近的Font Awesome构build包括SASS和LESS的.fa-icon()混合。 这将自动包含font-family以及一些渲染调整（例如-webkit-font-smoothing ）。 因此你可以做，例如：
// Add "?" icon to header. h1:before { .fa-icon(); content: "\f059"; }
<ul class="icons-ul"> <li><i class="icon-play-sign"></i> <a>option</a></li> <li><i class="icon-play-sign"></i> <a>option</a></li> <li><i class="icon-play-sign"></i> <a>option</a></li> <li><i class="icon-play-sign"></i> <a>option</a></li> <li><i class="icon-play-sign"></i> <a>option</a></li> </ul>
所有的字体真棒图标默认与Bootstrap。
