Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Awesome 5 Bundle via NPM

Tags:

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 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
    
  2. 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,
    })
    
  3. 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);
like image 967
Daniel Potthast Avatar asked Dec 08 '17 10:12

Daniel Potthast


People also ask

How do I install Font Awesome 5?

To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.

How do I import Fortawesome Font Awesome for free?

OR if you are using Sass, you can import the module in app. scss . @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/<type>'; Note: Replace <type> with solid , brands or regular whatever type of icons you need.


2 Answers

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.

like image 95
cr0ybot Avatar answered Sep 20 '22 15:09

cr0ybot


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)
like image 22
Rob Madole Avatar answered Sep 19 '22 15:09

Rob Madole