Last active
September 10, 2025 10:16
-
-
Save karlhillx/5e3bb4892fe18b61b644798751c7ba35 to your computer and use it in GitHub Desktop.
Revisions
-
karlhillx revised this gist
Jun 21, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,5 @@ # Laravel Mix & Font Awesome Setup: Compiling Assets This document provides help on getting your Laravel instance running with the latest versions of [Laravel Mix](https://laravel-mix.com/) and [Font Awesome](https://fontawesome.com/). Note: This guide is for Laravel versions 5 through 7. If you are using Laravel 8, please go [here](https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621). <table> <tr> -
karlhillx revised this gist
Jun 21, 2021 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -35,14 +35,14 @@ Next, build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master Install the latest free version of [Font Awesome](https://fontawesome.com/) via the npm package manager. npm install -D @fortawesome/fontawesome-free The following dependency entry should now be in your [package.json](https://github.com/laravel/laravel/blob/master/package.json). <!-- language: lang-json --> // Font Awesome "devDependencies": { "@fortawesome/fontawesome-free": "^5.15.3", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. @@ -71,7 +71,7 @@ Happy Mixing! ## License Copyright © 2021 [Karl Hill](https://www.github.com/karlhillx/). Provided under the [MIT license](http://opensource.org/licenses/mit-license.php). -
karlhillx revised this gist
Jun 21, 2021 . 1 changed file with 4 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -27,6 +27,9 @@ Next, build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master <!-- language: lang-js --> const mix = require('laravel-mix'); mix.setPublicPath('public') mix.setResourceRoot('../'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); @@ -40,7 +43,7 @@ The following dependency entry should now be in your [package.json](https://gith // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.15.3", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. -
karlhillx revised this gist
Nov 17, 2020 . 1 changed file with 11 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -62,4 +62,14 @@ Finally, reference your generated CSS file in your Blade template/layout. <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}"> Happy Mixing! --- ## License Copyright © 2020 [Karl Hill](https://www.github.com/karlhillx/). Provided under the [MIT license](http://opensource.org/licenses/mit-license.php). Whether you use these instructions or have learned something from them, please consider supporting me with a star ⭐ and a follow 🔥. -
karlhillx revised this gist
Nov 14, 2020 . 1 changed file with 9 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,7 +1,15 @@ # Laravel Mix & Font Awesome Setup: Compiling Assets This document provides help on getting your Laravel instance running with the latest versions of [Laravel Mix](https://laravel-mix.com/) and [Font Awesome](https://fontawesome.com/). <table> <tr> <td> <img src="https://camo.githubusercontent.com/ad0a21739b4fb3abda5cc171ac277a8053882135/68747470733a2f2f6c61726176656c2e636f6d2f6173736574732f696d672f636f6d706f6e656e74732f6c6f676f2d6d69782e737667" alt="Laravel Mix"> </td> <td> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Font_Awesome_5_logo_black.svg/1024px-Font_Awesome_5_logo_black.svg.png" width="300" alt="Font Awesome"> </td> </table> ## Steps -
karlhillx revised this gist
Nov 10, 2020 . 1 changed file with 5 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -9,10 +9,15 @@ Before triggering Laravel Mix, make sure that [Node.js and NPM](https://nodejs.o node -v npm -v Install Node dependencies. npm install Next, build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js) configuration. <!-- language: lang-js --> const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); -
karlhillx revised this gist
Nov 10, 2020 . 1 changed file with 9 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,20 +3,25 @@ This document provides help on getting your Laravel instance running with the la  ## Steps Before triggering Laravel Mix, make sure that [Node.js and NPM](https://nodejs.org/en/download/) are installed on your machine. node -v npm -v Next, build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js) configuration. <!-- language: lang-js --> mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); Install the latest free version of [Font Awesome](https://fontawesome.com/) via the npm package manager. npm install @fortawesome/fontawesome-free The following dependency entry should now be in your [package.json](https://github.com/laravel/laravel/blob/master/package.json). <!-- language: lang-json --> -
karlhillx revised this gist
Nov 10, 2020 . 1 changed file with 5 additions and 8 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,9 +3,6 @@ This document provides help on getting your Laravel instance running with the la  ## Steps Build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js) configuration. @@ -14,18 +11,18 @@ Build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpa mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); Install the latest free version of [Font Awesome](https://fontawesome.com/) via a package manager like npm. npm install @fortawesome/fontawesome-free This dependency entry should now be in your [package.json](https://github.com/laravel/laravel/blob/master/package.json). <!-- language: lang-json --> // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.15.1", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. @@ -37,7 +34,7 @@ In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/res @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/brands'; Compile your assets and produce a minified, production-ready build. npm run production -
karlhillx revised this gist
Nov 10, 2020 . 1 changed file with 1 addition and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -4,8 +4,7 @@ This document provides help on getting your Laravel instance running with the la   ## Steps -
karlhillx revised this gist
Nov 10, 2020 . 1 changed file with 4 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,6 +3,10 @@ This document provides help on getting your Laravel instance running with the la  ![Font Awesome] (https://i1.wp.com/blog.fontawesome.com/wp-content/uploads/2020/08/jSfmJLBr.png?resize=720%2C240&ssl=1) ## Steps Build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js) configuration. -
karlhillx revised this gist
May 25, 2020 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,11 +1,11 @@ # Laravel Mix & Font Awesome Setup: Compiling Assets This document provides help on getting your Laravel instance running with the latest versions of [Laravel Mix](https://laravel-mix.com/) and [Font Awesome](https://fontawesome.com/).  ## Steps Build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js) configuration. <!-- language: lang-js --> -
karlhillx revised this gist
May 25, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -22,7 +22,7 @@ This will now be in your [package.json](https://github.com/laravel/laravel/blob/ // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.13.0", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. -
karlhillx revised this gist
Jun 11, 2019 . 1 changed file with 6 additions and 6 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -22,17 +22,17 @@ This will now be in your [package.json](https://github.com/laravel/laravel/blob/ // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.9.0", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. <!-- language: lang-css --> // 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'; Let's compile our assets and produce a minified, production-ready build. -
karlhillx revised this gist
Apr 22, 2019 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -22,7 +22,7 @@ This will now be in your [package.json](https://github.com/laravel/laravel/blob/ // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.8.1", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. @@ -42,6 +42,6 @@ Finally, reference your generated CSS file in your Blade template/layout. <!-- language: lang-html --> <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}"> Happy Mixing! -
karlhillx revised this gist
Mar 20, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -22,7 +22,7 @@ This will now be in your [package.json](https://github.com/laravel/laravel/blob/ // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.8.0", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. -
karlhillx revised this gist
Jan 4, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -22,7 +22,7 @@ This will now be in your [package.json](https://github.com/laravel/laravel/blob/ // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.6.3", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. -
karlhillx revised this gist
Dec 8, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -22,7 +22,7 @@ This will now be in your [package.json](https://github.com/laravel/laravel/blob/ // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.6.0", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. -
karlhillx revised this gist
Dec 7, 2018 . 1 changed file with 4 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -12,19 +12,19 @@ Build your webpack.mix.js configuration. mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); Install [Font Awesome](https://fontawesome.com/). npm install @fortawesome/fontawesome-free This will now be in your [package.json](https://github.com/laravel/laravel/blob/master/package.json). <!-- language: lang-json --> // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.5.0", In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles. <!-- language: lang-css --> @@ -34,7 +34,7 @@ In /resources/sass/app.scss import one or more styles. @import '~@fortawesome/fontawesome-free/scss/solid.scss'; @import '~@fortawesome/fontawesome-free/scss/brands.scss'; Let's compile our assets and produce a minified, production-ready build. npm run production -
karlhillx revised this gist
Dec 7, 2018 . 1 changed file with 3 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,7 +1,10 @@ # Laravel Mix & Font Awesome Setup: Compiling Assets This document provides help on getting your Laravel instance running with the latest versions of Laravel Mix and Font Awesome.  ## Steps Build your webpack.mix.js configuration. <!-- language: lang-js --> -
karlhillx revised this gist
Dec 7, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,4 @@ # Laravel Mix & Font Awesome Setup: Compiling Assets  -
karlhillx revised this gist
Dec 5, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,4 @@ # Laravel Mix + Font Awesome Setup (compiling assets)  -
karlhillx revised this gist
Dec 5, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ # Laravel Font Awesome Setup (compiling assets)  Build your webpack.mix.js configuration. -
karlhillx revised this gist
Dec 5, 2018 . 1 changed file with 5 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,4 @@ # Laravel Font Awesome Setup (compiling assets)  @@ -13,7 +13,7 @@ Install Font Awesome. npm install @fortawesome/fontawesome-free This will now be in your package.json. <!-- language: lang-json --> @@ -39,4 +39,6 @@ Finally, reference your generated CSS file in your Blade template/layout. <!-- language: lang-html --> <link type="text/css" rel="stylesheet" href="{{ asset('css/app.css') }}"> Happy Mixing! -
karlhillx revised this gist
Dec 5, 2018 . No changes.There are no files selected for viewing
-
karlhillx revised this gist
Dec 5, 2018 . 1 changed file with 6 additions and 8 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,29 +1,27 @@ # Laravel and Font Awesome Setup (compiling assets)  Build your webpack.mix.js configuration. <!-- language: lang-js --> mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); Install Font Awesome. npm install @fortawesome/fontawesome-free This should now be in your package.json. <!-- language: lang-json --> // Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.5.0", In /resources/sass/app.scss import one or more styles. <!-- language: lang-css --> @@ -33,7 +31,7 @@ In /resources/sass/app.scss import one or more styles... @import '~@fortawesome/fontawesome-free/scss/solid.scss'; @import '~@fortawesome/fontawesome-free/scss/brands.scss'; Let's compile our assets and produce a production-ready build. npm run production -
karlhillx revised this gist
Nov 23, 2018 . 1 changed file with 1 addition and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,4 @@ # Laravel and Font Awesome Setup (compiling assets)  -
karlhillx revised this gist
Nov 23, 2018 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,10 +1,10 @@ # Want to use Laravel and Font Awesome? *(Regularly updated)* ### Latest Laravel and Font Awesome Setup   Build your webpack.mix.js configuration... -
karlhillx revised this gist
Nov 23, 2018 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ # Want to use Laravel and Font Awesome? *(Regularly updated)* ## Laravel 5.7+ and Font Awesome 5 - Compiling Assets  -
karlhillx revised this gist
Nov 23, 2018 . 1 changed file with 3 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,6 @@ *Want to use Laravel and Font Awesome? (Regularly updated)* **Laravel 5.7+ and Font Awesome 5 - Compiling Assets**  -
karlhillx revised this gist
Nov 23, 2018 . 1 changed file with 1 addition and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,8 +2,7 @@   Build your webpack.mix.js configuration...
NewerOlder