Cara Install Font Awesome di Laravel

Hii dev, ane mau berbagi pengalaman saya integrasi font awesome ke laravel. Hal pertama yang perlu kalian tahu adalah bahwa saya develop laravel ini menggunakan environment Homestead.

Secara default project laravel sudah include bootstrap, akan tetapi ketika saya mencoba menambahkan bootsnip Login page, ada beberapa icon yang tidak tampil, ternyata ada external library font-awesome di headernya. Sebenarnya mudah saja bagi saya menambahkan external tersebut tanpa perlu menanamkannya ke app laravel, akan tetapi performa situs saya akan terganggu jika external source tersebut banyak sekali situs yang memakai, sehingga saya putuskan untuk menanamkannya di app laravel saya (self hosted).

Pertama download dulu vendor font awesome di directory node_modules, caranya;

npm install --save @fortawesome/fontawesome-free

Kemudian import assest font awesome yang kalian kehendaki ke dalam resources/assets/sass/app.scss kamu, contoh seperti ini;

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

Kemudian compile app.scss, caranya;

npm run dev

Perintah diatas tidak akan membuild asset kamu jadi unminified versions (artinya utuh seperti aslinya).

Sementara itu, jika kamu ingin mendeploy app laravel sebagai production, maka untuk mengoptimalkan kinerjanya buatlah asset menjadi versi minified (dicompress), caranya;

npm run production

Sekian & terimakasih.


Post a Comment

Previous Next

نموذج الاتصال