Blogger

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

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *