在 CSS 中使用 Font Awesome 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14736496/
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 Font Awesome Icons in CSS
提问by L84
I have some CSS that looks like this:
我有一些看起来像这样的 CSS：
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
I would like to replace the image with an icon from Font Awesome.
我想用Font Awesome 中的图标替换图像。
I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?
我无论如何都看不到将 CSS 中的图标用作背景图像。假设在我的 CSS 之前加载了 Font Awesome 样式表/字体，是否可以这样做？
回答by Diodeus - James MacFarlane
You can't use text as a background image, but you can use the :beforeor :afterpseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.
您不能使用文本作为背景图像，但您可以使用:before或:after伪类将文本字符放置在您想要的位置，而无需添加各种杂乱的额外标记。
Be sure to set position:relativeon your actual text wrapper for the positioning to work.
请务必设置position:relative您的实际文本包装器以使定位工作。
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDIT:
编辑：
Font Awesome v5 uses other font names than older versions:
Font Awesome v5 使用其他字体名称而不是旧版本：
- For FontAwesome v5, Free Version, use:
font-family: "Font Awesome 5 Free" - For FontAwesome v5, Pro Version, use:
font-family: "Font Awesome 5 Pro"
- 对于 FontAwesome v5，免费版，请使用：
font-family: "Font Awesome 5 Free" - 对于 FontAwesome v5，专业版，请使用：
font-family: "Font Awesome 5 Pro"
Note that you should set the same font-weightproperty, too (seems to be 900).
请注意，您也应该设置相同的font-weight属性（似乎是 900）。
Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).
查找字体名称的另一种方法是右键单击页面上的示例字体真棒图标并获取字体名称（与可以找到 utf-8 图标代码的方式相同，但请注意，您可以在 上找到它:before）。
回答by Astrotim
Further to the answer from Diodeus above, you need the font-family: FontAwesomerule (assuming you have the @font-facerule for FontAwesome declared already in your CSS). Then it is a matter of knowing which CSS content value corresponds to which icon.
除了上面 Diodeus 的回答之外，您还需要font-family: FontAwesome规则（假设您@font-face已经在 CSS 中声明了 FontAwesome 规则）。然后就是知道哪个 CSS 内容值对应哪个图标。
I have listed them all here: http://astronautweb.co/snippet/font-awesome/
我在这里列出了它们：http: //astronautweb.co/snippet/font-awesome/
回答by Akash
Actually even font-awesomeCSS has a similar strategy for setting their icon styles. If you want to get a quick hold of the iconcode, check the non-minified font-awesome.cssfile and there they are....each font in its purity.
实际上，甚至font-awesomeCSS 也有类似的设置图标样式的策略。如果您想快速掌握icon代码，请检查non-minified font-awesome.css文件，它们就在那里....每种字体的纯度。
回答by Lakshman Pilaka
Consolidating everything above, the following is the final class which works well
综合以上所有内容，以下是效果很好的最终类
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
回答by Shiv Singh
You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/
你可以试试这个示例类。并在这里找到图标内容：http: //astronautweb.co/snippet/font-awesome/
#content h2:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "\f007";
}
回答by Ravindra Vairagi
To use font awesome using css follow below steps -
要使用 css 使用字体真棒，请按照以下步骤操作 -
step 1 - Add Fonts of FontAwesome in CSS
第 1 步 - 在 CSS 中添加 FontAwesome 的字体
/*Font Awesome Fonts*/
@font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
Step - 2 Use below css to apply font on class element of HTML
步骤 - 2 使用下面的 css 在 HTML 的类元素上应用字体
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.
最后，使用“ sorting_asc”类在所需的 HTML 标签/元素上应用 css。
回答by Pervez
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Example Link: https://codepen.io/bungeedesign/pen/XqeLQg
示例链接：https: //codepen.io/bungeedesign/pen/XqeLQg
Get Icon code from: https://fontawesome.com/cheatsheet?from=io
从以下位置获取图标代码：https: //fontawesome.com/cheatsheet?from =io
回答by Hiura
Alternatively, if using Sass, one can "extend" FA icons to display them:
或者，如果使用 Sass，可以“扩展”FA 图标以显示它们：
.mytextwithicon:before {
@extend .fas, .fa-angle-double-right;
@extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
回答by George Hix
No need to embed content into the CSS. You can put the badge content inside the fa element, then adjust the badge css. http://jsfiddle.net/vmjwayrk/2/
无需将内容嵌入到 CSS 中。您可以将徽章内容放在 fa 元素中，然后调整徽章 css。http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
回答by Animesh Singh
For this you just need to add contentattribute and font-familyattribute to the required element via :before or :after wherever applicable.
为此，您只需在适用的情况下通过 :before 或 :after 向所需元素添加content属性和font-family属性。
For example: I wanted to attach an attachment icon afterall the aelement inside my post. So, first I need to search if such icon exists in fontawesome. Like in the case I found it here, i.e. fa fa-paperclip. Then I would right click the icon there, and go the ::beforepseudo property to fetch out the contenttag it is using, which in my case I found to be \f0c6. Then I would use that in my css like this:
例如：我想在帖子中的所有元素之后附加一个附件图标a。所以，首先我需要搜索 fontawesome 中是否存在这样的图标。就像我在这里找到它的情况一样，即fa fa-paperclip。然后我会右键单击那里的图标，然后转到::before伪属性以提取content它正在使用的标签，在我的情况下，我发现它是\f0c6. 然后我会像这样在我的 css 中使用它：
.post a:after {
font-family: FontAwesome,
content: " \f0c6" /* I added a space before \ for better UI */
}
