75

我将 Font Awesome 5 与 bootstrap 4 集成到一个项目中。当我通过 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'
4

16 回答 16

196

你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;
}
于 2017-12-13T09:07:50.843 回答
105

奇怪的是，您必须将' 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 */
}
于 2018-03-30T01:59:06.857 回答
26

问题出在font-weight.
因为Font Awesome 5你必须使用{font-weight:900}

于 2018-03-01T12:50:17.393 回答
14

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

于 2018-02-15T07:20:21.860 回答
7

要求 900 粗细不是奇怪，而是 FontAwesome 故意添加的限制（因为它们共享相同的 unicode，但字体粗细不同），这样您就不会擅自使用“实心”和“轻”图标，大多数仅在付费的“专业”版本中可用。

于 2018-08-22T21:46:14.547 回答
5

从 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";
于 2017-12-13T10:47:52.253 回答
4

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

最后，我得到了解决方案！

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

于 2019-09-26T07:15:49.033 回答
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;
}
于 2018-02-08T22:57:28.320 回答
3

如果它仍然不适合您，我忘记将fa-ul类添加到父 (UL) 元素中：

<ul class="fa-ul">

连同其他人已经提供的两条建议：

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

为我解决了。

FWIW，我的<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 安装或组件。

于 2020-08-24T16:21:24.763 回答
2

npm i --save @fortawesome/fontawesome-free

我的 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";

对我来说效果很好！

于 2018-10-22T10:09:49.567 回答
2

奇怪的是，您必须包括 font-family 和 font-weight 才能工作。这对我有用：

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

我希望这有帮助。

于 2019-08-20T15:00:00.570 回答
1

解决方案是像普通字体一样调用它：

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}
于 2018-06-01T21:09:20.227 回答
1

这可能是关于定价模型... ;)

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>
于 2019-06-26T06:11:36.630 回答
0

如果您将SVG 与 JavaScript 一起使用，则需要启用它，因为默认情况下它是禁用的。利用

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

在您的脚本标签内。

于 2018-08-05T22:09:21.137 回答
0

我找到了解决方案。

  • 整合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; }
于 2017-12-14T11:40:23.523 回答
-1

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

import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';
于 2018-04-12T01:22:45.527 回答