Cara Memasang Font Awesome di Blog

Pernah dengar apa itu Font Awesome? Bagaimana cara membuat, menambahkan, atau menampilkan Font Awesome di blogger.com?

Pengertian Font Awesome adalah sekumpulan font dan ikon yang berbasis pada CSS dan Less, yang dibuat oleh Dave Gandy untuk digunakan dengan Bootstrap, untuk selanjutnya dibundel ke BootstrapCDN.

Yang menariknya ialah Font Awesome memiliki 38% pangsa pasar di antara situs web yang menggunakan script font pihak ketiga pada platform mereka, yang membuat Font Awesome menduduki peringkat kedua setelah Google Fonts.

Pada intinya, tujuan dan manfaat dipasangnya Font Awesome pada sebuah blog adalah untuk menampilkan angka, huruf, atau simbol yang berbentuk gambar atau ikon tanpa takut gambar/ikon tersebut akan pecah atau buram pada tampilan web blog.

Adanya script Font Awesome juga mengantisipasi atau menghindari lambatnya loading blog karena gambar atau ikon yang ditambahkan pada blog, memang benar-benar sebuah gambar atau ikon yang bukan berasal dari Font Awesome.

Bagi yang penasaran, kalian boleh banget untuk baca sejarahnya di sini: Font Awesome Wikipedia.

Cara Menambahkan Font Awesome di Blog

1. Pada langkah pertama, simpan BootstrapCDN di bawah ini, tepat 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("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
//]]>
</script>

2. Simpan perubahan template blogger. Ok, sampai di sini sudah selesai tahap pertamanya.

Di sinilah rumitnya, tentang bagaimana caranya memasang Font Awesome di blog serta mempelajari cara kerjanya.

Jika ingin ditambahkan di bagian navigasi menu, silakan terapkan kodenya seperti ini:

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

Kode <i class='fa fa-home'/> inilah yang nantinya berfungsi menampilkan logo, ikon, atau gambar berupa rumah; sekaligus mewakili nama navigasi menu di atas yakni Home (beranda).

Selanjutnya...

Jika di atas merupakan cara menampilkan ikon Font Awesome di bagian navigasi menu; bagaimana kalau logo, ikon, atau gambar Font Awesome ditampilkan di bagian samping (sidebar) blog?

Sebelumnya, pastikan dulu bagaimana kode CSS yang ada di template blogger yang kalian gunakan. Biasanya diawali dengan kode #sidebar h2 atau .sidebar h2. Jika sesuai, silakan salin (copy) kode di bawah ini dan tempelkan (paste) setelah kode .sidebar h2 atau #sidebar h2:

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

Kode content: "\f36b"; inilah yang nantinya menampilkan logo, ikon, atau gambar.

Biar lebih meyakinkan agar tidak kebingungan, kurang lebih hasilnya akan tampak seperti di bawah ini, yang terpasang di blog lama saya:

#sidebar h2 {overflow: hidden; position: relative; font-family: Oswald; font-size: 18px; font-weight: 400;padding: 14px 15px 10px 65px; margin: 0; border-top: 1px solid rgba(0,0,0,0.12); border-left: 1px solid rgba(0,0,0,0.12); border-right:1px solid rgba(0,0,0,0.12);text-transform: uppercase; display:block; transition: all .3s ease-out}
.sidebar h3 {overflow: hidden; position: relative; font-family: Oswald; font-size: 18px; font-weight: 400;padding: 13px 15px 12px 10px; margin: 0; border-top: 1px solid rgba(0,0,0,0.12); border-left: 1px solid rgba(0,0,0,0.12); border-right:1px solid rgba(0,0,0,0.12);text-transform: uppercase; display:block; transition: all .3s ease-out}
#sidebar h2:before {background: #fdfdfd; content: '\f1d9'; font-family: fontawesome; position: absolute; left: 0; top: 0; display: inline-block; padding: 13px 18px; border-right: 1px solid rgba(0,0,0,0.12); line-height: normal}

Pada beberapa contoh pemasangan Font Awesome, saya telah menandai kode ikon atau logo yang dimaksud seperti <i class='fa fa-home'/>, content: "\f36b";, dan content: '\f1d9';.

Kode logo, ikon, atau gambar dari Font Awesome tersebut bisa kalian temukan dan dapatkan secara gratis di Font Awesome 4.7.0.

Sekarang, Font Awesome sudah diupgrade ke versi terbaru yakni versi 6.5.2. Saya sendiri belum mencoba dan masih tidak tahu bagaimana caranya. Apakah mengubah kode versi script di atas yang awalnya:

<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("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
//]]>
</script>

Diubah menjadi ke versi 6.5.2 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("//netdna.bootstrapcdn.com/font-awesome/6.5.2/css/font-awesome.min.css")
//]]>
</script>

Entah, saya belum mencobanya. Terlepas sudah dikembangkan ke versi terbarunya yakni 6.5.2, versi ke 4.7.0 masih bekerja dengan baik, kok. Selamat mencoba!

Labels: Blogger,

Kalian baru saja membaca artikel Cara Memasang Font Awesome di Blog. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.