Font-awesome: Webpack Laravel-mix

[pl38]

Hi,

I have npm'd the Pro version as per the docs and added the refs to my build scripts in webpack.mix.js (Laravel file):

    window.$ = window.jQuery = require('jquery');

    // Required for BS4
    window.Tether = require('tether');
    window.Popper = Popper;
    require('bootstrap');
    require('@fortawesome/fontawesome');
    var faSearch = require('@fortawesome/fontawesome-pro-regular/faSearch');

I'm using BS 4 and have removed my previous refs to FA 4 everything builds fine and the .js file includes the new FA 5 refs.

Unfortunately it doesn't change or seem to reference the

<i class="far fa-search></i>

for instance, but if I add the .js directly

<script defer src="/js/svg-with-js/js/fontawesome.min.js"></script>
<script defer src="/js/svg-with-js/js/fa-regular.min.js"></script>

to the root html and build it works as expected.

Is there an "on-load" or order-of-load that needs to be called/referenced that may not be being passed when it's built, or am I being thick?

I would like to be able to just use those icons I need to save size.

[aerni]

Same problem here. I'm following the instructions to use with Node.js. But the icons are just not rendering. Adding the .js directly to the html works. Seems like I'm missing something here?

[robmadole]

The files from /js/svg-with-js were intended to use along with fontawesome.dom.i2svg but it's become increasingly clear that people are using the NPM packages and expecting them to work a little smoother 😸

Sooooo. We are gonna put our heads together and figure out how to make this work well. Hang tight everyone and we'll make this smooth like butter.

[zeitxx]

I tried to do the same with import statements to use the tree-shaking of Rollup and get a custom bundle of FontAwesome for usage in the browser:

import fontawesome from "@fortawesome/fontawesome";
import {faCalendarAlt} from "@fortawesome/fontawesome-pro-solid";

fontawesome.icon(faCalendarAlt);

@robmadole Would be great if you add this possibility soon or another one to create a custom bundle of FontAwesome as I only need a small part of FontAwesome and don't want to include the whole packs.

[robmadole]

We do support tree-shaking. Did that not work as expected @SpaceHeroGuide ?

[zeitxx]

Tree-shaking itself worked but the resulting JavaScript file did not replace

<i class="fas fa-calendar-alt"></i>

with the icon.

Or am I missing a call?

[robmadole]

@SpaceHeroGuide the NPM package just doesn't work the same way that the svg-with-js files do. We'll get this squared away soon.

[antonioribeiro]

According to this

Looks like there's a "non-smooth" way, which was supposed to work. Did any one succeeded? Is it in the docs?

I'm doing what's in the docs:

Install via npm

    "@fortawesome/fontawesome": "^1.0.1",
    "@fortawesome/fontawesome-free-solid": "^5.0.1",
    "@fortawesome/fontawesome-free-brands": "^5.0.1",
    "@fortawesome/fontawesome-pro-solid": "^5.0.1",
    "@fortawesome/fontawesome-pro-regular": "^5.0.1",
    "@fortawesome/fontawesome-pro-light": "^5.0.1",

Import

import fontawesome from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-pro-solid'
import { faMusic } from '@fortawesome/fontawesome-pro-light'

fontawesome.icon(faUser)
fontawesome.icon(faMusic)

Which successfully goes to my app.js:

/*!
 * Font Awesome Pro 5.0.1 by @fontawesome - http://fontawesome.com
 * License - http://fontawesome.com/license (Commercial License)
 */
var prefix = "fas";
var faAddressBook = { prefix: 'fas', iconName: 'address-book', icon: [448, 512, [], "f2b9", "M436 160c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V48c0-26.51-21.49-48-48-48H80C53.49 0 32 21.49 32 48v416c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20v-64h20zM224 96c53.019 0 96 42.981 96 96s-42.981 96-96 96-96-42.981-96-96 42.981-96 96-96zm128 304c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48v-48.711c0-20.994 13.644-39.553 33.683-45.815l22.954-7.173C173.563 312.413 198.198 320 224 320s50.437-7.587 71.363-21.699l22.954 7.173C338.356 311.736 352 330.295 352 351.289V400z"] };

Use

<i class="fal fa-music"></i>
<i class="fas fa-user"></i>

Fail

No icons are rendered by the browser. So I'll assume there's something missing in between, right?

[tagliala]

Honestly I'm facing the same issue, but I'm not so much into webpack so I thought it was an issue of mine

[matthiasballreich]

i tried it the way like @antonioribeiro and it did not work. So did i understand it right, that is actually not possible to bundle the fontawesome 5 js stuff into one bundle.js with webpack that will work?

[pl38]

I have reverted to pulling in the @fontFace webfont for the time being, I believe that there must be a missing function (removed during build I assume) when the page is loaded to replace the references with the equivalent .svg as that is what happens with a direct add of the pre-complied .js files.

Also I cannot see a practical way to change the :before or :after css references which use the font name.

I think the new fonts are wonderful and am more than happy to wait for the issues to wash through, as using the web fonts is at least not a backward step from fa 4.

[hahnmg]

Ran into the same problem today.

Is there any other way to load only those Icons we need in a project?

[xaoseric]

I have also tried this, and can confirm that it does not work.

Apparently it is possible to use webfonts with css, but anything that I have tried, no such luck https://fontawesome.com/how-to-use/web-fonts-with-css

[robmadole]

We're close on this one. I'm working it right now and it's at the top of my list.

[robmadole]

We've released 5.0.2 of Font Awesome and also updated all NPM packages. This issue should be resolved but I'll re-open if anyone is still having issues.

[matthiasballreich]

Works perfect now!

[mlwilkerson]

Seeking some feedback here about some plans we have for improving the experience of getting up and running with Font Awesome 5.x. Threads like these have shown us that we need some improvement there, so I'm hoping that some of you participating here could let us know whether you think we're on the right track with our proposed solutions.

For an upcoming release of Font Awesome, we're considering a different approach to packaging that we hope will be more clear to more of our users within the wide range of usage scenarios we want to support.

Would you be willing to have have a look at this brief document that describes those changes and respond with your feedback by emailing me (see the end of the doc for some feedback questions and my email address), @pl38, @matthiasballreich, @xaoseric, @hahnmg, @tagliala, @antonioribeiro, @SpaceHeroGuide, @aerni90?

Feedback Request: Packaging Font Awesome 5.1

(Anyone else listening in on this conversation—I welcome your feedback too!)

[pl38]

Hi Mike,

Have downloaded to Dropbox paper and will read tomorrow, I have a couple of suggestions depending on the doc - thank you for asking!