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

Question

我目前在一个项目中使用 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.)

functions.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' ) );

我正在尝试使用icon

<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>

The icon isn't rendering, I don't even get a square. :(

我目前有，

已检查 css 覆盖（看不到任何）
将我的 css 文件移到同一个文件夹中（没有用，所以我将它们移回去）
检查 fontawesome-all.css 文件以检查路径是否正常 example: src:url(../webfonts/fa-brands-400.eot)
包含 <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 图标。

如果有人能帮助我指明正确的方向，我将永远感激不已。

Answer 1

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

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

专业提示：始终检查 all.min.css 文件顶部的版本号，如果缺少图标，请将此版本与 cheat sheet 顶部列出的版本号进行交叉检查.

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

Font Awesome loading error / Webfont loading issue?

wordpress

.htaccess

fonts

font-awesome