Cara menampilkan berbagai jenis icon dengan Font Awesome

DAFTAR ISIBUKATUTUP

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.

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.

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"></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!

Cari icon favorit dari ribuan koleksi, SVG, PNG, DLL, Gratis!

Dalam memodifikasi Template Blogger atau kebutuhan lain akan icon dengan format keinginan kita seperti svg, png, maupun unicode, bisa kita dapatkan dengan mencarinya di situs www.iconmonstr.com dengan 4512+ icon gratis saat ini dari 316 koleksi mereka, misal ingin icon whatsapp maka ketik saja pada kotak pencariannya, jika ada akan langsung muncul berbagai pilihan model dan bentuk tebal/tipis terang/gelap lalu pilih salah satu kemudian memilih format yang diinginkan dan selanjutnya conteng izin lalu download atau salin kode embednya untuk di pasang di blog/situs kita.

Hanya saja jaman sekarang dimana kecepatan blog/situs menjadi prioritas utama, mungkin format png sudah jarang dipakai begitu juga font-awesome karena pemasangannya memakai javascript/stylesheet yang sedikit banyaknya akan menambah beban loading blog karena menggunakan tautan external dari luar situs/blog kita namun meski begitu font-awesome memang masih paling sering digunakan. Font-awesome versi terbaru baca di Cara Menampilkan Berbagai Jenis Icon dengan Font Awesome

Namun satu2nya pilihan jika ingin pakai icon ringan adalah memilih format svg yang juga tersedia di situs iconmonster tersebut, selain itu svg ini juga merupakan rekomendasi dari situs w3school untuk digunakan karena selain ringan juga kualitasnya tetap bagus di tampilan layar apapun dan dapat diubah2 warna dan ukurannya melalui css sesuai selera kita.

Contoh, ini svg icon hamburger/menu.

Nah tuh class='hamburger-menu'. Tinggal bikin aja css nya seperti berikut, misal.

.hamburger-menu{

fill:merah;

margin:0;

padding:0

}

"Fill" warna untuk iconnya, bisa diganti jadi biru dll.

Untuk icon svg sosial media, seperti facebook, whatsapp, twitter, dll ada di postingan ini Cara Membuat Tombol Share Sosial Media