Question

使用content:伪元素时，有没有办法在css :before元素中嵌入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

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

Answer 3

对于您的列表项，您可以使用一些CSS来达到预期的效果。

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

我在OS X上的Safari中测试了这个。

Answer 4

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

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

Answer 5

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

将数据属性放在SCRIPT-Tag上 “ data-search-pseudo-elements”加载fontawesome.min.js
使伪元素本身不显示：
正确的字体系列和字体粗细组合您需要的图标：“ Font Awesome 5 Free”和300（错误/轻度），400（远/常规）或900（fas /固体）

Answer 6

这是您尝试做的最简单的方法：

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 7

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

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

Answer 8

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

使用FontAwesome或Glyphicons与css：之前

8 个答案: