无法加载 Font Awesome

Question

我一直无法 self-serve 并在我的网站服务器上加载 Web 字体，并且有关此主题的其他 Stack Overflow 文章没有帮助我找到此处的错误。

我得到一个空白 space 应该出现字体的地方。

详情如下：

https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/ 是我字体的 CSS 文件的位置，fontawesome-all.css

https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/webfonts 是我的字体的位置

首先，让自己确信我没有犯 path-related 我的风格 sheet link header 的错误.

我尝试在我的 HTML header 中以多种方式引用字体的 CSS 样式sheet：

作为亲戚link:

<link href="./fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

作为绝对 link:

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

其次，确保我的@font-face实现和指向的路径是正确的。在字体样式 sheet fontawesome-all.css 中是对字体的 @font-face 调用：

@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 Free';
  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"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

编辑： 我在页面上使用的 HTML 字体（图标）是标准的：例如 <i class="fas fa-external-link-alt"></i> 还有伪元素实例：

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

编辑 2： 对字体的 CSS 文件使用官方外部源，header 中的 <link href="https://www.ashenglowgaming.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet"> 适用于内联实例字体，如我上面给出的示例 <i class="fas fa-external-link-alt"></i>，但不是伪元素实例

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

无论如何，我想在我自己的服务器上提供文件，所以 linking off-site 对我来说是不够的。

最后，供大家参考：查看official Font Awesome installation guide here

Answer 1

我认为这可能是问题所在：

url("../webfonts/font-here.ext");

在您的 fontawesome-all.css 样式表中，您要求浏览器查找当前目录上方一个目录的字体文件，这是不准确的，因为字体文件似乎位于与样式表相同的目录。

这应该有效：

@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 Free';
  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"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("webfonts/fa-solid-900.eot");
  src: url("webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff"), url("webfonts/fa-solid-900.ttf") format("truetype"), url("webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

更新

这是问题所在：

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

应该是：

<link href="https://www.foo.com/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

看来您实际上遇到了两个问题：字体文件路径错误和样式表路径错误。

顺便说一下，我建议使用 wp_enqueue_style and wp_enqueue_script 将样式表和 JS 文件附加到主题的头部：

/**
 * Proper way to enqueue scripts and styles
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Answer 2

除了呈现图标所需的 all.css 之外，还需要 webfonts 文件夹。

这是针对此类错误的解决方案之一。

无法加载 Font Awesome

Unable to load Font Awesome

css

wordpress

fonts

font-face

font-awesome