Menggunakan Icon Font Awesome Pada Css Dan HTML

Apa Itu Icon Font Awesome ?

Font Awesome adalah jenis font yang berbentuk gambar atau icon yang digunakan untuk mempercatik  tampilan blog atau website, Font awesome sendiri memiliki banyak versi, ada yang lama dan ada yang terbaru. Yang membedakan yang lama dengan yang baru adalah untuk versi terbaru biasanya ada penambahan ikon-ikon unik dan menarik.

Kelebihan Icon Font Awesome 

• Ringan, bisa mempercepat loading blog karena biasanya yang digunakan adalah image atau gambar ikon.
• Gratis alias Free , bisa digunakan untuk komersial maupun non komersial.
• Icon akan terlihat sempurna di dalam ukuran font berapapun.
• Mudah untuk diberikan Style CSS dan bisa di warnai.
• Compatible dengan Bootsrap 3.0.0.
• Support dengan Browser lama.

Cara Menggunakan Icon Font Awesome ada 2 cara :

1. Dengan Menggunakan Icon Font awesome didalam HTML.
2. Dengan Menggunakan Icon Font awesome didalam CSS.

Agar bisa menggunakan Icon Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas 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

Dalam penggunaan didalam Html anda 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

Cara mengatur ukuran Icon Font Awesome

Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class fa-lg, fa-1x, fa-2x, fa-3x, fa-4x, fa-5x dan berikut contohnya:

fa-home	fa-home	fa-lg
fa-home	fa-home	fa-2x
fa-home	fa-home	fa-3x
fa-home	fa-home	fa-4x
fa-home	fa-home	fa-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 mengatur letak posisi dan menambahkan border (garis tepi) Icon Font Awesome

Untuk mengatur letak posisi Font Awesome gunakan class pull-right atau pull-left dan untuk menambahkan border atau garis tepi pada Font Awesome gunakan class fa-border .

fa-home	letak Icon sebelah kiri menggunakan pull-left
fa-home	letak Icon sebelah kanan menggunakan pull-right
fa-home	Menambahkan 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 membuat daftar/ list style Icon Font Awesome

Untuk mengatur list style atau membuat daftar Font Awesome gunakan Class fa-ul dan fa-li dan menentukan nama Icon.

• fa-check
• fa-arrow-right
• fa-angle-double-right
• fa-tag

 <ul class="fa-ul">

  <li><i class="fa-li fa fa-check"></i>fa-check</li>

  <li><i class="fa-li fa fa-arrow-right"></i> fa-arrow-right</li>

  <li><i class="fa-li fa fa-angle-double-right "></i>fa-angle-double-right </li>

  <li><i class="fa-li fa fa-tag"></i>fa-tag</li>

 </ul>

Cara mengatur Rotasi Icon Font Awesome

Untuk mengatur rotasi atau memutar Icon Font Awesome gunakan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di putar atau rotate.

normal	Gambar Icon dalam posisi normal
fa-rotate-90	Icon di rotate atau diputar 90 derajat
fa-rotate-180	Gambar Icon di rotate atau diputar 180 derajat
fa-rotate-270	Gambar Icon di rotate atau diputar 270 derajat
fa-flip-horizontal	Gambar Icon di balik arah horisontal
icon-flip-vertical	Gambar 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 membuat Icon Font Awesome menjadi Animasi

Untuk membuat Icon Font Awesome bisa seperti animasi atau bergerak memutar gunakan class fa-spin . Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-cog agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di browser IE8 - IE9.

fa-spinner

fa-refresh

fa-cog

fa-asterisk

fa-star

<i class="fa fa-spinner fa-spin"></i> fa-spinner

<i class="fa fa-refresh fa-spin"></i> fa-refresh

<i class="fa fa-cog fa-spin"></i> fa-cog

<i class="fa fa-asterisk fa-spin"></i> fa-asterisk

<i class="fa fa-star fa-spin"></i> fa-star

2. Cara Menggunakan Icon Font Awesome didalam CSS

Dalam penggunaan Icon Font Awesome didalam CSS anda perlu menambahkan Elemen Pseudo :before atau bisa juga dengan Elemen Pseudo :after dan menuliskan value content dari icon tersebut. 

sebagai contoh saya akan membuat Info Box sederhana dengan element pseudo :before

Membuat box info menggunakan Icon Font Awesome

Cara penulisan dari contoh diatas :

.slideseo-box{background:#0089E0;color:#fff;position:relative;padding:10px 40px}

.slideseo-box:before{

    content: "\f164";

    font-family: FontAwesome;

    color: #333;

    font-size: 20px;

    position: absolute;

    top: 5px;

    left: 10px;

}

<div class="slideseo-box">

Membuat box info menggunakan Icon Font Awesome

</div>

Untuk daftar list Icon Font awesome akan saya lanjutkan di postingan selanjutnya,Sekian...