Using Font-Awesome is still a popular way to adding icons on your web because it provides a free-tier plan with many icons that cover most of your needs.
I believe many people still use the font-awesome via CDN to get started quickly. But using the CDN version of any libraries isn't configurable and not the modern way compared to these days' development. Modern developer tend to use webpack
or any assets builder to unify resources into single css file and minimize everything as small as possible for web performance.
In Laravel, we got laravel-mix
that uses webpack
for building the assets. Let's try to add font-awesome to the build.
Prerequisites to code along
Prepare your own existing or new ready-to-be-developed laravel app and make sure to have NodeJS
& NPM
installed on your machine. And you have to know how to use SASS/SCSS in laravel to apply the styles and fonts.
Installing Font-Awesome (Free Version)
We use NPM to install the font-awesome-free package:
npm install @fortawesome/fontawesome-free --save-dev
Importing Font-Awesome Assets
In resources/sass/app.scss
file, import the font-awesome styles:
...
// Font-Awesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
...
In the above code, I imported regular
, solid
, and brands
styles. If you only need a certain style, feel free to remove the remaining styles.
Exporting Font files
In the webpack.mix.js
file, find the mix configuration like below:
...
mix
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
...
And add the copy build for font-awesome like this to export the font-files when you are building the assets:
...
mix
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.copy(
'node_modules/@fortawesome/fontawesome-free/webfonts',
'public/webfonts'
);
...
Build
You could build the assets using:
npm run development
or
npm run production
When you are done building, the font files should be exported to public/webfonts
folder.
Adding Icons
Before we trying the font-awesome class, make sure you are using the default laravel external CSS usage in your layout like this:
...
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
...
or the fonts won't show up.
it's recommended to use
mix()
instead ofasset()
to enable cache-busting when deploying for production. But also enable the versioning inwebpack.mix.js
file.
Now add any icons to make sure it works. You can find it on https://fontawesome.com/icons?d=gallery&m=free and here are some examples:
<!-- Regular -->
<i class="far fa-user"></i>
<!-- Solid -->
<i class="fas fa-user"></i>
<!-- Brand -->
<i class="fab fa-dev"></i>
version used:
laravel-mix 5.0.7
@fortawesome/fontawesome-free 5.15.1
nodejs v14.15.1
npm 6.14.8
Top comments (8)
No need for adding .copy to mix in post sass Laravel (tested on 8.79.0), the @import in app.css does that for you :)
(defaults to "app-root \ fonts \ vendor \ font-vendor \ font-name")
Thanks for the info. FYI the Laravel version doesn't matter for the assets build, it's the Laravel-Mix version that matter.
how to change "/fonts/vendor/@fortawesome/fontawesome-free" to path "../fonts/vendor/@fortawesome/fontawesome-free" ?
What exactly do you mean? Where are you trying to change the path and why?
this works like a charm
Thank you <3
thanks for the info... been looking around for this
thanks my friend I appreciate your efort ;)