Cara Memasang dan Menggunakan Font Awesome Untuk Membuat Ikon di Blog

1. Pengenalan

Font Awesome adalah framework CSS yang berfungsi untuk membuat ikon atau simbol. Keberadaannya saat ini sangat membantu banyak web developer karena mereka tidak perlu pusing untuk membuat ikon sendiri. Cukup dengan memanggil Font Awesome ke dalam website, berbagai jenis ikon keren bisa langsung dipakai tanpa perlu ribet membuatnya secara manual seperti dulu. Meski namanya mengandung kata ‘font’ tidak berarti Font Awesome menghasilkan text seperti Google Font ya.

2. Kelebihan

Keunggulan Font Awesome ini banyak sekali, diantaranya:

1. Gratis. Font Awesome bebas digunakan oleh siapapun untuk kebutuhan apapun.
2. Mempunyai ratusan ikon keren yang cocok digunakan untuk blog pribadi sampai website profesional.
3. Dapat bekerja dengan semua jenis framework CSS lainnya seperti Bootstrap.
4. Compatible di banyak jenis browser.
5. Dokumentasi sangat lengkap.
6. Proses instalasi mudah dan tidak membutuhkan Javascript tambahan lainnya.
7. Penggunaannya pun mudah, cukup menambahkan nama ikon pada class HTML atau unicode pada CSS pseudo-elements. Akan dijelaskan lebih lanjut di bawah.
8. Ringan dan tidak memberatkan loading blog.

3. Cara Install

Kamu sudah tahu apa saja kelebihan dari Font Awesome, maka sekarang saatnya untuk mencoba memasang ikon keren ini untuk mempercantik tampilan blog.

1. Buka website resminya yang beralamat di:

   https://fontawesome.com

2. Pilihlah layanan gratis dengan klik tombol Start Using Free
   

   

3. Kamu bisa memilih versi yang ingin digunakan. Saran saya pilihlah versi terbaru agar tampilan ikonnya pun lebih update. Copy kode yang muncul untuk nantinya disimpan ke dalam blog.
   

   

4. Kemudian buka akun Blogger dan pergi ke pengaturan HTML template. Simpan kode yang sudah di dapatkan pada langkah sebelumnya DI ATAS </head>.
   

   

5. Sampai disini proses instalasi selesai. Lihat kan seberapa gampangnya proses pemasangan ini berjalan. Sekarang saatnya mencoba menggunakan Font Awesome di blog.

4. Cara Pakai

Ada dua cara yang digunakan untuk memakai dan menampilkan Font Awesome di website maupun blog, yaitu melalui tag HTML atau ditulis dalam format unicode pada CSS. Kamu hanya perlu memanggil nama class atau unicode dari ikon yang diinginkan, maka dari itu kamu harus tahu dulu nama class dan unicode yang harus ditulis.

Untuk mengetahui semua list dan daftar lengkapnya, buka alamat berikut:

https://fontawesome.com/icons

Cari ikon yang diinginkan dengan mengetik namanya di kotak yang tersedia.

Setelah ketemu, klik ikonnya dan kamu akan dibawa ke sebuah halaman baru. Perhatikan info di atas ikon. Di kanan adalah nama class untuk HTML, sementara yang kiri adalah unicode untuk CSS. Kode inilah yang harus kamu tuliskan.

Bagaimana cara menggunakannya melalui HTML dan CSS? Kita akan bahas satu per satu.

4.1. Melalui HTML

Cara untuk memasang ikon Font Awesome melalui HTML adalah dengan menuliskannya ke dalam tag berjenis inline seperti <i> dan <span>. Hampir sebagian besar lebih memilih menggunakan <i>, di websitenya pun dicontohkan menggunakan <i>, jadi kita pun akan memakai tag tersebut (berhubung penulisannya lebih pendek juga sih).

Berdasarkan penjelasan di atas, maka yang harus kamu lakukan adalah menuliskan tag HTML <i> dan menambahkan nama class dari ikon ke dalamnya. Dimana nama class ini berawalan fas (dulu menggunakan fa namun dimatikan dalam Font Awesome versi 5). Contohnya seperti ini:

<i class="fas fa-laptop"></i>

Saya menuliskan class yang bernama fas fa-laptop ke dalam tag HTML <i>. Kode di atas akan memanggil ikon laptop seperti ini:

<i class="fas fa-laptop fa-2x"></i>
<i class="fas fa-laptop fa-3x"></i>
<i class="fas fa-laptop fa-5x"></i>
<i class="fas fa-laptop fa-7x"></i>

<i class="fas fa-laptop" style="font-size:60px;"></i>

<i class="fas fa-laptop" style="font-size:60px; color:#ff0000"></i>

.quote:before {
content: "f109";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
display: inline-block;
margin-right: 3px;
}