Question

我目前正在一个项目上使用令人敬畏的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>

该图标未呈现，我什至没有得到一个正方形。：（

我目前有

已检查css覆盖（看不到任何内容）
将css文件移动到同一文件夹中（该文件无法正常工作，因此我将其移回了该文件）
检查fontawesome-all.css文件以检查路径是否正常example: src:url(../webfonts/fa-brands-400.eot)
在我的.htaccess文件中包含了<FilesMatch ".(eot|ttf|otf|woff)">Header set Access-Control-Allow-Origin "*"</FilesMatch>。

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顶部列出的版本号进行交叉检查。< / p>

字体超赞加载错误/ Webfont加载问题？

1 个答案: