80

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

8 回答 8

158

您所描述的实际上是 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';}
于 2012-08-12T04:14:55.793 回答
4

@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");
于 2016-10-18T12:30:24.897 回答
0

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

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

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

于 2012-09-05T21:40:23.367 回答
0

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

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

于 2016-01-21T14:42:59.327 回答
0

接受的答案（截至 2019 年 7 月 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）
于 2019-07-29T10:44:34.810 回答
-1

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

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>
于 2014-05-19T22:45:42.710 回答
-1

Re: using icon in :before– 最近的 Font Awesome 版本包括.fa-icon()SASS 和 LESS 的 mixin。这将自动包括font-family一些渲染调整（例如-webkit-font-smoothing）。因此，您可以这样做，例如：

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}
于 2015-02-18T17:42:08.523 回答
-14 
<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 默认提供所有字体超棒的图标。

于 2013-07-26T19:11:56.840 回答