Pengertian FontAwesome dan Cara Menggunakan Font Awesome di Blog

Share:

FB Google+ Twitter

Pengertian FontAwesome dan Cara Menggunakan Font Awesome di Blog
Bagaimana cara pasang dan menggunakan FontAwesome di blogger blogspot? Apa sih FontAwesome itu?

FontAwesome adalah kumpulan ikon (icon) yang dibuat menggunakan "Font-Icon System" yang memungkinkan kita untuk menggunakan ikon dengan bantuan CSS tanpa takut ikon pecah atau buram.

Bahkan dengan menggunakan FontAwesome, itu jauh lebih baik dari pada menggunakan gambar (image) atau gambar2 tertentu yang menyerupai ikon. Menggunakan FontAwesome jauh lebih Fast-Loading ketimbang memasang gambar ikon.

Menurut Wikipedia Font-Awesome:

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it second place after Google Fonts.

Singkatnya FontAwesome ialah gambar2 vector yang bisa berubah ukuran berdasarkan body-font dari suatu template blogger atau font-nya sendiri.

Ketika artikel ini ditulis, FontAwesome masih dalam versi 4.6.3. Kini FontAwesome sudah mengalami pengembangan yang cukup keren yakni pada versi FontAwesome 4.7.0. Wohooo tentunya banyak penambahan ikon-ikon terbaru dan lebih unik!

SEOKLR sendiri pun gak mau kalah sama blog2 keren lainnya, buktinya tuhhh di navigasi menu hehehe...

Pengertian FontAwesome dan Cara Menggunakan Font Awesome di Blog

Di dalam template juga sudah dinaikkan versinya yang awalnya 4.6.3 menjadi 4.7.0. Wohooo makin greget, mastah. Banyak icon font-awesome terbaru pada versi kali ini...

Cara Menggunakan, Membuat dan Memasang FontAwesome di Blog



Diatas itu untuk pengertian dan definisi FontAwesome. Selanjutnya tentang bagaimana cara pasang dan membuat FontAwesome di blogger blogspot.

Caranya sangat mudah! Gampang banget. Ngopi dulu seteguk :)

1. Copas kode dibawah ini, tempatkan diatas kode </head>

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

2. Save Template Blogger

Okehhh sampai disini kode FontAwesome sudah terpasang di dalam template blog.

Untuk cara menggunakan Font Awesome relatif. Kalau pemula mungkin bingung. Tapi ingatttt.... Penggunaan FontAwesome berdasarkan lokasinya.

Ada yang pasang di sidebar, footer, navigasi menu, post body dan masih banyak lagi. Namun diantara semua, menurut saya yang paling mudah adalah di Navigasi Menu.

Jika kode awal di template seperti ini:

<li><a href='/search/label/SEO%20Blogger''>SEO Blogger</a></li>

Maka sisipkan kode ini:

<i class='fa fa-line-chart'/>

Sehingga menjadi:

<li><a href='/search/label/SEO%20Blogger''><i class='fa fa-line-chart'/> SEO Blogger</a></li>

Diatas itu tutorial untuk cara pasang logo icon di navigasi menu template blogger. Bagaimana dengan cara pasang FontAwesome di widget sidebar blog?

Caranya hampir sama kok. Yang penting itu kita sisipkan kode I-Class tersebut.

Sebenarnya ada begitu banyak ikon ikonik yang bisa kita pasangkan di dalam tempate. Bukan cuma kode ikon fafa line chart, tapi ada ratusan ikon ikonik yang bisa ditambahkan.

Penyebab FontAwesome tidak Bekerja / tidak Aktif

Beberapa template tidak mendukung FontAwesome, kadang ikon2 dari FontAwesome rusak atau tidak tampil (muncul).

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

Untuk mengatasinya, cari kode yang hampir mirip seperti dibawah ini:

<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>

Pada angka 4.6.3 yang saya merahi, ubah versi tersebut menjadi yang terbaru.

Untuk mengecek FontAwesome versi terbaru, silahkan kunjungi laman resminya. Di halaman Homepage memang sudah tertulis versi terbarunya.

Ubah angka tersebut menjadi versi yang terbaru. Cukup mengubah angkanya saja, tidak perlu begini-begono lagi.

Nah kalau misalkan kode diatas tidak ditemukan di dalam template, itu artinya agan harus harus mencari sendiri di dalam template.

Kodenya kurang lebih seperti diatas yang telah saya ketik:

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

Bingung cara mencarinya? Cari saja dengan cara CTRL dan F untuk "maxcdn.bootstrapcdn.com", "maxcdn", atau "bootstrapcdn". Ya pastikan kodenya hampir2 mirip.

Ubah yang ditanda pagar merah tersebut dengan angka versi terbaru FontAwesome.

Mungkin hanya itu saja. Apabila ada yang tidak dimengerti, silahkan bertanya sepuas2nya pada kolom komentar yang telah disediakan secara free alias gratis; tak dipungut biaya sepeserpun ^^ Gudlak.

Blogger pemula (/Newbie-Class) - Menulis semaunya & semampunya karena ingin berarti bagi banyak orang. Gaspol!

Labels: Desain Blogger, Tips Blogging

Thanks for reading Pengertian FontAwesome dan Cara Menggunakan Font Awesome di Blog. Jika dirasa berguna, silahkan share ke sosial media.

Share:

FB Google+ Twitter

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

Post a Comment

If you find any errors in this article, please comment.