有什么办法嵌入html在CSS内容：元素时使用：前伪元素？
我想在这样的用例中使用Font Awesome(或Glyphicon)：
h1:before {
content: "X";
padding-right: 10px;
padding-left: 10px;
color: @orangeLight;
}
其中X是类似< i class =“icon-cut”>< / i> ;. 我可以，当然可以手动在HTML中，但我真的想使用：在这种情况下。 类似地，是否有任何方式使用< 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 font-family应用于任何具有以“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/并检查代码找到这个：
.icon-cut:before {
content: "\f0c4";
}
所以如果你想再次添加图标，你可以使用:: after元素来实现这一点。或者对于你的问题的第二部分，你可以使用:: after伪元素插入项目符号字符看起来像一个列表项。然后使用绝对定位将其放在左边，或类似的东西。
i:after{ content: '\2022';}
