✔ Cara Lengkap Memakai Font Awesome Pada Blog

Hai Gaes... semuanya pada sore hari ini saya akan share cara menggunakan icon font awesome, kalian niscaya sudah tahu bahwa blog ini menggunakan icon font awesome ibarat home diatas. Saya menggunakan icon font awesome alasannya yaitu terlihat menarik bagi saya sendiri, dan hampir semua tempelate menggunakan icon ini untuk mempercantik tampilan blog bahkan kalian juga pastinya sudah memakainnya bukan?

Kalian tahu apa itu Icon Font Awesome?

Belum tahu? mari saya jelaskan, Font Awesome yaitu jenis font yang berbentuk gambar atau icon yang dipakai untuk mempercantik tampilan blog atau website yang kalian gunakan, Font awesome sendiri mempunyai banyak versi, ada yang usang and ada yang baru. Yang membedakan yang usang dengan yang gres yaitu untuk versi terbaru biasanya ada penambahan ikon unik dan menarik.

Kelebihan yang dimiliki Icon Font Awesome

Yang niscaya tentunya Free :vBisa dipakai untuk komersial maupun non komersialRingan, dan juga mempercepat loading blogTidak perlu pakai j4vascriptMudah untuk diberikan style CSS dan dapat 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 dipakai pada CSSDapat dipakai pada HTML

Agar dapat menggunakan Icon Font Awesome, kalian perlu menambahkan isyarat dibawah ini lalu 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 ibarat dibawah ini:

 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

Cara menciptakan list style Icon Font Awesome 

Untuk menciptakan list style menggunakan Font Awesome gunakan Class fa-ul dan  fa-li, misalkan saya akan menggunakan list style ibarat dibawah ini:

 fa-check
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

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

Cara menciptakan Icon Font Awesome menjadi bergerak atau Animasi

Untuk menciptakan Icon Font Awesome dapat bergerak ibarat 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

2. Cara Menggunakan Icon Font Awesome di dalam CSS

Dalam penggunakan Icon Font Awesome pada CSS kalian perlu menambahkan isyarat Pseudo :before  atau dapat juga dengan isyarat Pseudo :after  dan menuliskan value content dari icon tersebut.

Sebagai tumpuan saya akan menciptakan box keterangan sederhana dengan element pseudo :after

tumpuan cara menciptakan 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"> tumpuan cara menciptakan box keterangan menggunakan Icon Font Awesome </div>

Dan itulah cara untuk menggunakan Icon Font Awesome, dan bekerjsama masih banyak lagi cara untuk menggunakan Icon Font Awesome ini tergantu dari anda menguasai isyarat CSS dan HTML, dan lakukan kreatifitas kalian alasannya yaitu jikalau kalian semakian kreatif maka akan semakin bagus.

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: