Cara Menggunakan Dan Memasang Font Awesome Terbaru
Font Awesome Icons merupakan sebuah kumpulan icon dalam bentuk font yang sangat menarik untuk dilihat. Sehingga para blogger banyak yang menggunakan font ini pada template-nya karena dengan menggunakan font awesome icons ini akan membuat tampilan blog kita menjadi menarik tanpa menggunakan banyak gambar icon yang biasanya dalam format png sehingga dengan menggunakan font awesome ini tidak terlalu mempengaruhi kecepatan loading blog kita".
Bagi Cacan, menggunakan font awesome adalah kewajiban untuk memperindah tampilan blog kita terlebih font awesome ini bisa digunakan oleh template apapun. Kita bisa mengukur besar kecilnya icon tersebut sesuka kita karena font awesome ini mudah dipakai dan dimodifikasi sesuka hati kita. jadi template kita akan terlihat menarik nan elegant.
Cara Memasang Font Awesome
Jika para plend sudah masuk dibagian edit Html template. maka tinggal tambahkan ekstra link dibawah ini dan diletakkan dibawah kode <head> atau diatas kode </head> atau diatas kode </body>.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css' />Cara Menggunakan Font Awesome
Menggunakan Font Awesome ini cukup mudah. Jika para plend ingin menggunakan ini langsung di HTML tanpa mengedit CSS, maka para plend hanya menambahkan tag <i> ke dalam kode HTML, contohnya seperti dibawah ini.
<i class="fa fa-heart"></i> <a class="fa fa-home" href="#"> Home </a> <a href="#"> <i class="fa fa-download"></i> Download </a>
Coba perhatikan lagi kode-kode diatas baik itu Heart, Home ataupun Download. apapun bentuk HTMLnya selagi ada kode class="fa fa-(nama kode)", maka hasilnya akan diawali oleh icon yang sesuai dengan namanya. Contohnya seperti dibawah ini
Home Download
Jika ingin menambahkan ukuran icon tersebut, maka plend cukup menambahkan nama ukuran didalam tag class-nya, contohnya seperti dibawah ini.
<i class="fa fa-heart fa-lg"></i> <i class="fa fa-heart fa-2x"></i> <i class="fa fa-heart fa-3x"></i> <i class="fa fa-heart fa-4x"></i> <i class="fa fa-heart fa-5x"></i>
Jika plend ingin icon-nya berputar seperti animasi maka gunakan class fa-spin agar icon tersebut bisa berputar. Namun sayangnya animasi ini tidak mendukung di IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-refresh fa-spin"></i>
Jika ingin membalikan posisi icon tersebut maka tambahkan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.
<i class="fa fa-shield"></i> normal <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90 <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180 <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270 <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal <i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal icon-flip-vertical
Sekali lagi perhatikan kode-kode iconnya diatas supaya lebih mudah dimengerti karena diatas adalah cara mudah tanpa ribet dengan langsung menulisnya di HTML. Dan jika plend ingin menggunakan cara font awesome ini didalam CSS pada pseudo elemen :before serta menuliskan kode value contentnya dari icon tersebut. lihat contohnya dibawah ini yang merupakan CSS wajib yang harus diisi untuk memanggil icon lewat kode value yang ditulis.
.element {
position: relative;
}
.element:before {
content: "\f015";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
Nah... itulah Penjelasan dari Cacan tentang memasang dan menggunakan font awesome baik lewat HTML maupun lewat CSS. Dan jika plend ingin melihat list lengkap font awesome silahkan klik Font Awesome.
tes
BalasHapustes balas
Hapuscek komen
BalasHapus