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.
0 Komentar