Font Awesome 5字体系列问题

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

或者在其他情况下，font-weight: 900;将保存你。一些图标在字体真棒5不工作没有 font-weight: 900;。

a::after {
content: "\f007";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}

自从 FontAwesome 5以来，你必须启用一个新的“ searchPseudoElements”选项来以这种方式使用 FontAwesome 图标:

<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>

另请参阅这个问题: 在伪元素上使用可怕的5字体和新的 Font Awesome API: https://fontawesome.com/how-to-use/font-awesome-api

此外，将 CSS 代码中的 font-family 更改为

font-family: "Font Awesome 5 Regular";

我找到了解决办法。

• 集成 fontawesome-all.css

• 在文件末尾搜索第二个@font-face 并替换

  Font-family: ‘ Font Awesome 5 Free’;

和

font-family: 'Font Awesome 5 FreeR';

替换:

.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }

和

.far {
font-family: 'Font Awesome 5 FreeR';
font-weight: 400; }

我不想使用‘ all’版本，所以在‘ fontawesome-all.min.css’文件(之前包含在标题中)中搜索‘ family’标记，并在最后发现了一个声明 @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

因此，在我想要使用 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;
}

使用字体酷毙了。Css 文件: 将“ Brands”字体系列从“ Font Awesome 5 Free”改为“ Font Awesome 5 Brands”修复了我的问题。

我不能把所有的功劳-我修复了我自己的本地问题权利之前，看 CDN 版本: https://use.fontawesome.com/releases/v5.0.6/css/all.css

他们已经在 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"); }

问题在于 font-weight。
对于 Font Awesome 5你必须使用 {font-weight:900}

奇怪的是，你必须把’Font-weight: 900字体重量: 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 */
}

我必须将 searchPseudoElements设置为 true 才能让它在 Angular5中工作。

import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';

解决方案是像普通字体那样称呼它:

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}

如果您正在使用 使用 JavaScript 的 SVG，您需要启用它，因为默认情况下它是禁用的

<script data-search-pseudo-elements ... >

在你的脚本标签里。

要求900重量并不奇怪，而是 FontAwesome 故意加上的限制(因为它们共享相同的 unicode，只是字体重量不同) ，这样你就不会用到“实心”和“轻巧”图标，其中大部分只有付费的“专业”版本才能使用。

Npm i —— save@fortawome/fontawome-free

我的秘密:

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

我觉得挺好的！

这可能与定价模型有关... ... ;)

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>

奇怪的是，你必须包括字体家族和字体重量为它的工作。 以下是对我有效的方法:

.second-section-header::after {
content: "\f259";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}

从那里，您可以开始添加任何您想要的样式。

比如说:

.second-section-header::after {
content: "\f259";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
font-size: 100px;
color: white;
z-index: 1;
position: absolute;
}

希望这个能帮上忙。

我已经尝试了以上所有的解决方案为 超赞字体5，但它不适合我: (

最后，我得到了一个解决方案