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

0 Response to "Cara Menggunakan Font Awesome"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel

Iklan Bawah Artikel