Cara Tambahkan Font Awesome di Blog

Font Awesome


Kali ini saya memberikan postingan tutorial memberi icon pada blog atau yang sering kita kenal Font Awesome.Penggunaan font awesome biasanya untuk di taruh di tombol,navigasi bar,bahkan bisa di tempatkan di postingan.Untuk tutorial nya sangat mudah anda tinggal mengikuti langkah langkah berikut.


  • Letakan kode berikut diatas </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
  • Cari font yang anda inginkan Disini
  • Copy kode font yang anda pilih.
  • Contoh saya menggunakan kode berikut
<i class="fa fa-home"></i>
  • Untuk mengganti ukuran atau memperbesarnya kamu dapat mencoba fa-lg (33% increase), fa-2x, fa-3x, fa-4x, dan fa-5x . contohnya.
<i class="fa fa-home fa-lg"></i>  contoh ditambah : fa-lg
<i class="fa fa-home fa-2x"></i> contoh ditambah fa-2x
<i class="fa fa-home fa-3x"></i> contoh ditambah fa-3x
<i class="fa fa-home fa-4x"></i> contoh ditambah fa-4x
<i class="fa fa-home fa-5x"></i> contoh ditambah fa-5x
  • Untuk pengaturan warna, ukuran dan style lainnya Anda juga bisa menggabungkan class CSS yang sesuai. Misalnya :
<i class="fa fa-comments-o fa-4x"></i> contoh ditambah fa-4x
<style>
.fa-comments-o {padding:0;  margin:0; float:left;padding:5px 0px; color:#F2784B;}
}
</style>
  • Untuk menerapkan pada postingan, sebaiknya kamu menggunakan mode "HTML" bukan mode "compose". dan saya sering menggunakan browser chrome agar lebih mudah penulisannya. Ini juga berlaku pada widget HTML/Javascript.
Mungkin itu dulu tutorialnya yang bisa saya sampaikan pada postingan kali ini .Semoga bermanfaat.

Postingan terkait:

4 Tanggapan untuk "Cara Tambahkan Font Awesome di Blog"

  1. Menarik. Tapi, Kalau ganti font ngaruh sama template dan nggak bakal ngerubah index di google kan?

    BalasHapus
  2. tidak akan ngerubah index gan..Karena haya untuk menambah variasi font.:)

    BalasHapus