Jika kode html tidak muncul di artikel ini, Anda perlu mengunjungi halaman asli non-AMP di tautan Cara Menggunakan FontAwesome.
Bagi para pengelola website atau blogger pasti sudah tidak asing lagi dengan Font Awesome. Sebagai salah satu framework CSS, font awesome menyediakan berbagai jenis ikon yang dapat Anda gunakan untuk keperluan website. Dari semua website yang ada, baik website lama maupun baru kebanyakan menggunakan font awesome.
Bagi Anda yang tertarik untuk menggunakan font awesome terdapat beberapa langkah yang harus dilakukan. Biasanya langkah-langkah tersebut dilakukan secara online, tapi tidak menutup kemungkinan juga jika ingin dilakukan secara offline. Lalu apa saja langkah-langkah tersebut? Simak jawabannya pada ulasan berikut.
Daftar isi:
Cara Menggunakan Font Awesome Secara Online
Sebelumnya telah disebutkan bahwa font awesome memiliki banyak jenis ikon atau fitur yang dapat Anda gunakan. Cara penggunaan fitur-fitur tersebut akan dijelaskan di bawah ini. Bagi yang belum memiliki aplikasi font awesome dapat mengunduhnya terlebih dahulu kemudian lakukan instalasi pada perangkat Anda.
1. Untuk Menyisipkan dalam HTML
Font awesome dan framework CSS lain pada umumnya sama dalam penggunaannya. Anda harus menyertakan file CSS ke link yang digunakan dalam HTML, lalu panggil nama class-nya.
Contoh:
<link rel="stylesheet"
href="font-awesome/css/font-awesome.min.css" />
Apabila tidak ingin menggunakan hosting dalam font awesome, Anda bisa memanfaatkan CDN. Untuk contohnya yaitu:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome.min.css"/>
2. Untuk Membuat Ikon
Dalam font awesome untuk membuat ikon dapat menggunakan tag <i> disertai kelas fa (merupakan font awesome).
Contoh: jika Anda ingin membuat ikon atau gambar strawberry, maka kodenya sebagai berikut.
<i class="fa fa-strawberry"></i>
3. Untuk Mengubah Ukuran Ikon
Biasanya ukuran dari ikon akan mengikuti ukuran font pada CSS. Tapi, tahukah Anda jika ikon tersebut dapat kita perbesar atau perkecil sesuai dengan kebutuhan. Font awesome telah menyediakan beberapa kelas untuk menentukan ukuran ikon diantaranya adalah fa-lg (33% lebih besar), fa-5x, fa-4x, fa-3x, dan fa-2x.
Contoh kode:
<I class="fa fa-strawberry fa-3x"></i>
4. Untuk Mengubah Warna Ikon
Sama seperti ukuran, warna ikon yang dibuat juga akan mengikuti warna teks elemen. Jadi agar bisa mengubah warna ikon sesuai keinginan, Anda harus mengubah warna teksnya. Jika Anda tidak mengubah teksnya maka ikon yang dihasilkan akan berwarna hitam. Ada sebuah tips untuk mengubah warna ikon menjadi putih yaitu menggunakan fa-inverse.
Contoh: Anda ingin membuat ikon gambar strawberry berwarna merah
<I class="fa fa-strawberry" style="color: red"></i>
5. Untuk Menggabungkan Beberapa Ikon
Terkadang Anda ingin menggabungkan beberapa ikon menjadi satu. Hal ini juga bisa dilakukan menggunakan font awesome. Misalnya Anda ingin menggabungkan ikon circle (○) dengan ikon square (■). Untuk dapat menggabungkan kedua ikon tersebut, Anda memerlukan class elemen fa-stack.
Contoh:
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x fa-inverse"></i>
</span>
Maka hasil yang akan diperoleh adalah sebuah ikon lingkaran di dalam kotak (◙). Penting untuk diingat bahwa yang tertulis terlebih dahulu akan menjadi dasar dalam tumpukan ikon yang dibuat.
6. Untuk Memutar Ikon
Anda juga bisa memutar sebuah ikon menggunakan font awesome. Class yang digunakan pada elemen adalah fa-rotate-* dan fa-flip-*. Untuk lebih jelasnya bisa dilihat pada contoh berikut:
<i class="fa fa-triangle"></i> normal<br>
<i class="fa fa-triangle fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-triangle fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-triangle fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-triangle fa-flip-horizontal"></i> fa- flip-horizontal<br>
<i class="fa fa-triangle fa-flip-vertical"></i> fa- flip-vertical<br>
Maka hasilnya adalah:
▲normal
►fa-rotate-90
▼fa-rotate-180
◄fa-rotate-270
▲fa-flip-horizontal
▼fa-flip-vertical
Keuntungan Menggunakan Font Awesome
1. Gratis
Dengan font awesome Anda bisa memperbaiki tampilan website menjadi lebih menarik tanpa harus mengeluarkan biaya tambahan. Sebab aplikasi ini bebas Anda akses secara gratis.
2. Mudah digunakan
Selain tersedia dalam versi gratis, font awesome juga mudah digunakan. Anda bebas mendesain apapun dengan mudah menggunakan css seperti size, icon color, shadow, dan lain sebagainya.
3. Cocok untuk Retina Display
Ikon dari font awesome merupakan vektor. Hal ini berarti ikon-ikon yang Anda buat melalui font awesome memiliki resolusi tinggi dan tampilan yang sangat baik.
Sebenarnya tidak sulit untuk menggunakan font awesome. Hanya saja untuk menjadi lihai Anda harus tekun dan memperbanyak latihan. Dengan banyak-banyak membaca informasi tentang font awesome dan langsung mengaplikasikannya, lambat laun Anda akan menjadi lihai.
