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-lgfa-1xfa-2xfa-3xfa-4xfa-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 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-homeletak Icon sebelah kiri menggunakan pull-left
fa-homeletak Icon sebelah kanan menggunakan pull-right
 fa-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 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.
 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 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...

Posting Komentar

0 Komentar