Cara Menggunakan Font Awesome 5 Di Blogger Terbaru

font awesome 5, font awesome blogger, font awesome terbaru, font awesome 5.12.0 pro,


Cara Menggunakan Font Awesome 5 Di Blogger Terbaru - Font Awesome adalah salah satu dari sekian banyak toolkit ikon dan font berbasis CSS dan LESS yang banyak digunakan di website-website terkenal. Awalnya Font Awesome dibuat oleh Dave Gandy untuk digunakan di Twitter Bootstrap, dan kemudian dimasukkan 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 Fonts.

Di kalangan blogger sendiri, Font Awesome juga banyak dipasang di template-template blognya. Selain dapat mempercantik tampilan blog, font ini juga berguna untuk menambah nilai interaktif dari suatu antarmuka. Versi Font Awesome yang paling banyak digunakan adalah versi 4.7, yaitu Font Awesome versi 4 yang terakhir. Sedangkan versi terbaru hingga saat tulisan ini dibuat adalah Font Awesome versi 5, tepatnya Font Awesome 5.12.0.

Blog saya saat ini juga menggunakan Font Awesome versi 5.12.0, walaupun versi ini agak lebih berat dibanding versi 4.7, tetapi yang bikin saya suka yaitu ada font untuk Blogger.

Pada artikel kali ini, saya akan membuat tutorial tentang cara update Font Awesome menjadi versi 5.12.0.

Sebelum menuju ke tutorial, alangkah baiknya template temen-temen di backup dulu. Berikut langkah-langkahnya.

Cara Menggunakan Font Awesome 5.12.0 Di Blogger;

  1. Langkah pertama yang harus ditempuh sebelum memasang Font Awesome, adalah dengan memasang CSS pemanggil dan tempatkan diatas </body> atau diatas script-script lainnya, yang penting diatas kode </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>

    Jika sebelumnya sudah memasang Font Awesome, tinggal dirubah saja kode pemanggilnya menjadi;
    <link rel="stylesheet" href="https://cedeen.netlify.app/font-awesome-5-pro/css/all.min.css" />
    Lanjut ke langkah selanjutnya,

  2. Langkah selanjutnya adalah menandai tempat dimana kita akan menampilkan Ikon Font Awesome ini,

    Ada beberapa teknik dalam menampilkan Font Awesome, diantaranya;
    • Bisa ditampilkan menggunakan syntax <i></i> dan/atau <span></span>;
      fas digunakan untuk menampilkan ikon yang solid, far digunakan untuk menampilkan ikon reguler, dan fab digunakan untuk menampilkan ikon brand,
      <i class="fab fa-blogger"></i>
<span class="fab fa-blogger"></span>
    • Bisa diubah warnanya;
      <span style="font-size: 3em; color: lightblue;">
 <i class="fas fa-blogger"></i>
</span>
    • Dan lain lain,
  3. Untuk yang di template-nya ada tampilan khusus Font Awesome 4.7, ada beberapa perububahan yang dilakukan agar Font Awesome 5.12.0 bisa tampil normal;
    Caranya sebagai berikut;
    • Ubah style CSS 
      font-family:FontAwesome
      menjadi 
      font-family:'Font Awesome 5 Free'
    • Ubah juga style CSS
      font-weight:normal
      menjadi 
      font-weight:900
  4. Untuk tutorial lebih lengkap, akan saya update pada kesempatan lain.

Demikian tutorial tentang Cara Menggunakan Font Awesome 5 Di Blogger Terbaru ini, semoga bermanfaat.

Posting Komentar