Я сейчас борюсь с webpack, чтобы управлять своими активами.
Я установил font-awesome с помощью пряжи и импортировал файлы .css на свою веб-страницу.
Моя проблема в том, что, хотя мой html распознает классы из font-awesome.css, значки, которые я пытаюсь использовать, отображаются в виде квадратов задниц, заполненных четырьмя числами (которые идентифицируют значок)
Мой код веб-пакета:
// 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'. И значок отображается как пустой квадрат.
Спасибо.