在CSs之前使用FontAwesome或Glyphicons：

content:使用:before伪元素时，是否可以将HTML嵌入到CSS元素中？

我想在这样的用例中使用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字体系列应用于::before具有以“ icon-”开头的类的任何元素的伪元素。

[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';}

@keithwyland的答案很好。这是一个SCSS mixin：

@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中对此进行了测试。

应该避免这种方法。其缺省值vertical-align是baseline。更改仅伪元素的字体系列将导致元素具有不同的字体。不同的字体可以具有不同的字体规格和不同的基准。为了使不同的基线对齐，元素的整体高度必须增加。看到这种效果。

每个字体图标最好有一个元素。

该接受的答案（如2019年7月29日）是唯一的仍然有效，如果你还没有使用最近开始SVG-与-JS FontAwesome的方法。在这种情况下，您需要按照其CSS伪元素HowTo上的说明进行操作。基本上要注意三件事：

• 将数据属性放在加载fontawesome.min.js的SCRIPT标签“ data-search-pseudo-elements”上
• 使伪元素本身显示：无
• 为您所需的图标提供正确的字体系列和字体粗细组合：“ Font Awesome 5 Free”和300（fal / light），400（far / regular）或900（fas / solid）

这是要做您想做的最简单的方法：

http://jsfiddle.net/ZEDHT/

<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>

回复：在中使用图标:before-最新的Font Awesome构建包括.fa-icon()用于SASS和LESS的mixin。这将自动包括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默认提供所有字体真棒图标。