Cara Menggunakan Font Awesome Pada Website

Cara Menggunakan Font Awesome Pada Website

Font Awesome adalah adalah library ikon yang digunakan untuk menampilkan ikon kedalam website.

Font Awesome sudah banyak digunakan oleh banyak developer web didunia, karena memang kemudahan dan kecepatan dari font awesome memang menguntungkan.

Saat ini Font Awesome sudah memiliki lebih dari 1500 ikon gratis, dan 7000 ikon berbayar.

Kita juga dapat menggunakan font awesome secara online maupun offline. Saya akan menjelaskan keduanya.

Langsung saja berikut caranya.

Memasang Font Awesome

Oke cara yang pertama adalah menggunakanya secara online. Yaitu dengan menggunakan CDN.

Pertama buka https://cdnjs.com/libraries/font-awesome

Pilih versi dan tipe dari Font Awesome, disini saya menggunakan yang all.min.css

Lalu salin kode tersebut atau klik button copy di sisih kanan.

Font Awesome CDN

Atau salin kode berikut

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

Lalu kita taruh kode berikut ke dalam tag link didalam tag head

<head>
 <title>Font Awesome</title>
 <meta charset=utf-8>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>

Menggunakan Ikon

Untuk menggunakanya kita menggunakan tag i, lalu diberi fa dan nama ikonnya.

<i class="fa fa-cat"></i>

Contoh.

<!doctype html>
<html>
<head>
 <title>Font Awesome</title>
 <meta charset=utf-8>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>
 <i class="fa fa-cat"></i>
</body>
</html>

Hasilnya.

Font Awesome Cat

Untuk mengetahui nama ikonya silahkan buka https://fontawesome.com/icons.

Font Awesome Icon

Merubah Ukuran Icon

Anda juga dapat merubah ukuran icon. Ada beberapa ukuran pada yaitu.

  • xs
  • sm
  • lg
  • 2x, 3x, sampai 10x

Cara menggunakanya yaitu dengan menambahkan fa-ukuran dibelakang nama icon. Contoh

<i class="fa fa-camera fa-2x"></i>

Hasilnya

Ukuran Icon

Memberi Warna Icon

Untuk memberikan warna pada icon, kita dapat memberi style css pada icon tersebut. Contoh.

<i style="color:red" class="fa fa-camera fa-2x"></i>

Hasilnya

Warna Icon

Memutar Icon

Untuk memutar icon, kita menggunakan fa-rotate-derajat.

<i class="fa fa-camera fa-rotate-90"></i>

Hasilnya

Memutar Icon

Masih ada fitur lainya seperti memberi animasi, menggunakan icon pada list, dll. Untuk itu silahkan kalian baca dokumentasinya di Dokumentasi

Sekian postingan saya, semoga bermanfaat.

Related Post

Comments

X