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

Question

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

80

当使用伪元素: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>

- tig

2

由于 :before 是一个伪元素，你不能有 html 内容，只能有 text。 - Torsten Walter

嗨tig，只是想确认我的回答是否足够。希望有所帮助。谢谢！ - keithwyland

你真的应该接受wylander的答案。它完全满足了我的需求，这似乎也是你想要的！ - Matthew Schinckel

8个回答

4

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

- dude

0

在您的列表项中，有一些CSS可以使用以实现所需的效果。

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

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

- DarkBlue

0

应该避免使用这种方法。 vertical-align 的默认值是 baseline。仅更改伪元素的字体族将导致具有不同字体的元素。不同的字体可能具有不同的字体度量和不同的基线。为了使不同的基线对齐，元素的总高度必须增加。在此处查看此效果。

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

- Keyamoon

0

已被接受的答案（截至2019年7月29日）仅在您尚未开始使用FontAwesome的更近期的SVG-with-JS方法的情况下才有效。在这种情况下，您需要按照其CSS伪元素HowTo上的说明进行操作。基本上有三件事需要注意：

将data-attribute放置在SCRIPT标记"data-search-pseudo-elements"中，加载fontawesome.min.js
使伪元素本身具有display:none
适当的字体系列和字重组合，以获取所需的图标："Font Awesome 5 Free"和300（fal / light），400（far / regular）或900（fas / solid）

- flowtron

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

- NateShumate

-1

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

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

- Charley

只是一个简短的提醒，Font Awesome 还提供了变量作为内容使用，这样就可以使用以下代码： .pseudo-class:before { @include fa-icon(); content: $fa-var-phone-square; } - Jan

-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一起提供的。

- Thanushka

1

从什么时候开始？Bootstrap自带Glyphicons，而不是Font Awesome。 - Rafael Herscovici

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- keithwyland · Accepted Answer

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