Menarik Lainnya
Kalian tahu apa itu Icon Font Awesome?
Belum tahu? mari saya jelaskan, Font Awesome adalah jenis font yang berbentuk gambar atau icon yang digunakan untuk mempercantik tampilan blog atau website yang kalian gunakan, Font awesome sendiri memiliki banyak versi, ada yang lama and ada yang baru. Yang membedakan yang lama dengan yang baru adalah untuk versi terbaru biasanya ada penambahan ikon unik dan menarik.
Kelebihan yang dimiliki Icon Font Awesome
Yang pasti tentunya Free :vBisa digunakan untuk komersial maupun non komersialRingan, dan juga mempercepat loading blogTidak perlu pakai javascriptMudah untuk diberikan style CSS dan bisa diwarnai sesuka hatiIcon akan terlihat bagus di dalama ukuran font berapapunKompatible dengan Bootsrap 3.0.0Support dengan browser lama
Untuk menggunakan Icon Font Awesome ada 2 cara :
Dapat digunakan pada CSSDapat digunakan pada HTML
Agar bisa menggunakan Icon Font Awesome, kalian perlu menambahkan kode dibawah ini kemudian pastekan diatas kode </head>.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
1. Cara Menggunakan Icon Font Awesome didalam HTML
Untuk menggunakan Icon Font Awesome di html kalian perlu menambahkan kode <i> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini:
fa fa-home
<i class="fa fa-home"></i> fa fa-home
<i class="fa fa-home"></i> fa fa-home
Cara mengatur ukuran Icon Font Awesome
Untuk mengatur ukuran Icon Font Awesome, maka kalian hanya perlu menambahkan class fa-lg, fa-1x, fa-2x, fa-3x, fa-4x, fa-5x dan berikut contohnya:
fa-homefa-homefa-lg fa-homefa-homefa-2x fa-homefa-homefa-3x fa-homefa-homefa-4x fa-homefa-homefa-5x
<i class="fa fa-home fa-lg"></i> fa-home <i class="fa fa-home fa-2x"></i> fa-home <i class="fa fa-home fa-3x"></i> fa-home <i class="fa fa-home fa-4x"></i> fa-home <i class="fa fa-home fa-5x"></i> fa-home
<i class="fa fa-home fa-lg"></i> fa-home <i class="fa fa-home fa-2x"></i> fa-home <i class="fa fa-home fa-3x"></i> fa-home <i class="fa fa-home fa-4x"></i> fa-home <i class="fa fa-home fa-5x"></i> fa-home
Cara membuat list style Icon Font Awesome
Untuk membuat list style menggunakan Font Awesome gunakan Class fa-ul dan fa-li, misalkan saya akan menggunakan list style seperti dibawah ini:
fa-check
fa-li fa fa-arrow-right
fa-tags
fa-li fa fa-arrow-right
fa-tags
<ul class="fa-ul"> <li><i class="fa-check"></i> fa-check</li> <li><i class="fa-li fa fa-arrow-right"></i> fa-li fa fa-arrow-right</li> <li><i class="fa-tags"></i> fa-tags</li> </ul>
Cara menggatur posisi dan menambahkan border pada Icon Font Awesome
Untuk menembahkan border maupun menganti posisi Icon Font Awesome gunakan class pull-left atau pull-right dan untuk menambahkan border atau yang sering di bilang garis tepi, pada Font Awesome gunakan class fa-border
fa-homeletak Icon sebelah kiri menggunakan pull-leftfa-homeletak Icon sebelah kanan menggunakan pull-rightfa-homeMenambahkan border atau garis tepi menggunakan fa-border
<i class="fa fa-home pull-left"></i> fa-home <i class="fa fa-home pull-right"></i> fa-home <i class="fa fa-home fa-border"></i> fa-home
<i class="fa fa-home pull-left"></i> fa-home <i class="fa fa-home pull-right"></i> fa-home <i class="fa fa-home fa-border"></i> fa-home
Cara mengatur Rotasi Icon Font Awesome
Untuk mengatur rotasi maupun memutar Icon Font Awesome gunakan class fa-rotate-* dan fa-rotate-* ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di putar atau rotate.
normalGambar Icon dalam posisi normal fa-rotate-90Icon di rotate atau diputar 90 derajat fa-rotate-180Gambar Icon di rotate atau diputar 180 derajat fa-rotate-270Gambar Icon di rotate atau diputar 270 derajat fa-flip-horizontalGambar Icon di balik arah horisontal icon-flip-verticalGambar Icon di balik arah vertical
<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
<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
Cara membuat Icon Font Awesome menjadi bergerak atau Animasi
Untuk membuat Icon Font Awesome bisa bergerak seperti memutar gunakan class fa-spin . ini biasanya di kombinasikan pada icon fa-cog, fa-refresh dan lainnya. Dan sayang animasi bergerak ini tidak support untuk browser IE8 dan IE9.
fa-refresh fa-cog
<i class="fa fa-spinner fa-spin"></i> fa-spinner <i class="fa fa-cog fa-spin"></i> fa-cog
<i class="fa fa-spinner fa-spin"></i> fa-spinner <i class="fa fa-cog fa-spin"></i> fa-cog
2. Cara Menggunakan Icon Font Awesome di dalam CSS
Dalam penggunakan Icon Font Awesome pada CSS kalian perlu menambahkan kode Pseudo :before atau bisa juga dengan kode Pseudo :after dan menuliskan value content dari icon tersebut.
Sebagai contoh saya akan membuat box keterangan sederhana dengan element pseudo :after
contoh cara membuat box keterangan menggunakan Icon Font Awesome
.masriyan-box{background:#6591c2;color:#fff;position:relative;padding:10px 40px} .masriyan-box:after{ content: "\f027"; font-family: FontAwesome; color: #333; font-size: 20px; position: absolute; top: 5px; left: 10px; }<div class="masriyan-box"> contoh cara membuat box keterangan menggunakan Icon Font Awesome </div>
Dan itulah cara untuk menggunakan Icon Font Awesome, dan sebenarnya masih banyak lagi cara untuk menggunakan Icon Font Awesome ini tergantu dari anda menguasai kode CSS dan HTML, dan lakukan kreatifitas kalian karena kalau kalian semakian kreatif maka akan semakin bagus.