Daftar Icon Font Awesome dan CSS Value Content V4.0.3 Plus Cara Pemakainnya pada blogspot

Daftar Icon Font Awesome dan CSS Value Content V4.0.3 Plus Cara Pemakainnya pada blogspot 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;
}