23 September 2014

Cara Menggunakan Ikon Font Awesome di Blog

Cara Menggunakan Ikon Font Awesome di Blog


Font Awesome merupakan kumpulan icon dan  tombol yang berbasis font. 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 menggunaka 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-rocket"></i>
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... tanya sama Mbah. Google aja

Semoga Tutorial Cara Menggunakan Ikon Font Awesome di Blog Bermanfaat untuk sobat !

http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic