Pada umumnya FontAwesome adalah salah satu font yang sering digunakan pada web dan blog. Hal yang unik dari font awesome ini yaitu bisa digunakan sebagai icon untuk mempercantik tampilan blog. Karena dalam font ini berisikan ratusan icon yang bisa kita gunakan dan kita implementasikan ke dalam web ataupun blog pribadi kita. Selain itu juga cara pemasangan fontawesome ini sangat mudah, penggunaan font awesome ini pun sangat mudah dan simple.
Kebanyakan web dan blog mengaplikasikan font awesome untuk tombol share dan sosial network conection, karena icon ini sangat cocok sekali difungsikan untuk hal tersebut, karena fontawesome ini sangan elegant, simple menarik dan kekinian untuk para pengguna internet.
Seperti apakah tampilan icon dari fontawesome?
Icon yang terdapat pada fontawesome ini sangatlah menarik, elegan dan kekinian banget. Selain itu pihak pengembang font awesome ini pun selalu mengikuti perkembangan teknologi digital di jaman sekarang dan selalu mengupdate icon icon terbaru ke dalam font awesome. Jadi icon yang ada dalam font awesome ini sangat terupdate. Silahkan perhatikan demo page berikut, ini adalah contoh tampilan icon menggunakan font awesome:
Cara menggunakan/memasang font awesome pada blog dan web
Untuk menggunakan font awesome pada blog dan web, langkah pertama yang harus kamu lakukan adalah memasangkan code css font awesome di dalam tag head.Letakan script berikut di bawah tag <head>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Setelah meletakan script tersebut font awesome sudah terinstalasi pada blog kamu, yang perlu kamu lakukan sekarang adalah menggunakan font awesome pada blogmu.
*Catatan: script diatas menggunakan font awesome versi 4.3.0, ada beberapa unicode atau icon yang belum ada disana. Untuk info lenngkap mengenai versi dari fontawesome, bisa langsung di cek di website oficialnya langsung di https://fontawesome.com/
Bagaimana cara menggunakan font awesome?
Cara untuk menggunakan fontawesome sebenarnya sangat mudah sekali, kamu tinggal mengganti font dari element tersebut dengan font awesome. Kamu hanya perlu mengaturnya dengan menambahkan css font family pada element tersebut atau dengan menambah style = "font-family: FontAwesome;".Contohnya seperti ini:
Tanpa fontawesome: <b>Halo</b><br/>
Menggunakan fontawesome: <b style='font-family:FontAwesome' class='fa-home'> Go Home</b>
Dan untuk mempermudahnya kamu bisa langsung menggunakan css class yang sudah ada dalam css fontawesome tersebut. Jadi kamu hanya perlu menambahkan class='fa' pada element tersebut.
Contoh:
<b class='fa fa-home'> Halo</b>Lalu bagaimana cara menggunakan icon dari fontawesome?
Untuk menggunakan icon dari fontawesome ini kamu harus melihat list atau cheet sheet icon yang ada pada fontawesome ini terlebih dahulu.
Cheet sheet fontawesome bisa kamu lihat disini atau di website oficial fontawesome.
Untuk pemasangannya kamu pilih salah satu icon yang ingin kamu gunakan, lalu copy css namenya(seperti gambar diatas).
contoh: misalnya kamu ingin menggunakan icon rumah(home), lihat pada cheet sheet lalu salin css namenya.
Letakan pada element css seperti ini:
<b class='fa fa-home'> Go to Ngespot</b>Bagaimana? mudah bukan? Dengan menggunakan font awesome tampilan blog kita akan terlihat lebih elegant seperti website profesional. Jika ada hal yang ingin di tanyakan atau request tutorial silahkan sampaikan dengan sopan pada kolom komentar. Terimakasih
0 Komentar Untuk "Tampilan Blog dan Web Lebih Menarik dengan Fontawesome"
Post a Comment