Penggunaan Font Awesome Terbaru Versi 4.2.0

Penggunaan Font Awesome Terbaru Versi 4.2.0 - Seperti kita ketahui bahwa Font Awesome adalah kumpulan ikon dengan basis font yang dapat kita gunakan untuk menggantikan gambar dalam menampilkan ikon di blog sehingga dapat mengurangi loading blog.

Sebenarnya kita masih dapat memakai gambar untuk menampilkan icon di blog dengan memakai css sprite untuk mengurangi loading blog. Namun tentunya kita harus menciptakan gambar kumpulan beberapa icon yang kita perlukan terlebih dahulu dan tentunya ini memerlukan keahlian khusus untuk mengolah gambar. Begitu pun untuk css style-nya mempunyai pengaturan untuk dapat menampilkan ikon yang dimaksud. Cukup repot bukan?

Nah dengan Font Awesome hal tersebut dapat kita lakukan dengan gampang tanpa harus repot-repot menciptakan dan menggabungkan ikon. Hanya meng-copy paste aba-aba html ikon, maka dengan gampang kita dapat menciptakan banyak sekali ikon di blog.

Dan sekarang 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 memakai Netdna diganti dengan MaxCDN. Biar pun versi terbaru ini mempunyai lebih banyak ikon, tapi ukuran filenya tetap sama dengan versi sebelumnya yaitu sekitar 22 KB sehingga tidak perlu khawatir akan mempunyai loading yang lebih berat.

Nah kali ini saya akan sharing cara memakai dan mendapat Font Awesome eksklusif dari websitenya.

Font Awesome: http://fortawesome.github.io/Font-Awesome/

Silahkan masuk ke websitenya dengan url di atas. Kemudian klik hidangan Get Started, dan copy script font-awesome.min.css yang disediakan di sana ibarat pada gambar di bawah ini.

Silahkan simpan script tersebut di atas aba-aba </head> dan tambahkan aba-aba / di belakang kode rel="stylesheet" biar dapat save template ibarat di bawah ini.

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

Untuk mendapat aba-aba ikon, silahkan masuk ke hidangan Icons dan silahkan pilih ikon yan diinginkan lalu klik ikon tersebut untuk menuju ke halaman aba-aba ikon. Dan silahkan copy aba-aba yang diberikan pada halaman tersebut.

Untuk aba-aba ikon pada versi terbaru berbeda dengan versi sebelumnya. Pada versi sebelumnya versi 3.2.1 memakai aba-aba berikut untuk menampilkan kode:

 <i class="icon-iconname"></i>

Sedangkan pada versi terbaru versi 4.2.0 memakai aba-aba ibarat berikut:

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

Untuk cara penerapan dan pengaturan lainnya ibarat memperbesar ikon, menciptakan rata penempatan ikon, ikon berputar dan lainnya silahkan masuk ke hidangan Examples. Di halaman tersebut cukup komplit cara pemasangan ikonnya.

Sumber https://www.kompiajaib.com/

Share this post