Cara Memasang Font Awesome di Blogger

Font Awesome adalah css yang berisikan berbagai macam icon pack yang umumnya digunakan untuk mempercantik suatu halaman website, atau aplikasi.
Nama dengan kata font bukan berarti ini adalah jenis font untuk mengubah gaya huruf, tetapi ini adalah framework css.
Dengan adanya Font Awesome ini sangat membantu para developer dan admin web, tinggal pasang css font awesome, langsung bisa digunakan terutama pada tampilan website sehingga lebih menarik.
Pada postingan sebelumnya, saya juga sudah memposting tentang Cara Memasang Widget Artikel Terbaru Di Blogger Ringan dan Simpel yang juga menggunakan icon dari font awesome.
kalau sudah paham apa itu font awesome lanjut ke cara memasang font awesome di blog.

Cara Memasang Font Awesome di Blogger

1. Sobat daftar dulu di website font awesome disini Daftar, masukkan alamat email sobat, kemudian sobat cek email sobat dan verifikasikan akun font awesome nya.  

Karena disini saya sudah daftar sebelumnya jadi saya lewati langkah ini. biasanya setelah verifikasi akan langsung muncul tampilan seperti di bawah ini. 

pada bagian yang saya beri kotak warna merah di atas adalah script yang akan kita gunakan. 
Intinya adalah, disini kita hanya membutuhkan suatu script entah itu css atau javascript, kalau saya disini lebih suka menggunakan dari web nya langsung, karena lebih aman.

2. Jika sudah mendapatkan script/kode nya, langkah selanjutnya adalah memasang di blogger, atau juga bisa sobat gunakan pada website sobat.
3. Seperti biasanya, sobat masuk ke Dasbor Blogger, lalu masuk ke Tema => Edit Html.
4. Cari kode </body> dan letakkan script yang sudah sobat dapatkan di website font awesome tadi Tepat di atas kode </body> ,pastikan scriptnya seperti ini ya sob.

<script src="https://kit.fontawesome.com/b8c22287b2.js"></script>

5. Lalu klik simpan.

Biasanya icon/gambar dari font awesome dipasang pada bagian navbar, seperti yang sobat lihat di navbar blog saya ini. Untuk cara menggunakan di blog juga cukup mudah, seperti yang tertera pada website font awesome, penggunaannya yaitu menggunakan kode seperti di bawah ini.

<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->

text yang saya beri warna hijau adalah style yang digunakan, contohnya jika menggunakan icon blogger, facebook,twitter,whatsapp dll. itu adalah brands, jadi kode yang digunakan adalah fab. kalau yang fas itu adalah style solid.
lalu yang saya beri warna biru adalah icon yang akan digunakan, misal fa-camera ini akan menampilkan icon camera, fa-facebook ini akan menampilkan icon facebook. untuk icon bisa sobat lihat di sini List Icon.
Untuk cara penggunaan lebih detail nya bisa sobat lihat di web nya Disini .

Bagaimana mudah bukan?? Bantu Share juga artikel ini , semoga bermanfaat.

Bagikan Artikel ini