Font Awesome icons not being shown

Question

I'm struggling with webpack to manage my assets right now. I've installed font-awesome with yarn, and imported the .css files in my web page. My problem is that, even though my html recognises the classes from font-awesome.css, the icons im trying to use are shown ass squares filled with four numbers (which identify the icon)

My webpack code is:

// 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();

The thing is that in the inspector, when I see the rules being used in some html content like

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

recognises the 'fa' class, the 'fa-4x' class but no the 'fa-graduation-cap' class. And the icon is shown as an empty square. Thanks.

Answer 1

I've found the answer. I've installed two versions of font-awesome via Yarn add. One is components-font-awesome and the other one just font-awesome. If you check on my webpack configuration, Im adding files from this two dependencies.

.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')

I solved my issue by just using 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')

And deleting 'components-font-awesome'. To sum up, I was trying to use files from two same but different packages.