CARA MENGGUNAKAN ICON FONT AWESOME PADA CSS DAN HTML

Cara Menggunakan Icon Font Awesome Pada CSS Dan HTML - Mungkin anda sudah melihat beberapa icon yang menempel pada bagian-bagian template blog zaputra.com ini, dan hampir semua template menggunakan Icon ini untuk mempercantik tampilan blog dan saya pastikan blog anda juga menggunakannya.

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

1. Gratis alias Free , bisa digunakan untuk komersial maupun non komersial.
2. Ringan, bisa mempercepat loading blog karena biasanya yang digunakan adalah image atau gambar ikon.
3. Tidak Perlu Menggunakan Javascript.
4. Mudah untuk diberikan Style CSS dan bisa di warnai.
5. Icon akan terlihat sempurna di dalam ukuran font berapapun.
6. Compatible dengan Bootsrap 3.0.0.
7. Support dengan Browser lama.

Daftar Icon Font Awesome

Daftar Kode Icon Font Awesome Lengkap

Cara Menggunakan Icon Font Awesome ada 2 cara :

1. Cara Menggunakan Icon Font awesome didalam HTML.
2. Cara 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 membuat daftar/ list style Icon Font Awesome

Untuk mengatur list style atau membuat daftar Font Awesome gunakan Class fa-ul dan fa-lidan 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 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 menggunakanpull-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 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

contoh cara membuat box info menggunakan Icon Font Awesome

Cara penulisan dari contoh diatas

.zaputra-box{background:#1D9D74;color:#fff;position:relative;padding:10px 40px}
.zaputra-box:before{
    content: "\f028"; 
    font-family: FontAwesome;
    color: #333;
    font-size: 20px;
    position: absolute;
    top: 5px;
    left: 10px;
}

<div class="zaputra-box">
contoh cara membuat box info menggunakan Icon Font Awesome
</div>

Sebenarnya masih banyak caranya menggunakan font awesome tergantung dari anda menguasai kode Css dan Html, kalo saya sich masih belum begitu menguasai kode jadi tutorial ini untuk dasar aja dan untuk mengembangkannya tergantung kreatifitas bagaimana untuk mendesign template agar terlihat cantik dengan menggunakan Icon Font awesome ini.

Untuk daftar list Icon Font awesome silahkan kunjungi halaman di bawah ini :

Daftar Lengkap Icon Font Awesome Dan Css Value Content

Demikian tutorial Cara Menggunakan Icon Font Awesome Dalam CSS Dan HTML. barangkali ada yg masih bingung bisa berkomentar dibawah. Dan semoga artikel ini bermanfaat bagi sahabat blogger..... 

SHARE THIS

Tweet