How To Use Font Awesome With Laravel

font-awesome-and-laravel.md

For some reason there is a whole thread on this seemingly simple tasks. In a bootstrapped Laravel 5.4 instance the following worked for me.

Install Font Awesome with NPM

npm install font-awesome

Import font-awesome in your app.scss file

// resources/assets/sass/app.scss 
// Font Awesome 
@import "node_modules/font-awesome/scss/font-awesome";

Copy fonts to public directory

Add the following to your elixir config in the gulpfile.

.copy('node_modules/font-awesome/fonts', 'public/fonts')

Run Gulp

If you run gulp you should be able to now start using font-awesome everywhere in your app.

If font awesome works locally but displays empty squares when you deploy, try this:

git add -f public/fonts/vendor

Font Awesome was working for me in my development environment. I pushed to Github and then deployed with Laravel Forge. Opening my browser, font awesome icons were replaced with empty squares. I opened the developers tools/network tab in my browser and there was a "404 not found error" for the font awesome .woff files. By default, a Laravel project will .gitignore any folder named "vendor". When you use mix or gulp to compile, it will likely create a directory in your public folder: fonts/vendor/@FortAwesome.

Using the above git command will force git to add the public/fonts/vendor folder.

Do i really need to add these files at github? Can't i just ignore them and when i clone project again it gets somehow download automatically?

So on Laravel 7 do the following:

npm i @fortawesome/fontawesome-free --save

After that add these lines to your resources/sass/app.scss:

// Fort Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';

To make changes take effect, run this: npm run dev or for production npm run prod

This should work with every Laravel Version.

In recent Font Awesome versions you need to import the scss files which include the @font-face rules (which have been moved from fontawesome.scss)

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/brand';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';

should @import '~@fortawesome/fontawesome-free/scss/brands';