Cara Menggunakan Font Awesome

Font Awesome adalah icon dan  tombol yang berbasis font atau huruf. Biasanya ada di label atau di dropdown menu . Font awesome bisa menjadi alternative bagi blog yang sering menggunakan ikon dari image.

FONT AWESOME UPDATE : VERSI 4.4.0

Untuk menggunakan Font Awesome  ini sobat harus simpan kode ini diatas </head>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Cara Menggunakan Font Awesome

Untuk menggunakan Font Awesome, sobat harus menambahkan tag <i> kemudian class nya gunakan nama icon.

cara penulisannya :

<i class="icon-coffee"></i>

Memperbesar Ukuran

<i class="icon-google-plus-sign"></i>
<i class="icon-google-plus-sign icon-large"></i>
<i class="icon-google-plus-sign icon-2x"></i>
<i class="icon-google-plus-sign icon-3x"></i>
<i class="icon-google-plus-sign icon-4x"></i>

Bordered & Pulled Icons

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.

<i class="icon-bullhorn icon-3x pull-left icon-border"></i>

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri,

dan icon-border untuk membuat kotak diluar icon bendera.  Ini hanya sekedar contoh,

untuk lebih variatif silahkan dicoba sendiri.

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

<i class="icon-quote-right icon-4x pull-left icon-muted"></i>

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, 

dan icon-muted untuk membuat ikon menjadi warna muda.

Annimated Spinner

Untuk membuat ikon berputar, seperti animasi loading gunakan kode icon-spin

   Ini contoh icon-spinner yang diputar.

<i class="icon-spinner icon-spin icon-2x"></i>

Ini contoh <code>icon-spinner</code> yang diputar.

Rotated & Flipped

Ikon juga dapat diputar dengan menentukan derajat putaran, juga bisa dibalik secara vertikal atau horizontal .

  ikon normal
  ikon diputar 90 derajat
  ikon diputar 180 derajat
  ikon diputar 270 derajat
  ikon dibalik secara horizontal
  ikon dibalik secara vertikal

<i class="icon-shield"></i>&nbsp; ikon normal
<i class="icon-shield icon-rotate-90"></i>&nbsp; ikon diputar 90 derajat
<i class="icon-shield icon-rotate-180"></i>&nbsp; ikon diputar 180 derajat
<i class="icon-shield icon-rotate-270"></i>&nbsp; ikon diputar 270 derajat
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; ikon dibalik secara horizontal
<i class="icon-shield icon-flip-vertical"></i>&nbsp; ikon dibalik secara vertikal

Stacked Icons

Ikon juga dapat ditumpuk, Gunakan kode icon-stack sebelum tag ikon, dan kode icon-stack-base sebagai background / di bawah.

icon-twitter di atas icon-check-empty
icon-flag di atas icon-circle

<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i><i class="icon-twitter"></i>

</span><span style="margin-left: 8px;">icon-twitter di atas icon-check-empty
</span>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>

<i class="icon-flag icon-light"></i></span>

<span style="margin-left: 8px;">icon-flag di atas icon-circle
</span>

Button

Icon juga dapat diterapkan pada button / tombol.

<ul class="button">
<li><a class="btn1" href="#"><i class="icon-repeat"></i> Reload</a></li>
<li><a class="btn2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li>
<li><a class="btn2" href="#"><i class="icon-info-sign"></i> Info</a></li>
<li><a class="btn1" href="#"><i class="icon-trash icon-large"></i> Delete</a></li>
</ul>

Masih Banyak cara-cara untuk menerapkan Ikon Awesome

Share this post