Font Awesome 5 字体系列问题

Question

我在 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'

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; 会拯救你。如果没有 font-weight: 900;.

，字体 awesome 5 中的某些图标无法使用

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

Answer 2

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

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

另见这个问题： and the new Font Awesome API: https://fontawesome.com/how-to-use/font-awesome-api

此外，将 CSS 代码中的字体系列更改为

font-family: "Font Awesome 5 Regular";

Answer 3

我找到了解决办法。

整合fontawesome-all.css
在文件末尾搜索第二个@font-face并替换

字体系列：'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; }

Answer 4

我不想使用 'all' 版本，因此在“fontawesome-all.min.css”文件（之前包含在 header 中）中搜索 '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;
}

Answer 5

使用 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 6

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

Answer 7

奇怪的是你必须在一些图标中加上'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 8

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

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

Answer 9

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

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

Answer 10

如果您将 SVG 与 JavaScript 一起使用，您需要启用它，因为它在默认情况下处于禁用状态。使用

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

在您的脚本标签内。

Answer 11

要求 900 字重不是怪事，而是 FontAwesome 有意添加的限制（因为它们共享相同的 unicode，只是字体字重不同），这样您就不会通过黑客手段使用 'solid' 和'light' 个图标，其中大部分仅在付费 'Pro' 版本中可用。

Answer 12

npm i --save @fortawesome/fontawesome-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";

对我来说效果很好！

Answer 13

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

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>

Answer 14

奇怪的是，您必须包含字体系列和字体粗细才能正常工作。这是对我有用的：

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

希望对您有所帮助。

Answer 15

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

终于找到解决方法了！

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

Answer 16

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

<ul class="fa-ul">

连同其他人已经提供的 2 位建议：

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 安装或组件。

Answer 17

添加 fas class.

喜欢：

  <i class="fas fa-solid fa-angle-left"></i>

没有 fas 图标将不会被加载

Font Awesome 5 字体系列问题

Font Awesome 5 font-family issue

css

fonts

font-awesome-5