Font Awesome 图标未显示

Question

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

我的 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' class、'fa-4x' class 但不识别 'fa-graduation-cap' class。图标显示为一个空方块。谢谢。

Answer 1

尝试从CDN添加，下面是link https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

标签没有错误

Answer 2

我找到了答案。我已经通过 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 3

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

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

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

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

的页脚 link 中可以找到 link

Font Awesome 图标未显示

Font Awesome icons not being shown

css

webpack

font-awesome

yarnpkg

symfony-3.3