在 css 中使用 FontAwesome 或 Glyphicons :before
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11875088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use FontAwesome or Glyphicons with css :before
提问by tig
Is there any way to embed HTML in the css content:element when using a :beforepseudo-element?
content:使用:before伪元素时，有没有办法在 css元素中嵌入 HTML ？
I want to use a Font Awesome (or Glyphicon) in a use case like this:
我想在这样的用例中使用 Font Awesome（或 Glyphicon）：
h1:before {
content: "X";
padding-right: 10px;
padding-left: 10px;
color: @orangeLight;
}
Where Xis something like <i class="icon-cut"></i>.
哪里X有类似的东西<i class="icon-cut"></i>。
I can, of course do this manually in HTML, but I really want to use :beforein this case.
我当然可以在 HTML 中手动执行此操作，但我真的想:before在这种情况下使用。
Similarly, is there any way to use <i>as a list bullet? This works, but doesn't behave correctly for multi-line bullet items:
同样，有什么方法可以<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>
回答by keithwyland
What you are describing is actually what FontAwesome is doing already. They apply the FontAwesome font-family to the ::beforepseudo element of any element that has a class that starts with "icon-".
您所描述的实际上是 FontAwesome 已经在做的事情。他们将 FontAwesome font-family 应用于::before具有以“icon-”开头的类的任何元素的伪元素。
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
Then they use the pseudo element ::beforeto place the icon in the element with the class. I just went to http://fortawesome.github.com/Font-Awesome/and inspected the code to find this:
然后他们使用伪元素::before将图标放置在具有类的元素中。我刚刚去了http://fortawesome.github.com/Font-Awesome/并检查了代码以找到这个：
.icon-cut:before {
content: "\f0c4";
}
So if you are looking to add the icon again, you could use the ::afterelement to achieve this. Or for your second part of your question, you could use the ::afterpseudo element to insert the bullet character to look like a list item. Then use absolute positioning to place it to the left, or something similar.
因此，如果您想再次添加图标，则可以使用该::after元素来实现这一点。或者对于您问题的第二部分，您可以使用::after伪元素插入项目符号字符以使其看起来像一个列表项。然后使用绝对定位将其放置在左侧，或类似的东西。
i:after{ content: '22';}
回答by dude
@keithwyland answer is great. Here's a SCSS mixin:
@keithwyland 的回答很棒。这是一个 SCSS 混合：
@mixin font-awesome($content){
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: $content;
}
Usage:
用法：
@include font-awesome("\f054");
回答by flowtron
The accepted answer (as of 2019 JULY 29)is only still valid if you have not started using the more recent SVG-with-JSapproach of FontAwesome. In which case you need to follow the instructions on their CSS Pseudo-Elements HowTo. Basically there are three things to watch out for:
该接受的答案（如2019年7月29日）是唯一的仍然有效，如果你还没有使用最近开始SVG-与-JSFontAwesome的方法。在这种情况下，您需要按照他们的CSS Pseudo-Elements HowTo上的说明进行操作。基本上有以下三点需要注意：
- place the data-attribute on the SCRIPT-Tag "data-search-pseudo-elements" loading the fontawesome.min.js
- make the pseudo-element itself have display:none
- proper font-family & font-weight combination for the icon you need: "Font Awesome 5 Free" and 300 (fal/light), 400 (far/regular) or 900 (fas/solid)
- 将数据属性放在加载 fontawesome.min.js 的脚本标签“数据搜索伪元素”上
- 使伪元素本身具有 display:none
- 您需要的图标的适当字体系列和字体粗细组合：“Font Awesome 5 Free”和 300 (fal/light)、400 (far/regular) 或 900 (fas/solid)
回答by Keyamoon
This approach should be avoided. The default value for vertical-alignis baseline. Changing the font-family of only the pseudo element will result in elements with differing fonts. Different fonts can have different font metrics and different baselines. In order for different baselines to align, the overall height of the element would have to increase. See this effect in action.
应该避免这种方法。其缺省值vertical-align是baseline。仅更改伪元素的 font-family 将导致元素具有不同的字体。不同的字体可以有不同的字体度量和不同的基线。为了使不同的基线对齐，元素的整体高度必须增加。看看这个效果。
It is always better to have one element per font icon.
每个字体图标有一个元素总是更好。
回答by DarkBlue
In the case of your list items there is a little CSS you can use to achieve the desired effect.
对于您的列表项，您可以使用一些 CSS 来实现所需的效果。
ul.icons li {
position: relative;
padding-left: -20px; // for example
}
ul.icons li i {
position: absolute;
left: 0;
}
I have tested this in Safari on OS X.
我已经在 OS X 上的 Safari 中对此进行了测试。
回答by NateShumate
This is the easiest way to do what you are trying to do:
这是做您想做的事情的最简单方法：
<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>
回答by Charley
Re: using icon in :before–
recent Font Awesome builds include the .fa-icon()mixin for SASS and LESS. This will automatically include the font-familyas well as some rendering tweaks (e.g. -webkit-font-smoothing). Thus you can do, e.g.:
回复：使用图标:before- 最近的 Font Awesome 构建包括.fa-icon()SASS 和 LESS的mixin。这将自动包括font-family以及一些渲染调整（例如-webkit-font-smoothing）。因此你可以这样做，例如：
// Add "?" icon to header.
h1:before {
.fa-icon();
content: "\f059";
}
回答by Thanushka
<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>
All the font awesome icons comes default with Bootstrap.
Bootstrap 默认提供所有字体真棒图标。
