Memasang Plugin Font Awesome Di Blogger
Memasang Plugin Font Awesome di Blogger - Font Awesome merupakan kumpulan icon dan tombol yang berbasis font. Maksudnya dikala anda membutuhkan sebuah ikon anda tidak perlu membutuhkan gambar yang pastinya akan menciptakan loading blog semakin lebih ringan.
Cara penggunaan Font Awesome ini anda harus menambahkan aba-aba CSS berikut diatas aba-aba
disini aku memakai versi 3.1.1 untuk versi lain anda sanggup kunjungi Icons FontAwesome atau Font Awesome.
Cara Penggunaan Font Awesom ini anda harus menambahkan tag
</head><link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>disini aku memakai versi 3.1.1 untuk versi lain anda sanggup kunjungi Icons FontAwesome atau Font Awesome.
Cara Penggunaan Font Awesom ini anda harus menambahkan tag
<i> lalu class nya dengan memakai nama iconBaca Juga
Cara Penulisannya:
Cara penulisannya:
Memperbesar Ukuran Font Awesome
Bordered & Pulled Icons
Gunakan aba-aba
Animated Spinner
Untuk menciptakan ikon berputar, menyerupai animasi loading gunakan aba-aba
Ini pola
Rotated & Flipped
Dapat diputar sesuai derajat juga sanggup dibalik dengan horizontal dan vertikal
ikon normal
ikon diputar 90 derajat
ikon diputar 180 derajat
ikon diputar 270 derajat
ikon dibalik secara horizontal
ikon dibalik secara vertikal
Stacked Icons
Ikon juga sanggup ditumpuk, Gunakan aba-aba
Button/Tombol
Anda sanggup gunakan Font Awesome ini pada penempatan button
Penambahan Efek
Anda sanggup kombinasikan pada dampak lainnya menyerupai pola rotation dibawah ini:
Silahkan anda sanggup Edit sendiri CSS dan HTML untuk dipelajari. Dan agar bermanfaat.
Cara penulisannya:
<i class="icon-google-plus-sign"></i><i class="icon-html5"></i>Memperbesar Ukuran Font Awesome
<i class="icon-frown"></i> <i class="icon-frown icon-large"></i> <i class="icon-frown icon-2x"></i> <i class="icon-frown icon-3x"></i> <i class="icon-frown icon-4x"></i>Gunakan aba-aba
pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk menciptakan kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.<i class="icon-thumbs-up icon-3x pull-left icon-border"></i>Gunakan aba-aba <code>pull-right</code> atau <code>pull-left</code> untuk disimpan di kanan atau dikiri, dan icon-border untuk menciptakan kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk menciptakan ikon menjadi warna muda.<i class="icon-quote-left icon-4x pull-left icon-muted"></i>Gunakan aba-aba <code>pull-right</code> atau <code>pull-left</code> untuk disimpan di kanan atau dikiri, dan icon-muted untuk menciptakan ikon menjadi warna muda.Animated Spinner
Untuk menciptakan ikon berputar, menyerupai animasi loading gunakan aba-aba
icon-spin cantik dipakai pada icon-spinner dan icon-refreshIni pola
icon-spinner yang diputar.<i class="icon-spinner icon-spin icon-2x"></i> Ini pola <code>icon-spinner</code> yang diputar.Rotated & Flipped
Dapat diputar sesuai derajat juga sanggup dibalik dengan horizontal dan vertikal
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-meh"></i> ikon normal <i class="icon-meh icon-rotate-90"></i> ikon diputar 90 derajat <i class="icon-meh icon-rotate-180"></i> ikon diputar 180 derajat <i class="icon-meh icon-rotate-270"></i> ikon diputar 270 derajat <i class="icon-meh icon-flip-horizontal"></i> ikon dibalik secara horizontal <i class="icon-meh icon-flip-vertical"></i> ikon dibalik secara vertikalStacked Icons
Ikon juga sanggup ditumpuk, Gunakan aba-aba
icon-stack sebelum tag ikon, dan aba-aba 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-facebook"></i></span><span style="margin-left: 8px;">icon-facebook di atas icon-check-empty </span> <span class="icon-stack"> <i class="icon-circle icon-stack-base"></i><i class="icon-beer icon-light"></i></span><span style="margin-left: 8px;">icon-beer di atas icon-circle </span>Button/Tombol
Anda sanggup gunakan Font Awesome ini pada penempatan button
<ul class="buttonx"> <li><a class="btnx1" href="#"><i class="icon-repeat"></i> Reload</a></li> <li><a class="btnx2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li> <li><a class="btnx2" href="#"><i class="icon-info-sign"></i> Info</a></li> <li><a class="btnx1" href="#"><i class="icon-trash icon-large"></i> Delete</a></li> </ul>Penambahan Efek
Anda sanggup kombinasikan pada dampak lainnya menyerupai pola rotation dibawah ini:
https://teritorinulled.blogspot.com/search?q=daftar-ikon-font-awesome-dan-css-value
