Ditulis oleh: Ditulis pada: 11/17/2014
Penggunaan Font Awesome Terbaru Versi 4.2.0 - Seperti kita ketahui bahwa Font Awesome adalah kumpulan ikon dengan basis font yang bisa kita gunakan untuk menggantikan gambar dalam menampilkan ikon di blog sehingga bisa mengurangi loading blog.
Sebenarnya kita masih bisa menggunakan gambar untuk menampilkan icon di blog dengan menggunakan css sprite untuk mengurangi loading blog. Namun tentunya kita harus membuat gambar kumpulan beberapa icon yang kita perlukan terlebih dahulu dan tentunya ini memerlukan keahlian khusus untuk mengolah gambar. Begitu pun untuk css style-nya memiliki pengaturan untuk bisa menampilkan ikon yang dimaksud. Cukup repot bukan?
Nah dengan Font Awesome hal tersebut bisa kita lakukan dengan mudah tanpa harus repot-repot membuat dan menggabungkan ikon. Hanya meng-copy paste kode html ikon, maka dengan mudah kita bisa membuat berbagai ikon di blog.
Dan kini Font Awesome telah di-upgrade ke versi terbaru 4.2.0 dengan 479 macam ikon yang ada di dalamnya. BootstrapCDN-nya pun berbeda dari versi sebelumnya yang asalnya menggunakan Netdna diganti dengan MaxCDN. Biar pun versi terbaru ini memiliki lebih banyak ikon, tapi ukuran filenya tetap sama dengan versi sebelumnya yaitu sekitar 22 KB sehingga tidak perlu khawatir akan memiliki loading yang lebih berat.
Nah kali ini saya akan sharing cara menggunakan dan mendapatkan Font Awesome langsung dari websitenya.
Font Awesome: http://fortawesome.github.io/Font-Awesome/
Silahkan masuk ke websitenya dengan url di atas. Kemudian klik menu Get Started, dan copy script font-awesome.min.css yang disediakan di sana seperti pada gambar di bawah ini.
Silahkan simpan script tersebut di atas kode
</head> dan tambahkan kode / di belakang kode rel="stylesheet" agar bisa save template seperti di bawah ini.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
Untuk mendapatkan kode ikon, silahkan masuk ke menu Icons dan silahkan pilih ikon yan diinginkan kemudian klik ikon tersebut untuk menuju ke halaman kode ikon. Dan silahkan copy kode yang diberikan pada halaman tersebut.
Untuk kode ikon pada versi terbaru berbeda dengan versi sebelumnya. Pada versi sebelumnya versi 3.2.1 menggunakan kode berikut untuk menampilkan kode:
<i class="icon-iconname"></i>
Sedangkan pada versi terbaru versi 4.2.0 menggunakan kode seperti berikut:
<i class="fa fa-iconname"></i>
Untuk cara penerapan dan pengaturan lainnya seperti memperbesar ikon, membuat rata penempatan ikon, ikon berputar dan lainnya silahkan masuk ke menu Examples. Di halaman tersebut cukup komplit cara pemasangan ikonnya.