CSS Font Awesome 5 字体系列问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47788847/
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
Font Awesome 5 font-family issue
提问by Carmelo Valenti
I integrated Font Awesome 5 in a project with bootstrap 4. When I recall a font via CSS it does not work. with Font Awesome 4 the code was as follows:
我在一个带有 bootstrap 4 的项目中集成了 Font Awesome 5。当我通过 CSS 调用字体时，它不起作用。使用 Font Awesome 4，代码如下：
#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: "\f107";
font-family: "FontAwesome";
}
I tried to change the font name but it does not work
我试图更改字体名称但它不起作用
font-family: 'Font Awesome 5 Free'
回答by Pedram
Your Unicodeis wrong f107
你Unicode错了f107
a::after {
content: "\f007";
font-family: 'Font Awesome\ 5 Free';
}<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>Or in other case, font-weight: 900;will save you. Some icons in font awesome 5 not working without font-weight: 900;.
或者在其他情况下，font-weight: 900;会救你。字体真棒 5 中的某些图标在没有font-weight: 900;.
a::after {
content: "\f007";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
回答by Lenin Zapata
Strangely you must put the 'font-weight: 900' in some icons so that it shows them.
奇怪的是，您必须在某些图标中放置 ' font-weight: 900' 以便显示它们。
#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
content: '\f107';
font-family: 'Font Awesome\ 5 Free';
font-weight: 900; /* Fix version 5.0.9 */
}
回答by www.admin.ge
The problem is in the font-weight.
For Font Awesome 5you have to use {font-weight:900}
问题出在font-weight.
因为Font Awesome 5你必须使用{font-weight:900}
回答by JTStuedle
Using the fontawesome-all.css file: Changing the "Brands" font-family from "Font Awesome 5 Free" to "Font Awesome 5 Brands" fixed the issues I was having.
使用 fontawesome-all.css 文件：将“品牌”字体系列从“Font Awesome 5 Free”更改为“Font Awesome 5 Brands”解决了我遇到的问题。
I can't take all of the credit - I fixed my own local issue right before looking at the CDN version: https://use.fontawesome.com/releases/v5.0.6/css/all.css
我不能把所有功劳都归功于 - 我在查看 CDN 版本之前修复了我自己的本地问题：https: //use.fontawesome.com/releases/v5.0.6/css/all.css
They've got the issue sorted out on the CDN as well.
他们也在 CDN 上解决了这个问题。
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands'; }
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }回答by user3006765
Requiring 900 weight is not a weirdness but a intentional restriction added by FontAwesome (since they share the same unicode but just different font-weight) so that you are not hacking your way into using the 'solid' and 'light' icons, most of which are available only in the paid 'Pro' version.
要求 900 的权重并不是怪事，而是 FontAwesome 有意添加的限制（因为它们共享相同的 unicode 但只是字体权重不同），这样您就不会在使用“solid”和“light”图标时进行黑客攻击，大多数情况下仅在付费“专业版”中可用。
回答by Mesa
Since FontAwesome 5, you have to enable a new "searchPseudoElements" option to use FontAwesome icons this way:
从 FontAwesome 5 开始，您必须启用新的“searchPseudoElements”选项才能以这种方式使用 FontAwesome 图标：
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
See also this question: Font awesome 5 on pseudo elementsand the new Font Awesome API: https://fontawesome.com/how-to-use/font-awesome-api
另请参阅此问题：伪元素上的 Font Awesome 5和新的 Font Awesome API：https: //fontawesome.com/how-to-use/font-awesome-api
Additionaly, change font-family in your CSS code to
另外，将 CSS 代码中的 font-family 更改为
font-family: "Font Awesome 5 Regular";
回答by WojCup
I didn't want to use the 'all' version, so searched the 'fontawesome-all.min.css' file (previously included in the header) for 'family' tag and found at the end a declaration @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;
我不想使用“全部”版本，因此fontawesome-all.min.css在“家庭”标签中搜索“ ”文件（以前包含在标题中）并在最后找到了声明@font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;
So, in the stylesheet for an element where I wanted to use the content: "\f0c8";code, I've added (or changed to) font-family: Font Awesome\ 5 Free;and it worked.
因此，在我想要使用content: "\f0c8";代码的元素的样式表中，我添加（或更改为）font-family: Font Awesome\ 5 Free;并且它起作用了。
.frb input[type="checkbox"] ~ label:before {
font-family: Font Awesome\ 5 Free;
content: "\f0c8";
font-weight: 900;
position: absolute;
}
回答by Elliyas Ahmed
I had tried all above the solutions for Font Awesome 5but it wasn't working for me. :(
我已经尝试了Font Awesome 5 的上述所有解决方案，但它对我不起作用。:(
Finally, I got a solution!
终于，我得到了一个解决方案！
Just use font-family: "Font Awesome 5 Pro";in your CSS instead of using font-family: "Font Awesome 5 Free OR Solids OR Brands";
只需font-family: "Font Awesome 5 Pro";在您的 CSS 中使用，而不是使用font-family: "Font Awesome 5 Free OR Solids OR Brands";
回答by Tan Nguyen
npm i --save @fortawesome/fontawesome-free
npm i --save @fortawesome/fontawesome-free
My Sccs:
我的 Scc：
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";
It worked fine for me!
它对我来说很好用！
回答by Michal Miky Jankovsky
that's probably about pricing model... ;)
这可能是关于定价模型......;）
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Solid Free fas <i class="fas fa-camera"></i>
Regular Pro Required far <i class="far fa-camera"></i>
Light Pro Required fal <i class="fal fa-camera"></i>
Brands Free fab <i class="fab fa-font-awesome"></i>
