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.
npm install font-awesome
// resources/assets/sass/app.scss
// Font Awesome
@import "node_modules/font-awesome/scss/font-awesome";
Add the following to your elixir config in the gulpfile.
.copy('node_modules/font-awesome/fonts', 'public/fonts')
If you run gulp you should be able to now start using font-awesome everywhere in your app.
@import "~font-awesome/scss/font-awesome";
Is enough at this point. Webpack handles all the copying you need.
but where exactly can I add the solution above {cmd not working}
In the resources/assets/sass/app.scss file
Please how do i copy fonts to the public directory i don't see elixir config in my gulp js file please help
If font awesome works locally but displays empty squares when you deploy, try this:
git add -f public/fonts/vendorFont 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.
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.
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?
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/vendorFont 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 --saveAfter 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';
yarn add font-awesome@import "~font-awesome/scss/font-awesome";in you mix file:
.copy('node_modules/font-awesome/fonts', 'public/fonts')