Font Awesome 5 pseudo elements with Webpack

Question

I have been struggling with this for way too long and have no clue where I am going wrong.

I am trying to use fontawesome 5 in my webpack project. I have been able to use icons in HTML but if I try a pseudo selector it just returns the empty square. Read loads of articles and docs but nothing seems to work. Please help thanks.

npm install @fortawesome/fontawesome-free

index.js

    import 'bootstrap'
    import '@fortawesome/fontawesome-free/js/all.js'
    import '../scss/main.scss'

    window.FontAwesomeConfig = {
      searchPseudoElements: true
    }

main.scss

    /// Bootstrap ///
    // -- Required
    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";

    // -- Optional
    @import "~bootstrap/scss/buttons";
    @import "~bootstrap/scss/code";
    @import "~bootstrap/scss/forms";
    @import "~bootstrap/scss/grid";
    @import "~bootstrap/scss/images";
    @import "~bootstrap/scss/modal";
    @import "~bootstrap/scss/reboot";
    @import "~bootstrap/scss/type";
    @import "~bootstrap/scss/transitions";
    @import "~bootstrap/scss/mixins/breakpoints";

    /// Modules ///
    @import 'modules/colors';
    @import 'modules/sizes';
    @import 'modules/fonts';
    @import 'modules/transitions';    

    /// Partial Files ///
    @import 'partials/jumbotron';

    /// Vendor Files ///
    @import 'vendor/reset';

SCSS File _jumbotron.scss

    .products {
        background: $colour-red;

        .products-item {
          .products-item-header {
            .products-item-title {
              a {
                padding: $size-base;
                display: block;
                color: $colour-white;
                text-align: center;

                &:before {
                  font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";
                  display: block;
                  content: "\f095";
                  font-weight: 900;
                  font-size: 20px;
                  color: $colour-white;
            }
          }
        }
      }

HTML

    <div class="products">
        <div class="row">
            <div class="col-sm-3 products-item">
                <div id="post-37">
                  <div class="products-item-header entry-header">
                    <h3 class="products-item-title entry-title">
                       <a href="http://localhost/wplocal/products/agribusiness">
                          Agribusiness
                        </a>
                    </h3>
                 </div>
              </div>
           </div>
        </div>
     </div>

Webpack Config

    const path = require('path')
    const webpack = require('webpack')
    const HtmlWebPackPlugin = require('html-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    // const devMode = process.env.NODE_ENV !== 'production'

    module.exports = {
        entry: { main: './src/js/index.js' },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].js'
        },
        module: {
            rules: [
                {
                  use: {
                    loader:'babel-loader',
                    options: { presets: ['es2015'] }
                  },
                  test: /\.js$/,
                  exclude: /node_modules/
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        'style-loader',
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader'
                    ]
                },
                {
                  test: /\.(gif|png|jp(e*)g|svg)$/,
                  use: [{
                    loader: 'url-loader',
                    options: {
                      limit: 1000000, //Convert images < 1mb to base 64 strings
                      name: 'images/[name].[ext]'
                    }
                  }] 
                },
                {
                  test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                  use: [{
                    loader: 'file-loader',
                    options: {
                      name: 'fonts/[name].[ext]',
                      publicPath: '../'
                    }
                  }]
                }
            ]
        },
        devServer: {
            contentBase: "./dist"
        },
        plugins: [
            new HtmlWebPackPlugin({
                inject: false,
                hash: true,
                template: './src/index.html',
                filename: 'index.html'
            }),
            new MiniCssExtractPlugin({
                filename: 'css/style.css',
                chunkFilename: 'css/style.css'
            }),
            new CopyWebpackPlugin ([
              {
                from: './src/images',
                to: 'images'
              }
            ]),
            new webpack.ProvidePlugin({
              $: 'jquery',
              jQuery: 'jquery',
              'window.jQuery': 'jquery',
              Popper: ['popper.js', 'default']
            })
        ]
    }

Answer 1

Try

  font-family: 'Font Awesome\ 5 Free';

Answer 2

Set searchPseudoElements to true in the fontawesome-svg-core config object. And verify if the font-family and content properties have the correct values.

Taken from the fontawesome docs:

https://fontawesome.com/how-to-use/javascript-api/setup/configuration

By enabling searchPseudoElements to true (it’s false by default) you can have Font Awesome search your DOM for any elements that have:

A Font Awesome matching font-family,

A content property

Valid font-family values are: Font Awesome 5 Solid, Font Awesome 5 Regular, Font Awesome > 5 Light, and Font Awesome 5 Brands.

Example

import {library, dom, config} from "@fortawesome/fontawesome-svg-core";
import {faCheck} from "@fortawesome/free-solid-svg-icons/faCheck";

config.searchPseudoElements = true; //<----- config

export default () => {

    library.add(faCheck);
    dom.watch();

}

Example:

<head>
  <script src="https://use.fontawesome.com/releases/v5.13.1/js/all.js" data-search-pseudo-elements></script>
  <style>
  .glasses::before {
    display: none;
    font-family: 'Font Awesome 5 Solid';
    content: "\f530";
  }
  </style>
</head>
<body>
  <span class="glasses"></span>
</body>

Answer 3

<style>
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}