Pengertian Font Awesome & Cara Memasangnya di Blogspot

Apa itu Font Awesome? Bagaimana Cara Membuat dan Memasang Font Awesome di Blogspot/Blogger?

Font Awesome adalah kerja sama (kombinasi) antara URL Font Awesome BootstrapCDN dan CSS untuk menampilkan huruf, angka, atau simbol berbentuk gambar/ikon tanpa takut ikon tersebut akan pecah atau buram pada tampilan situs.

Dalam sejarahnya, Font Awesome pertama kali diciptakan pada tanggal 21 Agustus 2012, dan Januari 2018 lalu melakukan Pelepasan Stabil.

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

Saat ini Font Awesome hadir dengan tampilan situs yang berbeda dengan URL yang berbeda pula. Kini, Font Awesome tersedia secara Fremium.

Dulunya, domain Font Awesome beralamatkan https://fontawesome.io. Kini, berubah menjadi https://fontawesome.com.

Cara Memasang Font Awesome di Blogspot

Apabila sobat tertarik ingin menggunakan atau mencobanya, silakan ikuti beberapa langkah mudah di bawah ini secara seksama dan hati-hati.

Copy atau Salin URL BootstrapCDN di bawah ini:

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

Simpan (Paste/Tempel) TEPAT di atas kode </head> lalu tekan tombol Save Template.

Apabila sobat menggunakan template blogger SEO, biasanya semua URL yang dimaksud akan di gabung atau disatukan menjadi SATU dengan Google Fonts. Contohnya seperti 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=Oswald");loadCSS("https://fonts.googleapis.com/css?family=Roboto");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
//]]>
</script>

Lihat kode di atas! Kode Google Fonts dan Font Awesome disatukan menjadi SATU, dipisahkan dengan kode loadCSS.

Jika sobat belum paham dunia Coding di bagian ini, harap diabaikan, -- jangan digabung. Tapi tempatkan URL BootstrapCDN tersebut di atas kode </head> saja.

Nah, di atas hanya beberapa langkah pertamanya saja; belum termasuk cara membuat atau menggunakannya. Untuk cara menggunakannya, ikuti langkah-langkahnya di bawah ini.

Cara Membuat dan Menggunakan Font Awesome di Blogspot

Pada tahap ini, sobat di anggap sudah melakukan langkah-langkah dasar memasang Font Awesome yang telah dipaparkan di atas.

1. Bagian Navigasi Menu

Apabila pemasangan Font Awesome ditempatkan di bagian Navigasi Menu, coba perhatikan koding Navigasi Menu-nya bagaimana. Biasanya, pemasangannya seperti ini:

<li><i class='fa fa-home'/> HOME</a></li>

Yang dimaksudkan kode Font Awesome ialah kode ini: <i class='fa fa-home'/>.

Untuk mengecek kode-kode ikon Font Awesome lainnya, silakan klik disini: Font Awesome Icons versi Terbaru atau Font Awesome versi Lama.

2. Bagian Sidebar-Wrapper Template Blogger

Kalau target pemasangannya ditempatkan di bagian Sidebar-Wrapper, coba gunakan kode di bawah ini:

.sidebar h2:before {content: "\f36b"; font-family: FontAwesome; color:#323232; padding-right: 0.3em; left: 0; text-decoration: inherit}

Yang dimaksud kode Font Awesome ialah kode ini: \f36b. Untuk mengetahui berbagai ikonik lainnya, bisa masuk disini: Font Awesome Icons.

Attention!!! Apabila terjadi error atau ikon Font Awesome yang rusak, tidak muncul atau tidak tampil; biasanya bermasalah di bagian versi Font Awesome.

Apabila sebelumnya menggunakan versi 4.3.0, silakan diganti dengan versi 4.7.0 karena itu versi terbaru. Itulah pengertian Font Awesome dan cara menggunakan Font Awesome di Blogspot/Blogger.*