Menggunakan Font Awesome CSS pada Blogger

Beberpa hari ini saya mencoba untuk me-modifikasi tampilan Metro UI Blogger yang pernah saya share di sini: http://www.irmawan.me/2013/07/metro-ui-windows-8-pada-menu-tab-blogger.html dengan mengganti tampilan icon yang menggunakan image dan akan saya ganti dengan menggunakan icon dari Font Awesome. Beberapa alasan mengapa icon image tersebut akan saya ganti menggunakan font awesome dikarenakan  jika menggunakan font awesome yang terbaca bukanlah image tetapi font/huruf, hal ini juga dapat mempercepat loading speed pages ketimbang saya menggunakan image sebagai icon, selain itu icon font awesome hampir bisa terbaca di seluruh macam gedget maupun browser yang semakin canggih saat ini.

Sebelum memulai pemasangan font awesome, menu tabs pages tampilan metro UI yang pernah saya share di postingan sebelumnya di edit terlebih dahulu dengan mendelete icon gambar yang ada di dalamnya. Misalnya, jika teman-teman pernah mencoba modifikasi tampilan metro UI yang pernah saya share, maka sebelum memasang font awesome silahkan masuk dashboard blogger >> template >> edit html dan kemudian cari </b:skin>. Pada bagian atas kode tersebut terdapat css yang pernah kita tambahkan dulu, kemudian cari salah satu css page menu pages tabs Metro UI yang dulu pernah di pasang, misalnya:

.PageList li.Beranda a {background: url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8fPRqy0DMqSUNU-d0x98ViG8SnjQ8BdJt95z8tZBlDrMrm8PvzbzismWf17mA-UlGL1MuBWuJsjw1sREaJ7AHF9wFX5Zh0uy6pBy5QiChPG2W4ANg2o9anCeZfaFwo0r1PwV3sgAoOvb/s50/home%252050px.png') no-repeat center; background-color: #2ca3e8; }

kemudian hapus css image-nya (yang saya bold warna hijau) dan sisakan bagian background color yang saya bold warna kuning sehingga menjadi seperti ini:

.PageList li.Beranda a {background-color: #2ca3e8; }

lakukan berulang pada masing-masing menu pages teman-teman (jika pernah menggunakan tampilan metro UI yang pernah saya share) dan kemudian save template.

Sebelum memasang font awesome, kita pasang dulu kode servicenya dari salah satu CDN yang sudah menyediakannya untuk pengguna di platform blogger. Masih pada edit html template, cari (ctr+f) kode berikut </head> dan letakkan link service font awesome ini tepat diatas kode </head> tadi:

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

Kemudian save template teman-teman. Pada tutorial penggunaan font awesome yang banyak di share di internet rata-rata banyak contohnya yang menggunakan html i class, kebetulan kali ini yang saya share menggunakan versi css yang kebetulan belum banyak yang share pemasangannya menggunakan css, sedangkan jika teman-teman ingin melihat contoh yang menggunakan html i class boleh di lihat disini: http://fontawesome.io/examples/

Ok, untuk memasang versi css-nya sebelumnya teman-teman harus sudah tau element mana yang akan dipasangi kodenya. Misalnya saya akan memasangnya di menu page tab plengdut, maka saya harus tau class element dari tab ini, silahkan gunakan tools seperti firebug atau yang lainnya untuk memeriksa element tersebut. Kebetulan class element pada menu tab page plengdut saya seperti ini setelah saya cek menggunakan firebug:

 <li class="Plengdut">
<a href="http://www.plengdut.com">Plengdut</a>
</li>

Maka css untuk font awesomenya seperti ini:

.Plengdut{
    position: relative;
}

.Plengdut :before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #ffffff;
    font-size: 40px;
    padding-right: 0.5em;
    position: absolute;
    top: 30px;
    left: 45px;
}

Kode yang diwarnai hijau adalah class element yang harus teman-teman ketahui sebelum memasang css tersebut, jadi silahkan di cek terlebidahulu class element teman-teman kemudian silahkan ganti kode css diatas menggunakan class element teman-teman (yang saya bold hijau) dan seperti biasa css tersebut diletakkan pada menu template silahkan klik costumize/sesuaikan >> advance/tingkat lanjut >> add css/tambahkan css, kemudian tambahkan code css tersebut. 

Keterangan: 

• code  yang saya warnai kuning diatas adalah kode icon font awesome dalam bentuk css/unicode, silahkan lihat referensinya disini untuk cheatsheet-nya: http://fontawesome.io/cheatsheet/
• code yang saya bold warna biru muda adalah kode untuk posisi icon, silahkan di rubah-rubah sesuai keinginan teman-teman mau di letakkan dimana.
• block code yang berwarna orange diatas adalah code hexa color untuk merubah warna icon, silahkan ganti sesuka hati.
• code yang saya bold merah diatas adalah pseudo class (misal before/after) dan usahakan jangan diganti, karena untuk memunculkan icon font awesome pada css kudu ada pseudo class-nya berbeda jika kita menggunakan html i class kita hanya tinggal menuliskan perintah <i> tag untuk memunculkannya.

Hasilnya akan seperti ini (menggunakan icon font awesome glass="\f000") :

Dan setelah saya rubah seluruhnya maka hasilnya akan tampak seperti pada menu tab pages di blog saya ini sudah menggunakan font awesome icon semuanya dan tidak menggunakan image icon lagi. Selamat mencoba.