Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog

KINI font awesome telah di upate menjadi versi 4.6.3 terbaru. Informasi ini langsung saya dapatkan melalui laman resmi Font Awesome sendiri. Sebenarnya, font awesome itu apa sih? Pelajari dululah, yuk.

Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog

PENGERTIAN FONT AWESOME

Font awesome adalah kumpulan ikon yang dibuat menggunakan system "Font Icon" yang memungkinkan kita untuk menggunakan icon dengan bantuan CSS tanpa takut icon mengalami perpecahan (buram)...

....bahkan dengan menggunakan font awesome pun kita bisa mempercepat loading blog karena biasanya yang digunakan adalah image atau gambar ikon.

Pertanyaannya adalah bagaimana cara membuat dan memasangkan font awesome di blog? Berikut adalah tutorial cara menggunakan font awesome di blog dengan benar.

Cara Menggunakan Font Awesome di Blog


Untuk membuat, memasangkan dan menggunakan font awesome di blog ini, modal pertama yang wajib kita pasangkan terlebih dahulu adalah menambahkan script Font Awesome di dalam template blogger.

#1. MENAMBAHKAN SCRIPT FONT AWESOME

Font awesome sendiri memiliki banyak versi, ada yang lama dan ada yang terbaru. Yang membedakan yang lama dengan yang baru adalah untuk versi terbaru biasanya ada penambahan ikon-ikon unik dan menarik. Di tutorial kali ini, script yang akan digunakan tentu saja versi terbaru!

1. COPAS kode dibawah ini tepat diatas kode </head>

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

2. Simpan tempate blogger

#2. CARA MENGGUNAKAN FONT AWESOME

Untuk menggunakannya sendiri sangat mudah. Namun, ada beberapa lokasi yang wajib diperhatikan. Apakah logo atau ikon akan dipasangkan di navigasi menu? Atau di dalam artikel atau posting blog? DI sidebar (disamping) blog? Jadi, yang perlu dilakukan adalah penyesuaian tempatnya saja.

Kalau untuk pemasangan di navigasi menu, saya sendiri menggunakan kode ini:

<li><a class='home' href='/'><span class='icon-home'>Home</span></a></li>

Terlihat jelas bahwa ada tulisan "icon-home" yang memberikan perintah bahwa script home harus ditampilkan. Untuk beberapa metode lainnya, coba lihat gambar dibawah ini.

Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog
Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog

FONT AWESOME TIDAK BEKERJA / TIDAK AKTIF

Dalam beberapa kasus yang dialami oleh blogger lainnya, terjadi permasalahan bahwa font awesome tidak bekerja atau tidak aktif jika diterapkan di blognya.

Padahal, permasalahan ini sudah dijelaskan oleh pihak Font Awesome sendiri pada desember 2014 lalu bahwa memang terjadi perubahan terhadap penggunaan Font Awesome untuk versi terbaru.

Untuk mengatasi masalah script Font Awesome yang tidak berfungsi, COPAS kode dibawah ini di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Lato:400,700");loadCSS("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
//]]>
</script>

Info: Script diatas adalah script asynchronous css Font Awesome.

Sebagai tambahan, perubahan dari kode HTML terbaru diatas pun, secara tidak langsung telah mengatasi masalah Render-Blocking JavaScript, dan bahkan kita juga telah mempercepat loading blog menurut Google: PageSpeed Insight.

Sumber:

http://fontawesome.io/examples/
http://www.gotknowhow.com/articles/how-to-asynchronously-load-font-awesome-css-file


Kalau ada kesalahan dalam penulisan, mohon bimbingannya. Masih pemula yang terus berusaha berjuang menuntut ilmu blogging! Hihihi... Good luck & happy blogging!

0 Response to "Pengertian Font Awesome dan Cara Menggunakan Font Awesome di Blog"

Post a Comment

Komentar spam & link aktif akan dihapus. Centang OK pada "notify me" agar komentar balasan saya masuk ke email Anda.