like title says, I can not install font awesome 5 with npm for scss purposes.

Trying to install version 5

Accoring to https://fontawesome.com/how-to-use/use-with-node-js

npm i --save @fortawesome/fontawesome

Looking through the installation in node_modules I see no scss file to hook up to. I tried including the styles.css file in my app.scss file but that did not work.

My setup for version 4:

package.json "font-awesome": "^4.7.0",

app.scss @import "node_modules/font-awesome/scss/font-awesome.scss";

Usage <i className="fa fa-save icon controlItem"></i>

Easy as pie. How can I achieve this with version 5?? Am I using the wrong package?

UPDATE

Apparently, just using @fortawesome/fontawesome is not eanough. The packages have been split up so you also have to select npm install --save @fortawesome/fontawesome-free-regular Still I have no success importing it

npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons

In your app.js or equivalent Javascript file,

import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)

For usage, there are slight changes to the way the class names are being used. Please refer to the icons on Fontawesome site for the "full" class names.

Example

<i class="fas fa-chevron-left"></i>

Although the idea of adding all the 3 variants of fonts into the project seems to be a convenient thing, do beware that this will slow performance when building/compiling your project. Thus, it is highly recommended that you add the fonts you need instead of everything.

In case if you'd like to extract all the Font Awesome specific Javascript files to the vendor.js using Laravel Mix, you'll need to only extract the packages to the extract() method as an array. You won't even need to use the fontawesome.library.add() method to add support for the fonts. This will help you to manage the vendor specific file cache in future.

mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        '@fortawesome/fontawesome',
        '@fortawesome/fontawesome-free-brands',
        '@fortawesome/fontawesome-free-regular',
        '@fortawesome/fontawesome-free-solid',
        '@fortawesome/fontawesome-free-webfonts'
    ]);

My understanding of FontAwesome 5 is that they use javascript to add inline SVGs to the DOM.

Take a look at this article: SVG with JS

Rather than compiling an scss file, you just need to include this javascipt one: fontawesome-all.js, any icons you add to your HTML should then be converted to SVGs automatically.

来源：https://stackoverflow.com/questions/49304017/install-font-awesome-5-with-npm-for-scss-usage

标签

javascript