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.

I've added all required packages from the documentation:

yarn add -D @fortawesome/fontawesome
yarn add -D @fortawesome/fontawesome-pro-solid
yarn add -D @fortawesome/fontawesome-pro-regular
yarn add -D @fortawesome/fontawesome-free-brands

The following custom JS is included:

"use strict";

import fontawesome from '@fortawesome/fontawesome';
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';

fontawesome.icon(faCheck);

function iconsDoneRendering () {
    console.log('Icons have rendered'); // No output in console
}

fontawesome.dom.i2svg({ 
    callback: iconsDoneRendering,
})

The HTML template:

<head>
    <link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
</head>
<body>
    <ul class="fa-ul">
        <li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
        <li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
    </ul>
    <script src="/js/app.js?v2.1.4"></script>
</body>

The svg path is inside the bundled JS file, but I can't figure out which method needs to be called.

The following JS code solves the problem (since v5.0.2):

"use strict";

import fontawesome from '@fortawesome/fontawesome';
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '@fortawesome/fontawesome-pro-regular/faPhone';

fontawesome.library.add(faCheck,faPhone);

Are you seeing the CSS being added to the head of the document as I am? — benembery, Dec 12 '17 at 21:03
I look like it's currently not possible: "We will need to make some changes in order to support what you have there. It's currently a high priority for us." — Daniel Potthast, Dec 14 '17 at 06:40
I see that you updated the question to include the answer (kinda confusing, but ok). For anyone else wondering why this isn't replacing their icons, maybe you haven't included `fontawesome.dom.i2svg()` after adding them to the library. That was the step I was missing, which is not documented very well. — cr0ybot, Jan 18 '18 at 18:40
Thanks for your feedback – I've reverted the original question and added the solution. In my case the replacement works without the i2svg call. — Daniel Potthast, Jan 22 '18 at 07:12

score 12 · Answer 1 · answered Jan 18 '18 at 18:52

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.

This is outdated, https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements doesn't exist anymore. — Maros, Dec 19 '18 at 05:03
Agreed this is a bit out of date now. A more up to date and thorough answer can be found here instead: https://stackoverflow.com/a/53580347/1462775 — Trevor, Apr 05 '19 at 22:29

score 8 · Accepted Answer · answered Dec 20 '17 at 17:51

8

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)

answered Dec 20 '17 at 17:51

Rob Madole

191
2

Thanks @rob-madole this is working perfectly. I appreciate the quick update. – benembery Dec 20 '17 at 21:02
Thank you, it works perfectly! I've fixed the sample above. – Daniel Potthast Dec 22 '17 at 06:56

score 1 · Answer 3 · answered Dec 08 '17 at 11:06

1

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.

answered Dec 08 '17 at 11:06

Radu Maris

5,648
4
39
54

Font Awesome 5 Bundle via NPM

3 Answers3

Linked