Menambahkan Font Awesome di Blogger
Untuk cara menambahan font awesome ke blogger sebenarnya cukup mudah. Disini saya sudah menyediakan kode/script yang berfungsi untuk meload font awesome tanpa takut terkena render blocking.
Silahkan pasang script berikut sebelum atau diatas kode
</head><script type='text/javascript'>
//<![CDATA[
//CSS Ready
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://use.fontawesome.com/releases/v5.5.0/css/all.css")
//]]>
</script>Membuat ikon menggunakan font awesome
Lanjut ke cara pembuatan ikonnya, untuk cara membuat ikon kita akan menggunakan tag
i sesuai dengan rekomendasi dari font awesome sendiri, disertai dengan class font awesome (fas/far/fal/fab).Contoh penulisan kodenya seperti ini
<i class="fas fa-cat"></i>
<i class="fab fa-apple"></i>Hasil:
Penjelasan:
- fas dan fab adalah nama kelas font awesome
- fa-cat dan fa apple adalah nama ikon, untuk mencari icon lainya bisa langsung ke web resminya: daftar icon font awesome
Bagi pengguna font awesome 4.x kebawah pasti ada yang terasa berebeda. Yap pada nama class nya. Di versi sebelumnya penulisan class font awesome hanya "fa" saja
Contoh kodenya seperti ini
<i class="fa fa-instagram"></i>Untuk versi 5++ memang agak berbeda dan untuk nama class sudah dibagi menjadi beberapa bagian lagi sesuai dengan style icon nya.
Dari ke 4 nama class yang bisa diigunakan di versi gratis hanya ada 2, yaitu fas dan fab.
Tabel class font awesome 5.5
Namun kita tidak perlu khawatir dengan versi gratisnya. Ikon gratis yang disediakan sudah sangat banyak dan saya kira sudah cukup untuk keperluan desain template blog kita. Namun jika kalian punya uang lebih bisa dicoba beli yang pro dengan harga sekitar $60/tahun :v
Kostum Font Awesome
Font awesome juga bisa dikostum sesuai selera kita. Baik dari ukuran, warna, rotasi, bahkan bisa dikombinasikan dan di animasikan tanpa css tambahan.
Untuk tutorial lengkap ada di web resminya silahkan bisa klik link berikut Styling Font Awesome
Contoh pemasangan di blogger
Untuk kalian yang masih bingung cara membuat icon dengan font awesome di blogspot tidak usah khawatir. Disini saya akan memberikan contoh pembuatannya
Kali ini saya akan mencoba membuat logo instagram yang ditempatkan di footer blog.
Kurang lebih seperti ini
Result/Demo
Pertama pastikan sobat semua sudah pasang script font awesome
Kemudian copy dan paste kode berikut diatas
</style> atau ]]></b:skin>.sosmed {display: block;padding: 10px;}
.ig a {padding: 6px 11px;font-size: 3em;color: #fff;background: linear-gradient(45deg, #f4b446, #eb423a, #bd1274, #701dc5);border-radius: 13px;transition: all 0.5s ease-in;}
Jika sudah copy dan paste kode berikut diatas
</footer> (setiap template belum tentu sama) jika ingin diletakkan didalam footer, atau bisa ke tempat lainya sesuai keinginan kalian. <div class='sosmed'>
<span class='ig'>
<a href='link ig anda' target='_blank'>
<i class='fab fa-instagram'/>
</a>
</span>
</div>Terakhir simpan template
Jika masih ada kendala langsung tanyakan dikolom komentar saja sobb