Skip to main content

Cara Menampilkan Berbagai Jenis Icon dengan Font Awesome


Saya baru tau ternyata didalam Font Awesome terdapat banyak jenis icon yang salah satunya icon Whatsapp, ya walaupun sedikit terlambat mengetahui ini tapi tak ada salahnya untuk tetap berbagi membagikannya dipostingan ini.

Dengan Font Awesome ini sepertinya kita tidak perlu lagi menuliskan kode gambar hanya untuk menampilkan icon, cukup dengan kode khusus berupa selector class maupun Unicode seperti ini  maka gambar icon akan langsung muncul. Namun tentunya terlebih dulu ikuti beberapa langkah sederhana ini, yaitu:

1. Pertama2 tambahkan Atribut Stylesheet dibawah ini ke atas </head> pada situs atau Template Blog anda.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

2. Selesai, hanya itu. Setelah itu selanjutnya kita bisa menambahkan icon apapun yang diperlukan kedalam Blog maupun postingan. Icon ini lumayan ringan untuk Blog jadi jangan kuatir.

Berikut ini beberapa contoh kode untuk icon Whatsapp yang dapat diterapkan, caranya cukup pilih salah satu saja. Iya cukup pasang apa adanya seperti itu maka otomatis akan menjadi icon yang bisa diatur ukuran besar dan kecilnya serta warna iconnya.

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

<i class="fa fa-whatsapp" style="font-size:24px"></i>

<i class="fa fa-whatsapp" style="font-size:36px"></i>

<i class="fa fa-whatsapp" style="font-size:48px;color:red"></i>

Dengan dipasang ke button: <button style="font-size:24px">Button <i class="fa fa-whatsapp"></i></button>

Dengan metode Unicode: <i style="font-size:24px" class="fa">&#xf232;</i>

Untuk kode icon lain, semisal icon Facebook, Hamburger menu, Panah kanan kiri, Search, dll. Intinya semua icon yang pernah kita lihat di Internet kemungkinan ada disana, klik saja url ini https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css






Selamat mencoba!

Comments