css - 将 FontAwesome 或 Glyphicons 与 css 一起使用 :before

Question

有什么方法可以在 css 中嵌入 HTML content:使用 :before 时的元素伪元素？

我想在这样的用例中使用 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>

Answer 1

您所描述的实际上是 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/并检查代码以找到这个:

.icon-cut:before {
  content: "\f0c4";
}

因此，如果您希望再次添加图标，可以使用 ::after 元素来实现。或者对于问题的第二部分，您可以使用 ::after 伪元素插入元素符号字符，使其看起来像一个列表项。然后使用绝对定位将其放置在左侧，或类似的东西。

i:after{ content: '\2022';}