Cara Menggunakan Font Awesome. – Dalam artikel kali ini kita akan berkenalan, memasang dan Menggunakan Font Awesome. Menurut situs resmi Font Awesome, saat ini sudah ada lebih dari 100,000,000 website yang memakai Font Awesome dalam website mereka. Font Awesome menyediakan banyak sekali ikon – ikon menarik untuk memperindah website kita.
Keuntungan Font Awesome
Font Awesome adalah framework CSS untuk membuat ikon. Dengan menggunakan Font Awesome, kita akan lebih mudah saat ingin membuat ikon menarik. Dan juga karena hanya menggunakan teks akan mempercepat loading website kita. Keuntungan menggunakan Font Awesome adalah:
- Gratis. Sekarang memperbaiki tampilan website akan lebih mudah karena Framework yang satu ini dapat kita gunakan dengan gratis.
- Perfect on Retina Displays, Font Awesome icons adalah vektors, yang berarti itu akan terlihat sangat baik di tampilan dengan resolusi tinggi.
- Penggunaanya mudah, Font Awesome mudah di styling dengan css seperti icon color, size, shadow, dan apapun yang memungkinkan dengan CSS.
Menggunakan Font Awesome pada HTML atau Template
Ada beberapa cara untuk menambahkan Font Awesome, namun agar lebih mudah, kita akan menggunakan CDN. Pastekan code dibawah ini di dalam tag head:
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
Setelah itu pasang ikon kalian inginkan di dalam tag body. Lihat daftar ikon disini.
Contoh penggunaan:
- <i class="fa fa-coffee"></i>
Hasilnya:
Mengubah Ukuran Ikon
Font Awesome mempunyai ukuran default untuk ikon mereka. Namun, kita juga bisa mengubahnya dengan memperbesar atau memperkecil sesuai kebutuhan kita.
Misal, diatas saya menggunakan ikon
Misal, diatas saya menggunakan ikon
Coffee, kita bisa memperbesar nya dengan mengubah class nya menjadi:- <i class="fa fa-coffee fa-5x"></i>
Hasilnya:
- Beberapa browser memliki masalah dengan ikon animasi yang menghasilkan efek bergoyang-goyang.
- Untuk CSS3, animasi belum mensupport pada IE8 – IE9.
Penutup
Update: List ikon bisa dilihat di arc.codelatte.org/cheatsheet
Terima kasih telah mengikuti artikel ini sampai akhir. Sekian artikel tentang Cara Menggunakan Font Awesome, mungkin setelah ini akan saya buat cheatsheet untuk list ikon nya. Apabila masih kurang jelas, silahkan tinggalkan komentar dibawah. Semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.
Sumber : https://codelatte.org
EmoticonEmoticon