Add Fontawesome to phoenix 1.5

Font Awesome

inside assets folder

yarn add @fortawesome/fontawesome-free

yarn add file-loader

in assets/css/ create a file called _variables.scss add the following line.

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

import following in app.scss file.

@import "variables";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/fontawesome";

If you dont have sass-loader inside rules, in webpack.config.js, add it now

{
    test: /\.[s]?css$/,
    use: [
       MiniCssExtractPlugin.loader,
       'css-loader',
       'sass-loader',
       'postcss-loader' 
    ],
}

Also while in webpack.config.js, lets configure the file-loader to load fontawesome

{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
        {
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: '../fonts'
        }
      }
   ]
},

Add fontawesome icon in app.html.eex. and test it

<i class=”fas fa-bars”></i>

we should see this icon