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.

@daviles-jd

Your solution is not relevant to using gulp.

@mikestratton
sorry, I was wrong.

Hello,
I have a freshly installed laravel 5.8
ran
npm install font-awesome

added in resources/assets/sass/app.scss
@import "node_modules/font-awesome/scss/font-awesome";

in the webpack.mix file
.copy('node_modules/font-awesome/fonts', 'public/fonts');

ran npm run dev, all green but fonts not working on my views
e.g
<i class="fas fa-address-book"></i>

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';

none of the above solutions work for me, currently in a laravel 7 project

none of the above solutions work for me, currently in a laravel 7 project

Works fine for me on Laravel 7. See @danieledesantis comment.

@samiam9297

none of the above solutions work for me, currently in a laravel 7 project

Works fine for me on Laravel 7. See @danieledesantis comment.

did you deploy it?

@k3nn4nR

You need to compile since these are scss files. Use npm run watch

If I misunderstood your question please re-word it

i meant npm run watch to show any change on scss or js files, but i was having the problem of the squares, i figure that i got it deployed on the server as an alias (www.host.com/laravel_proyect), there was when i have de problem, but when i deploy it as the main proyect (www.laravel.com), fontawesome run exelente, the problem was the routes, laravel expectates (ass i can understand) www.laravel.com/view to be in web.php, and so any asset that we use, whe using www.host.com/laravel/view, the routes must change in any view and so in the asset.

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';