Cara Menggunakan Font Awesome Untuk Website
Mengikuti perkembangan jaman, tren desain website dan blog terus berkembang. Diantaranya tren flat
design, yang mensyaratkan sebuah website/blog tampil secara elegan tanpa
elemen yang menonjol dan berjejal. Website yang biasanya dihiasi dengan
berbagai gambar ikon juga beralih ke penggunaan ikon berbasis font,
sebut saja Glyphicons, Foundation Icon Fonts, IcoMoon, Fontello, dll. Yang terakhir, yang sedang populer saat ini: Font Awesome Icons. Platform icon ini cepat populer lantaran bersifat CSS toolkit, sehingga mudah digunakan dan tidak berat.
Cara menggunakan Font Awesome ini sesungguhnya tidak terlalu rumit, berikut adalah tutorial menggunakan Font Awesome untuk website anda.
1. Pertama-tama, anda harus mendownload Font Awesome di http://fortawesome.github.io/Font-Awesome/
2. Setelah anda selesai mendownload, silahkan ekstrak file .rar maka anda akan memperoleh file dengan format font dan juga CSS.
3. Lalu copy link di bawah ini di antara <head> dan </head> dalam HTML
<link rel="stylesheet" href="font/font-awesome/4.2.0/css/font-awesome.min.css"/>
NB: Sesuaikan dengan link folder yang anda buat.
4. Untuk menggunakannya anda hanya perlu menambahkan tag:
<i class="fa fa-facebook"></i>
Dapat dilihat dari script di atas, saya sengaja membuat tulisan facebook itu menjadi bold. Fungsinya adalah untuk memberitahu pada bagian itulah, kita dapat memilih icon yang akan digunakan.
Apabila saya menulis facebook, makan yang keluar adalah icon facebook, apabila saya menulis home maka yang keluar adalah icon home.
Untuk mengetahui keyword untuk icon yang anda gunakan, anda dapat langsung mengujungi: http://fortawesome.github.io/Font-Awesome/icons/ . Ada banyak sekali macam icon disana, mulai dari icon-icon standar sampai icon untuk sosial media atau sebagainya.
Berikut adalah beberapa contoh icon dan keyword yang dapat digunakan di Font Awesome:
Refrensi:
http://fortawesome.github.io/Font-Awesome/get-started/
Cara menggunakan Font Awesome ini sesungguhnya tidak terlalu rumit, berikut adalah tutorial menggunakan Font Awesome untuk website anda.
1. Pertama-tama, anda harus mendownload Font Awesome di http://fortawesome.github.io/Font-Awesome/
2. Setelah anda selesai mendownload, silahkan ekstrak file .rar maka anda akan memperoleh file dengan format font dan juga CSS.
3. Lalu copy link di bawah ini di antara <head> dan </head> dalam HTML
<link rel="stylesheet" href="font/font-awesome/4.2.0/css/font-awesome.min.css"/>
NB: Sesuaikan dengan link folder yang anda buat.
4. Untuk menggunakannya anda hanya perlu menambahkan tag:
<i class="fa fa-facebook"></i>
Dapat dilihat dari script di atas, saya sengaja membuat tulisan facebook itu menjadi bold. Fungsinya adalah untuk memberitahu pada bagian itulah, kita dapat memilih icon yang akan digunakan.
Apabila saya menulis facebook, makan yang keluar adalah icon facebook, apabila saya menulis home maka yang keluar adalah icon home.
Untuk mengetahui keyword untuk icon yang anda gunakan, anda dapat langsung mengujungi: http://fortawesome.github.io/Font-Awesome/icons/ . Ada banyak sekali macam icon disana, mulai dari icon-icon standar sampai icon untuk sosial media atau sebagainya.
Berikut adalah beberapa contoh icon dan keyword yang dapat digunakan di Font Awesome:
Refrensi:
http://fortawesome.github.io/Font-Awesome/get-started/