andriajah Tue Apr 2022 1 year ago

Cara Install Font Awesome Icons di Laravel 9

Posting ini akan memberi Anda contoh laravel 9 menginstal contoh icon icon mengagumkan. Anda dapat memahami konsep cara menginstal icon font awesome di laravel 9. itu contoh sederhana untuk menginstal contoh icon font awesome. mari kita bahas tentang cara menginstal contoh icon font awesome.

Di sini, saya akan menunjukkan cara kerja menginstal font awesome di laravel. kami akan membantu Anda memberikan contoh cara menggunakan icon font awesome di laravel. Kami akan menggunakan laravel mix add font awesome. kami akan membantu Anda untuk memberikan contoh cara menginstal font awesome di laravel.

Dalam contoh ini, saya akan menunjukkan kepada Anda langkah demi langkah cara memasang icon font awesome di laravel. saya akan memberi Anda dua contoh menginstal font awesome di laravel. satu akan menggunakan perintah npm menggunakan laravel mix dan contoh lain akan menggunakan cdn js.

 

Anda dapat dengan mudah menggunakan ikon font awesome di versi laravel 8 dan laravel 9. jadi mari kita lihat di bawah langkah menjadi langkah proses.

 

Langkah 1: Install Menggunakan Npm

pertama, kita akan menginstal versi laravel baru. jadi mari kita jalankan perintah di bawah ini:

composer create-project --prefer-dist laravel/laravel blog

Sekarang, kita perlu menginstal npm di aplikasi laravel baru kita. jadi mari kita jalankan perintah di bawah ini. perintah ini akan membuat folder "mode_modules" di direktori root Anda dan menyimpan semua modul npm di sana.

npm install

Setelah itu kita perlu menginstal library font awesome menggunakan perintah npm di bawah ini. jadi mari kita jalankan perintah di bawah ini:

npm install font-awesome --save

Setelah berhasil menginstal, kita perlu mengimpor font awesome css pada file app.scss. jadi mari kita impor seperti di bawah ini:

resources/sass/app.scss

@import "node_modules/font-awesome/scss/font-awesome.scss";

Sekarang kita siap untuk menjalankan perintah npm dev, jadi mari kita jalankan perintah di bawah ini:

npm run dev

Di sini, kita akan menggunakan file app.css yang dihasilkan di file blade kita seperti di bawah ini:

 

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Font Awesome In Laravel? - Medikre.com</title>
    <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
    <style type="text/css">
        i{
            font-size: 50px !important;
            padding: 10px;
        }
    </style>
</head>
<body>
   <h1>How To Use Font Awesome In Laravel? - Medikre.com</h1>
   <i class="fa fa-copy"></i>
   <i class="fa fa-save"></i>
   <i class="fa fa-trash"></i>
   <i class="fa fa-home"></i>
</body>
</html>

Sekarang Anda dapat menjalankan aplikasi Anda dan melihat di halaman home.

 

Langkah 2: Install Menggunakan CDNJS

di sini, kita akan menggunakan file cdn js untuk menambahkan icon font aweseome, jadi mari kita lihat kode file di bawah ini:

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Font Awesome In Laravel 9? - Medikre.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/fontawesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" />
    <style type="text/css">
        i{
            font-size: 50px !important;
            padding: 10px;
        }
    </style>
</head>
<body>
   <h1>How To Use Font Awesome In Laravel? - Medikre.com</h1>
   <i class="fa fa-copy"></i>
   <i class="fa fa-save"></i>
   <i class="fa fa-trash"></i>
   <i class="fa fa-home"></i>
</body>
</html>

Saya harap dapat membantu Anda...

laravel laravel 9 install font aweseome in laravel 9