在 css: before 中使用 FontAwesome 或雕刻符号

当使用一个 :before伪元素时，有没有办法在 csscontent:元素中嵌入 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>
128270 次浏览
小开
最佳答案

您所描述的实际上是 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';}
小开

在列表项的情况下，可以使用一些 CSS 来达到预期的效果。

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

我已经在 OS X 上的 Safari 中测试过了。

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

小开

这是做你正在尝试做的事情最简单的方法:

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-中使用图标 最近的字体了不起的建设包括 .fa-icon()混合为 SASS 和较少。这将自动包括 font-family以及一些渲染调整(如 -webkit-font-smoothing)。你可以这样做，例如:

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

应该避免这种做法。vertical-align的默认值是 baseline。只更改伪元素的 font-family 将导致元素具有不同的字体。不同的字体可以有不同的字体度量和不同的基线。为了使不同的基线对齐，元素的整体高度必须增加。看看这个效果.

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

小开

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

只有当您还没有开始使用 FontAwesome 最新的 SVG-with-JS方法时，接受答案(截至2019年7月29日)才仍然有效。在这种情况下，您需要按照他们的 CSS 伪元素上的说明。 基本上有三件事需要注意:

  • 将 data-Attribute 放置在 SCRIPT-Tag 上 载入 fontawesome.min.js 的“ data-search-Pseum- element”
  • Make 伪元素本身具有 display: none
  • 正确的字体系列和字体重量组合 你需要的图标: “ Font Awesome 5 Free”和300(fas/light)、400(far/general)或900(fas/Solid)

提交答案