Font Awesome 5 Bundle via NPM

Question

I\'m trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM.

1. I\'ve added all required packages from the

Answer 1

I realize this is already answered, but I'd like to give some visibility to the full solution since the information above does not include how to execute the SVG icon replacement.

If you're loading Font Awesome 5 via NPM & WebPack for use in front-end HTML like I am, you will need to do something like this in your JS that's included in your bundle:

"use strict";

// Import FontAwesome: https://fontawesome.com/how-to-use/use-with-node-js
import fontawesome  from '@fortawesome/fontawesome';

// This enables using FontAwesome in CSS pseudo elements
// see: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements
fontawesome.config.searchPseudoElements = true;

// Icons should be imported individually to keep bundle size down
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '@fortawesome/fontawesome-pro-solid/faPhone';
fontawesome.library.add(faCheck, faPhone);

// If really necessary, entire styles can be loaded instead of specifying individual icons
//import solid from '@fortawesome/fontawesome-pro-solid';
//fontawesome.library.add(solid);

// Execute SVG replacement
fontawesome.dom.i2svg();

That last line is key, you have to execute SVG icon replacement manually.

Answer 2

Try to use

fontawesome.library.add(faCheck);

instead of

fontawesome.icon(faCheck);

If it does not work, please update your question with your DOM template, to see how it's defined in there.

Answer 3

We just released version 5.0.2 and updated the @fortawesome NPM packages to fix a few bugs related to this. Make sure you upgrade before you try anything else.

The missing step of the above example is to add the icon to the library:

fontawesome.library.add(faCheck)