Question

我正在努力使用webpack来管理我的资产。我已经安装了yarn真棒字体，并将.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

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

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

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

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

Answer 2

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

标签中没有错误

Answer 3

我找到了答案。我已经通过Yarn add安装了两个版本的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')

我通过使用超棒的字体解决了我的问题

.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”。总而言之，我试图使用来自两个相同但不同的程序包中的文件。

字体真棒图标未显示

3 个答案: