Di dunia desain grafis apalagi web desain, penggunaan icon menjadi sangat penting karena faktor estetika yang menjadi primadona dalam desain grafis. Biasanya icon yang digunakan di web berformat gambar, entah itu png, gif, atau yang lainnya. Yang menjadi masalah adalah tuntutan kecepatan website yang akan terganggu jika terlalu banyak menggunakan ikon berupa gambar. Untuk mengatasi masalah itu, terkadang para desainer web (dulu) menggunakan icon dengan resolusi dan kualitas gambar yang sangat rendah. Akibatnya nilai estetika icon tersebut pun berkurang.
Apa itu FontAwesome?
FontAwesome menjadi salah satu solusi penggunaan desain yang banyak digunakan saat ini. Dari pada menggunakan gambar beresolusi rendah, tentu saja penggunakan icon yang berasal dari karakter huruf (font) menjadi solusi yang sangat cerdas. Selain ringan, karena hanya seperti karakter huruf lainnya, tren desain yang simple membuat nilai artistik FontAwesome juga tidak kalah dengan icon konvensional lainnya. Jika anda melihat icon Home dan Icon widget di sebelah kanan atas, itu semua adalah font icon yang saya gunakan di blog ini.
Kemudian, pertanyaannya, bagaimana cara memasang FontAwesome di blogger?
Cara pemasangannya sangat mudah. FontAwesome disediakan dari http://www.bootstrapcdn.com/, sebuah content delivery network publik gratis. Kita dengan mudah bisa menggunakan FontAwesome dari sana.
Langkah-1. Menautkan / memasang CSS FontAwesome di template Blogger.
- Buka Blogger >> Template >> Edit HTML
- CTRL+F untuk tag <head>
- Persis di bawah tag tersebut, copy paste code di bawah ini
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
- Save template
- SELESAI!!
Langkah-2. Menggunakan Icon
Untuk mengetahui daftar icon apa saja yang ada, anda harus memilihnya dari daftar icon fontawesome. Kunjungi halaman >> FontAwesome Icon.Kemudian, untuk menerapkannya di blog anda, pilih di <div>, <a>, atau list <li> mana yang ingin anda ubah. Kemudian tambahkan kode <i class='fa-spasi-#namaicon'></li> di dalam tag yang anda inginkan. Perhatikan contoh berikut.
Kode Home >> <a href='#'><i class="fa fa-home"></i></a>
Kode Toga >> <li><a href='#'><i class="fa fa-graduation-cap"></i></a></li>
Langkah-3. Mengubah style icon
Untuk mengubah style dari icon tersebut, misalnya mengubah warna atau mengubah ukurannya, cukup dengan menambahkan kode style untuk li pada komponen template anda. Misalnya anda memasang icon tersebut di <div id='icon'><li><i class='fa fa-home'></li></div>, tambahkan code CSS setelah tag : <b:style> kode berikut :i { color:#444; font-size:25px; }Yap, dan icon anda sudah terpasang dengan cantik di blog anda!! :D Selamat mencoba!!
atau
#icon li{color:#444;font-size:25px}
Jika masih ada pertanyaan, silahkan tanyakan saja di komentar di bawah, thanks.
tag : awesomefont, icon, tutorial
Cara Menggunakan Font Awesome di Blogger
Reviewed by skyoko7@gmail.com
on
Monday, September 15, 2014
Rating:
Reviewed by skyoko7@gmail.com
on
Monday, September 15, 2014
Rating:
No comments:
Comment Here