字体真棒图标未显示

Question

我现在正在努力使用 webpack 来管理我的资产。 我已经用 yarn 安装了 font-awesome，并在我的网页中导入了 .css 文件。 我的问题是，即使我的 html 识别出 font-awesome.css 中的类，我尝试使用的图标仍显示为填充有四个数字（标识图标）的方格

我的 webpack 代码是：

// webpack.config.js
var Encore = require('@symfony/webpack-encore');
const HandlebarsPrecompiler = require('webpack-handlebars-precompiler');

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('web/build/')
    // .addEntry('fs', 'empty')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')

.addEntry('fonts/glyphicons-halflings-regular.ttf', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf')
.addEntry('fonts/glyphicons-halflings-regular.eot', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot')
.addEntry('fonts/glyphicons-halflings-regular.svg', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg')
.addEntry('fonts/glyphicons-halflings-regular.woff', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff')
.addEntry('fonts/glyphicons-halflings-regular.woff2', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2')

.addEntry('fonts/font-awesome', './node_modules/components-font-awesome/css/fontawesome.css')
.addEntry('fonts/fontawesome-webfont.eot', './node_modules/font-awesome/fonts/fontawesome-webfont.eot')
.addEntry('fonts/fontawesome-webfont.svg', './node_modules/font-awesome/fonts/fontawesome-webfont.svg')
.addEntry('fonts/fontawesome-webfont.ttf', './node_modules/font-awesome/fonts/fontawesome-webfont.ttf')
.addEntry('fonts/fontawesome-webfont.woff', './node_modules/font-awesome/fonts/fontawesome-webfont.woff')
.addEntry('fonts/fontawesome-webfont.woff2', './node_modules/font-awesome/fonts/fontawesome-webfont.woff2')

.addEntry('css/bootstrap', './node_modules/bootstrap/dist/css/bootstrap.css')
.addEntry('css/bootstrap-theme', './node_modules/bootstrap/dist/css/bootstrap-theme.css')
.addEntry('css/bootstrap-datepicker', './node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css')

.addEntry('css/app', './src/SgbBundle/Resources/public/css/app.css')

// export the final configuration
module.exports = Encore.getWebpackConfig();

问题是，在检查器中，当我看到某些 html 内容中使用的规则时，例如

<i class="fa fa-graduation-cap fa-4x" aria-hidden="true" id="icon"></i>

识别'fa' 类、'fa-4x' 类但不识别'fa-graduation-cap' 类。并且该图标显示为一个空方块。 谢谢。

Answer 1

我找到了答案。 我已经通过 Yarn add 安装了两个版本的 font-awesome。 一种是 components-font-awesome，另一种是 font-awesome。 如果您检查我的 webpack 配置，我会从这两个依赖项中添加文件。

.addEntry('fonts/font-awesome', './node_modules/components-font-awesome/css/fontawesome.css')
.addEntry('fonts/fontawesome-webfont.eot', './node_modules/font-awesome/fonts/fontawesome-webfont.eot')

我通过使用 font-awesome 解决了我的问题

.addEntry('fonts/font-awesome', './node_modules/font-awesome/css/fontawesome.css')
.addEntry('fonts/fontawesome-webfont.eot', './node_modules/font-awesome/fonts/fontawesome-webfont.eot')

并删除“components-font-awesome”。 总而言之，我试图使用来自两个相同但不同的包的文件。

Answer 2

fa-graduation-cap 是 Font Awesome 5.0.0 中的一个新图标类。版本 4 中的等效图标类是 fa-mortar-board。

因此，如果您想使用 v4 名称，您需要确保加载的是 Font Awesome 5 而不是 4。从上面的代码清单中看不出您正在加载哪个版本的 Font Awesome。

您可以找到从版本 4 升级到版本 5 的参考，包括从 v4 更改为 v5 的图标类的完整列表here。

或者，如果您卡在 Font Awesome 4 中并且需要版本 4 参考来查找图标名称和代码，请确保使用 the older one here。在fontawesome.com 的页脚链接中可以找到指向该链接的链接。

Answer 3

尝试从CDN添加，链接如下 https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

标签没有错误