fontawesome 5 font-family无法正常工作

Question

我fontawesome在一个带有bootstrap 4的项目中集成了5个.当我通过css它回想起一个字体时不起作用.与fontawesome 4代码如下:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }

我试图更改字体名称,但它不起作用

font-family: 'Font Awesome 5 Free'

Answer 1

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

Answer 2

奇怪的是,你必须在某些图标中加上' 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 */
}

Answer 3

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

Answer 4

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

Answer 5

我已经尝试了Font Awesome 5的上述所有解决方案，但它对我不起作用。:(

终于，我找到了解决方案！

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

Answer 6

从 FontAwesome 5 开始，您必须启用新的“searchPseudoElements”选项才能以这种方式使用 FontAwesome 图标：

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

另请参阅此问题：伪元素上的 Font Awesome 5和新的 Font Awesome API：https : //fontawesome.com/how-to-use/font-awesome-api

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

font-family: "Font Awesome 5 Regular";

Answer 7

要求900的粗细不是一件奇怪的事，而是FontAwesome故意添加的限制（因为它们共享相同的unicode但只是不同的字体粗细），因此您不必费心去使用“ solid”和“ light”图标，大部分仅在付费的“专业版”中可用。