Font Awesome Icon

sedikit berbagi dan sekedar melengkapi Posting pada blog saya, bagi sahabat blogger yang hoby menDesain Template, Icon Awesome mungkin sebuah beberapa solusi icon untuk mempercantik atau melengkapi tampilan blog sobat, Icon V4.0.3 ini adalah icon update terbaru dari versi Sebelumnya, ada 11 tambahan icon baru dalam versi ini. oke lagnsung saja kita ketahap pemasanggannya.




Untuk dapat menggunakan icon ini, langkah pertama yang harus sobat lakukan ialah menambah styleshet dibawah ini dan menyimpannya diatas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Cara penggunaanya dalam HTML sobat hanya perlu menambahkan tag <i> kemudian class dari nama icon yang dipilih. Misalnya untuk cara penulisannya seperti dibawah ini:


 fa-glass 

<i class="fa fa-glass "></i> fa-glass

Untuk memperbesar ukuran iconnya, maka sobat hanya perlu menambahkan class fa-lg, fa-1x, fa-2x, fa-3x, fa-4x, fa-5x dan berikut contohnya:

 fa-glass 
 fa-glass 
 fa-glass 
 fa-glass 
 fa-glass 

<p><i class="fa fa-glass  fa-lg"></i> fa-glass </p>

<p><i class="fa fa-glass  fa-2x"></i> fa-glass </p>
<p><i class="fa fa-glass  fa-3x"></i> fa-glass </p>
<p><i class="fa fa-glass  fa-4x"></i> fa-glass </p>
<p><i class="fa fa-glass  fa-5x"></i> fa-glass </p>

untuk membuat icon berada di sebelah kanan atau sebelah kiri Gunakan class pull-right atau pull-left , dan fa-border untuk membuat border pada icon tersebut.

Ini sebuah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left menjadi pull-right. 

<i class="fa  fa-glass fa-2x pull-left fa-border"></i>

Ini sebuah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left menjadi pull-right.

untuk membuat icon agar bisa berputar gunakan class fa-spin. class ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9.

  

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Untuk memutar atau membalik icon, gunakan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate (putar).


  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  icon-flip-vertical 

<i class="fa fa-shield"></i>&nbsp; normal<br>

<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical

Diatas adalah cara untuk menuliskan Font Awesome dalam sebuah markup HTML, dengan cara lain sobat juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen :before dengan menuliskan value content dari icon tersebut. Berikut gambaran penggunaan Font Awesome pada pseudo elemen CSS:

.element{

    position: relative;
}
/* ganti tulisan berwarna merah pada value content */
.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--custom pada CSS--*/
    color: #333;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Share this post