时间戳

首页 > 解决方案 > Font Awesome 加载错误/Webfont 加载问题？

wordpress - Font Awesome 加载错误/Webfont 加载问题？

问题描述

我目前正在一个项目中使用 font awesome 5.0.9，但我对遇到的一个问题感到困惑。

我已按如下方式加载我的文件；

文件结构

Root Dir/
 - css/
   - fa-brands.min.css
   - fontawesome-all.min.css
 - js/
 - webfonts/
   - fa-light-300 (All types - eot, svg, ttf etc.)
   - fa-brands-400 (All types - eot, svg, ttf etc.)
   - fa-regular-400 (All types - eot, svg, ttf etc.)
   - fa solid-900 (All types - eot, svg, ttf etc.)

函数.php

wp_enqueue_style( 'font-awesome-brands', get_stylesheet_directory_uri() . '/css/fa-brands.min.css', array(), $the_theme->get( 'Version' ) );
wp_enqueue_style( 'font-awesome-pro', get_stylesheet_directory_uri() . '/css/fontawesome-all.min.css', array(), $the_theme->get( 'Version' ) );

我尝试使用的图标

<span class="d-none d-sm-block btn btn-lg btn-icon btn-white text-primary rounded-circle mb-4">
    <span class="far fa-lightbulb-on btn-icon__inner"></span>
</span>

图标没有渲染，我什至没有得到一个正方形。:(

我目前，

  1. 检查 css 覆盖（看不到任何内容）
  2. 将我的 css 文件移动到同一个文件夹中（没有用，所以我把它们移回来了）
  3. 检查了 fontawesome-all.css 文件以检查路径是否正常似乎很好example: src:url(../webfonts/fa-brands-400.eot)
  4. 包含<FilesMatch ".(eot|ttf|otf|woff)">Header set Access-Control-Allow-Origin "*"</FilesMatch>在我的 .htaccess 文件中。

Chrome 的开发工具确实为我指出了一条线索，我可以在源面板中看到我所有的网络字体，除了fa-light-300.woff2（我认为其他类型也丢失了，例如 fa-light-300.svg 等）。这可以解释为什么我可以毫无问题地使用 fa-brands 和 fa-solid 图标。

如果有人可以帮助我指出正确的方向，我将永远感激不尽。

标签： wordpress.htaccessfontsfont-awesome

解决方案

<i class="fal fa-lightbulb-on"></i>

我所追求的图标fa-lightbulb-on直到 5.3.0 版才包含在 Font awesome 中。我正在运行 5.0.9，将文件更新到更高版本解决了我的问题（5.8.1）。我希望我一开始就检查过这个，但是，嘿；我们都会犯错。

专业提示：始终检查 all.min.css 文件顶部的版本号，如果缺少图标，请与备忘单顶部列出的版本号交叉检查此版本。

Fa版本号高亮

推荐阅读