Belajar Bagaimana Cara Menggunakan Font Awesome dan Memasangnya Pada Blog

www.fontawesome.com

sengaja kucatat agar takkulupa..

jika ada yang kurang silahkan ditambah...

kembali menulis ringan kali ini sedikit jauh dari tema sepakbola atau efaktur. temanya yaitu css, yang ingin tahu mengetahui apa itu CSS tak perlu saya jelaskan disini karena sejujurnya anda itu salah alamat. karena saya juga tidak begitu paham ilmu ilmu web. ada banyak kok referensi di luar sana silahkan bapak ibu adek kakak bisa googling sendiri.

ini tulisan ringkas, tidak detail, kenapa saya membuat tulisan ini, karena kali saya ingin memasang icon pada web saya tanpa harus susah susah mendesain icon, cukup dengan menggunakan framework css open source dari www.awesomefont.com, sebenarnya cara ini juga saya pelajari di internet, sengaja kucatat agar tak kulupa.

1. Cara Install

pertama yang harus kita lakukan adalah mendapatkan source code dari penyedia layanan awesomefont dengan signup langsung pada website resmi nya https://fontawesome.com/
disini saya menggunakan layanan gratisannya, seperti biasa penyedia layanan selalu memberikan versi itu gratis dan juga ada yang versi pro untuk fitur lengkapnya.
code anda bisa lihat pada profil/kit, seperti gambar dibawah.

www.fontawesome.com

2. Memasang Code

setelah mendapatkan kode tadi,silahkan anda buka HTML web anda dan silahkan anda pasang antara tag . jika anda menggunakan layanan blogger, silahkan masuk pada menu TEMA > Edit HTML Template. pada bagian kode html silahkan anda search tag

kemudian pasang code diatas

blogger.com

3. Memasang Icon

setelah kedua proses diatas telah selesai selanjutnya adalah memasang icon. ada dua cara yang bisa dilakukan untuk memasang icon disini yaitu dengan menggunakan CSS atau HTML, tapi disini saya hanya bisa menggunakan cara html.

pertama yang dilakukan adalah mencari icon yang ingin di munculkan di web anda. untuk daftar iconnya bisa di lihat disini : https://fontawesome.com/icons

setelah mendapatakan icon yang ingin anda gunakan silahkan klik icon tersebut hinggal muncul code html dari icon tersebut.

pada contoh ini saya menggunakan icon pdf sebagai berikut :

silahkan anda copy code html tersebut kemudian sisipakn pada kode html anda.


<i class="far fa-file-pdf">Permenkeu 23/PMK.03/2020</i>

Maka Hasilnya seperti ini

well itulah tampilannya, jika ingin mempercantik tampilannya silahkan anda menambahkan sedikit pemanis CSS... #CMIIW :p ...