在 css 中使用 FontAwesome 或 Glyphicons :before

Question

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

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

Answer 2

对于您的列表项，您可以使用一些 CSS 来实现所需的效果。

ul.icons li {
  position: relative;
  padding-left: -20px; // for example
}
ul.icons li i {
  position: absolute;
  left: 0;
}

我已经在 OS X 上的 Safari 中对此进行了测试。

Answer 3

<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 默认提供所有超棒的字体图标。

Answer 4

这是做你想做的最简单的方法：

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>

Answer 5

回复：在:before 中使用图标 – 最近的 Font Awesome 版本包括用于 SASS 和 LESS 的 .fa-icon() mixin。这将自动包含font-family 以及一些渲染调整（例如-webkit-font-smoothing）。因此你可以这样做，例如：

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}

Answer 6

应该避免这种方法。 vertical-align 的默认值为 baseline。仅更改伪元素的字体系列将导致元素具有不同的字体。不同的字体可以有不同的字体规格和不同的基线。为了使不同的基线对齐，元素的整体高度必须增加。 See this effect in action.

每个字体图标都有一个元素总是更好。

Answer 7

@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");

Answer 8

accepted answer (as of 2019 JULY 29) 仅在您尚未开始使用 FontAwesome 的最新 SVG-with-JS 方法时仍然有效。在这种情况下，您需要按照他们的CSS Pseudo-Elements HowTo 上的说明进行操作。 基本上有三点需要注意：

• 将数据属性放在 SCRIPT-Tag 上 "data-search-pseudo-elements" 加载 fontawesome.min.js
• 使伪元素本身具有 display:none
• 正确的字体系列和字体粗细组合 您需要的图标：“Font Awesome 5 Free”和 300（fal/light）、400（far/regular）或 900（fas/solid）