Cara Memasang Font Awesome Icons

Mad Trik - Siapa sih yang nggak tahu sama font icon yang satu ini. Font yang banyak berjasa untuk blog atau situs-situs besar yang ada di internet. Jika di ingat-ingat waktu pertama kali saya bermain blog dulu atau tepatnya sekitar tahun 2012 yang lalu, untuk mempercantik blog masih menyisipkan URL gambar di CSS, yang mana itu pasti akan memberatkan kecepatan muat blog kita juga kan.

Lalu muncul Font Awesome Icons ini, entahlah sejak kapan munculnya font keren ini, tapi sejak kemunculan font yang keren-keren ini banyak situs dan blog yang menggunakannya untuk memperindah tampilan blognya atau situsnya. Font Awesome disini beda sekali dengan font-font yang kalian pikirkan, ya mungkin beberapa dari kalian juga sudah tau apa perbedaannya font ini. Font ini berisi sejumlah ikon-ikon untuk sebuah situs maupun blog bukannya font-font yang biasa kita kenal yang biasanya berisikan huruf-huruf yang sama kerennya juga dengan Font Awesome ini.

Jadi sekarang tahu kan apa itu Font Awesome Icons ini ?, nah pembahasan kita kali ini caranya untuk memasang Font Awesome ini ke blog di Blogger. Caranya cukup mudah sekali kok:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Tinggal pasangkan saja text CSS diatas tepatnya dibawah kode <head> yang ada di template blog kamu.

Untuk menggunakannya juga mudah, tinggal memasang kode yang seperti ini dihalaman mana saja di blog kamu:

<i class='fa fa-youtube'></i>
<i class='fa fa-facebook'></i>
<i class='fa fa-google'></i>
<i class='fa fa-linkedin'></i>

Atau bisa juga yang seperti ini:

<i class='fa fa-youtube'/>
<i class='fa fa-facebook'/>
<i class='fa fa-google'/>
<i class='fa fa-linkedin'/>

Dan ada cara yang lain juga, yaitu dengan menyisipkannya di antara kode CSS, contohnya saya ambil dari CSS blok tulisan yang sudah saya publikasi sebelumnya di Mad Trik:

.info-kode:before {
content: "\f121";
font-family: 'fontAwesome';
display: block;
position: absolute;
top: 15px;
left: 16px;
color: rgba(0,0,0,.18);
font-size: 24px;
line-height: 1;
}

Kamu tidak harus meniru kode diatas, tapi intinya adalah dengan menaruh kode CSS content:"/f121"; dan font-family: 'fontAwesome'; Font Awesome pun akan muncul di blog kamu. Untuk selebihnya bisa kamu atur sendiri, untuk besar ikonnya kamu bisa memperbesarnya dengan font-size: 5px;, seperti yang sudah saya bilang tadi silahkan atur sendiri sesuai selera kamu.

Nah, kode diatas itu hanya ikon untuk brand-brand terkenal macam Google dan Twitter saja, untuk daftar ikon yang lebih lengkapnya lagi silahkan lihat saja dihalaman daftar Font Awesome Icons, disana mungkin ada lebih dari 450 ikon yang siap untuk kamu pasang di situs atau blog kamu.

Jadi pembahasan kali ini sampai disini saja dulu, jika ada pertanyaan lebih lanjut silahkan hubungi dokter *loh*, maksudnya silahkan berkomentar saja lalu kita bahas masalahnya.

11 comments

  1. sip, rencananya saya juga widget sosial network akan menggunakan font awesome ...

    ReplyDelete
    Replies
    1. Untuk WP ya om ? wah nanti kalo udah jadi kabarain ya om :D

      Delete
  2. saya malah belum paham font awesome icons sejenis yang mana ya, dicari demonya ngga ada, maklumin yah...anak baru nih

    ReplyDelete
    Replies
    1. Ya, cobtohnya seperti di bagian sudebar ini om :D kan ada ikon-ikonnya tuh :D

      Delete
  3. font awesome memang bisa bikin blog lebih keren.... seperti blog saya hehehe

    ReplyDelete
    Replies
    1. Gak pake font ini juga udah keren kok blognya :D

      Delete
    2. Tapi kalau pakai ini mungkin tambah menarik blognya.

      Delete
  4. Wah bisa akhirnya, mantaf! buat icon pada widget dengan font awesome gimana gan , salam http://blog-hidayru.blogspot.com/

    ReplyDelete
    Replies
    1. Pakai CSS :before sama :after mas :)

      Mungkin nanti dijelasin di lain waktu, jadi tunggu aja :D

      Delete
  5. makasih Mas, udah ta coba langsung berhasil.
    salam sukses

    ReplyDelete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.