logo标签列表

FontAwesome 5字体族问题

cssfontsfont-awesome-5
81

我在一个使用bootstrap 4的项目中集成了Font Awesome 5。但是当我通过CSS调用一个字体时它没有起作用。 使用Font Awesome 4的代码如下：

我在一个使用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";
}

我尝试更改字体名称但没有效果

font-family: 'Font Awesome 5 Free'
7
在我的情况下，我没有包括字重(font-weight)，而这显然是必需的。 - Micah Murray
3
我遇到了完全相同的问题，一直盯着屏幕看了15分钟哈哈。 - Bas van Dijk
1
如果有人仍然遇到问题，可能需要将字体加粗至900。在我的特定问题上，我花了一个小时才意识到这一点... - Jester
1
相关问题：https://dev59.com/rFUL5IYBdhLWcg3wzq2a（解决字重问题） - Temani Afif
18个回答
203

你的 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; 可以解决问题。在 Font Awesome 5 中，一些图标没有 font-weight: 900; 就无法正常显示。

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}
6
做这件事。但如果要使用f107图标（仅适用于solid free），请使用[code] font-awesome/css/fontawesome.css" rel="stylesheet" /> font-awesome/css/fa-solid.css" rel="stylesheet" />[/code] - Carmelo Valenti
4
这是一个 bug。所有图标都没有显示为“实心”的那些不属于“常规”包，因此如果您想使用全部的“实心”图标，则必须排除（很少的）“常规”图标。 - Carmelo Valenti
3
你好，我也有同样的问题。@Carmelo，你能否更详细地解释一下你的答案，让我们更容易理解？ - Dev
4
我曾经花了好几个小时烦恼这个问题，原来是font-weight: 900;的问题！谢谢。 - Shamseer Ahammed
4
字重解决了问题。啊，真希望我之前发现它。这样就能节省我数小时的时间去弄明白了！ - Diego
显示剩余4条评论
108

奇怪的是，您必须在某些图标中放置' 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 */
}
6
哇！感谢您修复了5.0.9字重的问题。这是我代码中唯一缺少的东西。 - Julien B.
这个问题已经在更新的版本中得到了修复，使用.fa, .fas { font-weight: 900; }即可。 - Pedram
太棒了！我正在使用5.1.0版本，仍然需要通过font-weight:900;来解决这个问题。 - smartrahat
3
这是因为字体粗细是在.fa, .fas类中定义的。如果您正在使用自定义类，包括:before或:after伪类，那么似乎仍然需要应用font-weight: 900;的值。 - Okomikeruko
即使在5.13.0版本中，我仍然需要添加font-weight: 900来修复它。谢谢！ - Hrishikesh
26

问题在于font-weight。
对于Font Awesome 5，您需要使用{font-weight:900}

15

使用fontawesome-all.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"); }

7

要求使用900字重并不是一个奇怪的限制，而是FontAwesome故意添加的限制（因为它们共享相同的Unicode但只有不同的字重），以便您不会通过黑客方式使用“实心”和“轻盈”的图标，其中大部分仅在付费的“专业版”中提供。

6
自FontAwesome 5版本开始，您需要启用新的“searchPseudoElements”选项才能以这种方式使用FontAwesome图标：
<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

请参考这个问题：Font awesome 5 on pseudo elements，以及新的 Font Awesome API： https://fontawesome.com/how-to-use/font-awesome-api 此外，请在您的 CSS 代码中更改字体族：
font-family: "Font Awesome 5 Regular";
谢谢您，我只需要补充一下，我需要将此脚本放在kit脚本之上。 - Purple Tentacle
5

我尝试了所有与 Font Awesome 5 相关的解决方案，但它对我不起作用。 :(

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

只需在您的CSS中使用 font-family: "Font Awesome 5 Pro"; 而不是使用 font-family: "Font Awesome 5 Free OR Solids OR Brands";

4

奇怪的是，你必须同时包含字体和字重才能使其正常工作。以下是我用过的代码：

.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;
}

我希望这可以帮到您。

4
我不想使用“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;
}
1
谢谢，我做了类似的事情，但省略了font-weight: 900，导致一些图标无法工作。这个版本似乎有点混乱，因为它不是非常向后兼容，甚至有一些图标得到了新的代码。 - mhapps
3

如果您仍然无法正常运行，我可能忘记在父元素（UL）上添加fa-ul类：

<ul class="fa-ul">

除了其他人提供的两个建议之外：

a) font-family: 'Font Awesome\ 5 Free';
b) font-weight: 900;

我为此解决了问题。

顺带一提，我在我的 <head> 标签中只包含了：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

我正在使用React和Preact。不需要任何特殊的React npm安装或组件。

1
在我的情况下，使用 Ver 5.20 版本时，上层设置了 font-weight: 500 导致 Font Awesome 无法显示。添加自身的 font-weight: N!important（其中 N > 500）可以使其重新显示。猜测这是由于 Font Awesome 的渲染方式导致的某种冲突。 - seedme
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接