Apa itu Font Awesome.? Bagaimana Cara Membuat dan Memasang Font Awesome di Blogspot.? Font Awesome adalah kerja sama dari kombinasi antara URL Font Awesome BootstrapCDN dan CSS untuk menampilkan huruf, angka, atau simbol yang berbentuk gambar atau ikon tanpa ditakutkan ikon tersebut akan pecah atau buram pada tampilan situs atau blog.
Apa 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 premium.
Dulu, domain Font Awesome beralamatkan https://fontawesome.io Kini telah berubah menjadi https://fontawesome.com
Cara Memasang Font Awesome Pada Blogspot
Apabila kamu tertarik dan ingin menggunakan atau mencoba untuk memasangnya, silakan ikuti beberapa langkah mudah di bawah ini secara seksama dengan hati-hati.
Silahkan 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 dan Paste Tempel tepat di atas kode tag </head> lalu tekan tombol Save Template.
Apabila kamu menggunakan template blogger SEO, biasanya semua URL yang dimaksud akan di gabung atau disatukan menjadi satu dengan Google Fonts. Contohnya seperti kode tag dibawah.
<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, yaitu kode Google Fonts dan Font Awesome yang digabungkan menjadi satu, dipisahkan dengan kode load CSS.
Jika kamu belum paham dunia coding di bagian ini, harap diabaikan saja, jangan digabung. Tapi tempatkan URL BootstrapCDN tersebut di atas kode tag </head> saja.
Untuk cara yang di atas hanya beberapa langkah pertamanya saja, belum termasuk cara membuat atau menggunakannya. Untuk cara menggunakannya, ikuti langkah-langkahnya di bawah ini.
Cara Menggunakan Font Awesome di Blogspot
Pada tahap ini, anggap saja kamu 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, cara pemasangannya seperti ini.
<li><i class='fa fa-home'/> Home</a></li>
Yang dimaksudkan kode Font Awesome ialah dengan cara memanggil dan menggunakan tag seperti ini <i class='fa fa-home'/>
Untuk melihat kode-kode ikon dari Font Awesome lainnya, silakan klik Disini.
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 tag ini. \f36b. Untuk mengetahui berbagai ikonik lainnya bisa lihat Disini.
Attention..!!!
Apabila terjadi error atau ikon Font Awesome yang rusak, tidak muncul atau tidak tampil, biasanya itu bermasalah pada di bagian versi Font Awesome.
Apabila sebelumnya menggunakan versi 4.3.0, silakan diganti dengan versi 4.7.0 karena itu versi terbaru.
Tags
Tutorial