- Home >
- Tutorial Blog >
- Menerapkan Font Awesome Icon Di Blog
Posted by : Surya Fahik
Rabu, 12 Juni 2013
Untuk menerapkannya di blog, Pertama tambahkan kode dibawah ini diatas kode <head>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet"/>Untuk melihat semua nama "Font" yang dapat digunakan silahkan ke sini.
Cara penggunaan-nya anda cukup menambahkan tag <i>, class dan nama "font".
Cara Penulisannya
<i class="icon-smile"></i> Cara Penulisan-nyaIkon Kamera
<i class="icon-camera-retro"></i> Ikon Kamera
Memperbesar Ukuran Ikon
Normal
2x Lebih Besar
3x Lebih Besar
4x Lebih Besar
5x Lebih Besar
2x Lebih Besar
3x Lebih Besar
4x Lebih Besar
5x Lebih Besar
<i class="icon-smile"></i> Normal
<i class="icon-smile icon-large"></i> 2x Lebih besar
<i class="icon-smile icon-2x"></i> 3x Lebih besar
<i class="icon-smile icon-3x"></i> 4x Lebih besar
<i class="icon-smile icon-4x"></i> 5x Lebih besar
Icon-Icon tersebut juga dapat diputar, dengan menentukan derajat putaran.
ikon normal
ikon diputar 90 derajat
ikon diputar 180 derajat
ikon diputar 270 derajat
ikon dibalik secara horizontal
ikon dibalik secara vertikal
ikon diputar 90 derajat
ikon diputar 180 derajat
ikon diputar 270 derajat
ikon dibalik secara horizontal
ikon dibalik secara vertikal
<i class="icon-home"></i> ikon normal
<i class="icon-home icon-rotate-90"></i> ikon diputar 90 derajat
<i class="icon-home icon-rotate-180"></i> ikon diputar 180 derajat
<i class="icon-home icon-rotate-270"></i> ikon diputar 270 derajat
<i class="icon-home icon-flip-horizontal"></i> ikon dibalik secara horizontal
<i class="icon-home icon-flip-vertical"></i> ikon dibalik secara vertikal
Icon Tersebut juga bisa anda gunakan pada tombol/button blog.
<a class="tombol" href="#"><i class="icon-comment"></i> Comment</a>
<a class="tombol" href="#"><i class="icon-info-sign"></i> Info</a>
<a class="tombol" href="#"><i class="icon-trash icon-large"></i> Delete</a>
<a class="tombol" href="#"><i class="icon-cog"></i> Settings</a>
Posting Komentar