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.
Somehow including fonts in javascript doesn't feel right to me, it's a font and it should belong in css, so here is how to install it using scss:
npm install --save @fortawesome/fontawesome-free- add
@import '~@fortawesome/fontawesome-free/css/all.min.css' in your app.scss file
- now include app.css to your head and tadaa done
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.
