Cara Menggunakan Font Awesome di Blog

Font Awesome adalah sebuah system icon yang merupakan pengembangan dari bootscrap sehingga lebih mudah untuk digunakan dan cutomized dengan berbagai style css.

Font Awesome dapat di gunakan untuk semua website apa saja, ukuran icon juga sangat kecil sehingga tidak mengurangi kecepatan loading dan menambah daya tarik website anda. Jadi pastikan blog kamu sudah memasangnya.

Untuk versi terebaru sekarang 4.6.3 kebetulan saya juga menggunakan yang terbaru.

Memasang icon Font Awesome di blog

1. Log in blogger Dashboard>>Template>>Edit Template kemudian tambahkan code berikut di atas tag </head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" id="font-awesome-css" media="all" rel="stylesheet" type="text/css"/>

2. Anda bisa menambahkan icon font awesome dimana saja, dan untuk memanggil nya diperlukan sebuah tag <i>, class utama (fa) dan class untuk memanggil icon tertentu.
Contoh :

<i class="fa fa-home"></i>

Hasilnya:

Untuk mengubah ukuran tertentu bisa dengan menambahkan fa-lg, fa-2x, fa-3x, fa-4x dan fa-5x (increase 33%)

<i class="fa fa-home fa-lg></i> /*ditambah fa-lg*/

<i class="fa fa-home fa-2x></i> /*ditambah fa-2x*/

<i class="fa fa-home fa-3x></i> /*ditambah fa-3x*/

<i class="fa fa-home fa-4x></i> /*ditambah fa-4x*/

<i class="fa fa-home fa-5x></i> /*ditambah fa-5x*/

Hasilnya:
ditambah fa-lg
ditambah fa-2x
ditambah fa-3x
ditambah fa-4x
ditambah fa-5x
Untuk costum warna dan style yang diinginkan, Anda bisa sisipkan class css di dalamnya

<i class="fa fa-home fa-3x"></i> /*ditambah fa-3x*/

<style>

.fa-home {margin:0;padding:4px 0;color:#1d9e74;}

</style>

hasilnya:

ditambah fa-3x

Memasang icon Font Awesome dengan CSS

1. Untuk bisa memanggil icon Font Awesome melalui CSS kita memerlukan sebuah pseudo class before atau after dan font-family: FontAwesome juga property Display dan line-height agar fungsi icon bekerja dengan baik. Selain itu Anda juga bisa mengatur ukuran sesuai keinginan.

Contoh penulisan:

.comments h4{
        position: relative;
}
.comments h4:before{
          content : "\f075";
          font-family: FontAwesome;
          display: inline-block;
          color : #666;
}

Hasilnya:
Comments -------->class before

Untuk code "\f075" diambil dari [] dan untuk melihat daftar list iconya bisa lihat di http://fontawesome.io/cheatsheet/. Sekian dulu sobat Nubie Theme semoga bermanfaat. Terima kasih sudah berkunjung ke blog saya.