Skip to content

Instantly share code, notes, and snippets.

@levlaz
Last active October 9, 2023 11:47
Show Gist options
  • Save levlaz/bf1eb985717a24b807dab315d8f81ec9 to your computer and use it in GitHub Desktop.
Save levlaz/bf1eb985717a24b807dab315d8f81ec9 to your computer and use it in GitHub Desktop.
How To Use Font Awesome With Laravel

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.

@massimoselvi
Copy link

massimoselvi commented Feb 25, 2018

yarn add font-awesome

@import "~font-awesome/scss/font-awesome";

in you mix file:
.copy('node_modules/font-awesome/fonts', 'public/fonts')

@erikyuzwa
Copy link

@import "~font-awesome/scss/font-awesome";

Is enough at this point. Webpack handles all the copying you need.

@maspy91
Copy link

maspy91 commented Jun 25, 2018

but where exactly can I add the solution above {cmd not working}

@woodydrn
Copy link

woodydrn commented Nov 7, 2018

In the resources/assets/sass/app.scss file

@logikalmidia
Copy link

Please how do i copy fonts to the public directory i don't see elixir config in my gulp js file please help

@mikestratton
Copy link

mikestratton commented Jun 9, 2019

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.

@mikestratton
Copy link

@daviles-jd

Your solution is not relevant to using gulp.

@daviles-jd
Copy link

@mikestratton
sorry, I was wrong.

@michug
Copy link

michug commented Dec 7, 2019

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>

@danieledesantis
Copy link

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

@michug
Copy link

michug commented May 21, 2020

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

@samiam9297
Copy link

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

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

@k3nn4nR
Copy link

k3nn4nR commented Jul 1, 2020

@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?

@samiam9297
Copy link

@k3nn4nR

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

If I misunderstood your question please re-word it

@k3nn4nR
Copy link

k3nn4nR commented Jul 2, 2020

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.

@mianaliasjad
Copy link

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?

@mansouryaacoubi
Copy link

mansouryaacoubi commented Aug 26, 2020

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.

@papapadz
Copy link

papapadz commented Nov 9, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment