How to include FontAwesome in Phoenix app?

You enter assets directory and then follow NPM instructions. That is it. Phoenix assets pipeline is exactly the same way as any other webpack project with specific build directory (../priv/static) and that is all.

Hi, when it comes to icons, fonts or heavy dependencies it’s a good idea to serve those assets using their respective CDNs, so I’d rather add a simple link tag to include Font Awesome. You should only serve by yourself those dependencies that you want to customize.

You enter assets directory and then follow NPM instructions . That is it.

I wish. Nothing related to font awesome ends up in priv/static after doing just that.

“Same way as any other webpack project” means nothing to me unfortunately.

That makes sense, I’ll see if I can just put those pre-built assets on S3 due to privacy concerns.

Have you restarted your application? It need to be rebuilt after the fact.

You might need something like File Loader to manage the kinds of assets FontAwesome provides. This guide seems to go over using Font Awesome and File Loader.

I have this loader for fonts in my webpack.config.js, in the modules/rules section

      // Load fonts
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?(\?.*$|$)/,
        use: 'url-loader?&limit=10000&name=/fonts/[name].[ext]',
      },
      {
        test: /\.(eot|ttf|otf)?(\?.*$|$)/,
        loader: 'file-loader?&limit=10000&name=/fonts/[name].[ext]',
      },

Then in app.js, I load app.scss, and in app.scss, I load fontawesome, something like this…

@import '../../node_modules/font-awesome/css/font-awesome.css';

But for this to work, I added following dev dependencies,

node-sass, sass-loader, file-loader, url-loader.

You might show your webpack.config.js, and your package.json.

Another option is to download individual font awesome icons as SVGs into assets/static/images and them emit them in your templates or views with Phoenix Inline SVG.

If you only want a few icons, this can reduce the size of your responses and doesn’t involve any webpack stuff. Caveats: some older browsers have issues with SVG, and every time you want a new icon, you have to download it and add it to your assets directory.

Thank you, that worked!

Navigate to your phoenix app assets directory:

cd your_app/assets

Install free edition of fontawesome as explained here:

npm install --save-dev @fortawesome/fontawesome-free

You will see package.json updated with a new entry:

..
"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.9.0",
...

You will have to install file-loader package as well: npm install file-loader.

Then modify webpack.config.js to be able to copy awesome fonts and extract SCSS files:

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(css|sass|scss)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: '../fonts'
          }
        }]
      }
    ]
  },
...

Next, modify your app.scss file as follows (I also use Bootrstrap, so remove the related import if you don’t use it):

@import "custom";
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

And finally, my _custom.scss file (remove $primary containing line, it is for Bootrstap override):

/* Boostrap overrides */

$primary: #F92653;

/* Fontawesome 5 config */

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

Hope, this helps.