Cara Terbaru Menggunakan Font Awesome V5 di Blogger

mfaqih.com - Font Awesome merupakan salah satu dari sekian banyak toolkit ikon dan font berbasis CSS dan LESS yang banyak digunakan dalam website-website terkenal. Awalnya Font Awesome dibuat oleh Dave Gandy untuk digunakan di Social Media Twitter Bootstrap, yang kemudian dimasukan ke BootstrapCDN. Font Awesome memiliki pangsa pasar sebesar 20% diantara situs-situs web yang menggunakan skrip font pihak ketiga pada platform mereka, membuat font tersebut berada di urutan kedua setelah Google Font.

Di kalangan blogger sendiri, penggunaan Font Awesome juga banyak di pasang pada template-template blognya. Selain dapat mempercantik tampilan blog, penggunaan Font Awesome ini juga berguna untuk menambah nilai interaktif dari suatu antarmuka. Untuk saat ini, penggunaan Font Awesome yang paling banyak digunakan oleh kalangan blogger yakni V4.7. Sedangkan versi terbaru dari Font Awesome saat ini yakni V5. Dan ketika artikel ini mimin buat, bentar lagi akan realease versi terbaru dari Font Awesome, yakni V6.

Pada blog mimin sendiri, sebenarnya seringkali masih menggunakan Font Awesome yang V4.7, sembari mimin juga sudah mulai menggunakan FOnt Awesome V5 yang terbaru teman-teman. Walau sebenarnya masih ringan ketika menggunakan V4.7.

Nah, pada kesempatan kali ini admin mfaqih mau berbagi sedikit tutorial Bagaimana sih cara pemasangan atau penggunaan Font Awesome V.5 pada blog teman-teman, untuk itu apabila kalian tertarik dan ingin mencoba pemasangan Font Awesome V5 ini, berikut tutorialnya:

[1]. Silahkan teman-teman login terlebih dahulu ke akun blogger kalian

[2]. Selanjutnya ke menu Tema > Edit HTML

[3]. Backup terlebih dahulu template kalian yang sekarang! apabila ada error kalian nggak bingung untuk mengembalikannya

[4]. Salin dan paste CSS pemanggil Font Awesome V.5 ini diatas tag penutup </body>

<script async='async' defer='defer' 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://cedeen.netlify.app/font-awesome-5-pro/css/all.min.css"); //]]> </script>

[5]. Jika sebelumnya kalian sudah memasang pemanggil Font Awesome, tinggal kalian rubah saja skrip pemanggilnya menjadi;

<link rel="stylesheet" href="https://cedeen.netlify.app/font-awesome-5-pro/css/all.min.css" />

[6]. Selanjutnya untuk memanggil Font Awesome kalian dapat menggunakan beberapa teknik diantaranya;

 #Bisa ditampilkan menggunakan sytax <i></i> dan/atau <span></span>; fas digunakan untuk menampilkan icon yang solid, far digunakan untuk menampil icon reguler, dan fab digunakan untuk menampilkan icon brand. Contoh kasus;

<i class="fas fa-newspaper"></i> 

<span class="fas fa-newspaper"></span>

 #Kalian bisa juga merubah warnanya. Contoh kasus;

<span style="font-size: 3em; color: lightblue;"> <i class="fas fa-blogger"></i> </span>

 #Dan masih banyak lagi,

[7]. Selesai

NOTE: untuk teman-teman yang templatenya ada tampilan khusus Font Awesome 4.7, perlu beberapa perubahan yang dilakukan agar Font Awesome V.5 ini bisa tampil normal pada blog kalian;

#Ubah style CSS font-family:FontAwesome > menjadi font-family:'Font Awesome 5 Free'

#Ubah juga style CSS font-weight:normal > menjadi font-weight:900

Well, untuk tutorial lebih lengkapnya bakal mimin bahas pada artikel selanjutnya. Untuk itu, jangan lupa berlangganan, guna mendapatkan update-an terbaru secara gratis.