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.
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
Ikon juga dapat diputar dengan menentukan derajat putaran, juga bisa dibalik secara vertikal atau horizontal .
Ikon juga dapat ditumpuk, Gunakan kode
Icon juga dapat diterapkan pada button / tombol.
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
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> ikon normal
<i class="icon-shield icon-rotate-90"></i> ikon diputar 90 derajat
<i class="icon-shield icon-rotate-180"></i> ikon diputar 180 derajat
<i class="icon-shield icon-rotate-270"></i> ikon diputar 270 derajat
<i class="icon-shield icon-flip-horizontal"></i> ikon dibalik secara horizontal
<i class="icon-shield icon-flip-vertical"></i> 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
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