Dwi Agung Wicaksono
Faceblog 
Teman pertama Cara menggunakan icon font Awesome di Blog Saturday, July 22, 2017
How to add and use font awesome icons on Blogger???
Font Awesome merupakan kumpulan icon dan tombol yang berbasis font. Artinya, ketika sobat membutuhkan ikon di blog, tidak lagi menggunakan gambar / image yang tentunya akan lebih mempercepat loading blog sobat.
Untuk bisa menggunakan Font Awesome ini, sobat harus menyimpan CSSnya di atas
</head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Cara menggunakan Font Awesome
Untuk menggunakan Font Awesome, sobat harus menambahkan tag<i> kemudian class nya gunakan nama icon.
cara penulisannya :
<i class="icon-css3"></i>
cara penulisannya :
<i class="icon-html5"></i>
Memperbesar Ukuran
<i class="icon-off"></i>
<i class="icon-off icon-large"></i>
<i class="icon-off icon-2x"></i>
<i class="icon-off icon-3x"></i>
<i class="icon-off icon-4x"></i>
<i class="icon-off icon-large"></i>
<i class="icon-off icon-2x"></i>
<i class="icon-off icon-3x"></i>
<i class="icon-off 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
<i class="icon-flag 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-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-left 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.
Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.
Animated Spinner
Untuk membuat ikon berputar, seperti animasi loading gunakan kodeicon-spin bagus digunakan pada icon-spinner dan icon-refresh
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
<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 kodeicon-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>
<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.
Reload
Checkout
Info
Delete
<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>
Bukan hanya pada button, icon Font Awesome ini bisa disimpan di berbagai tempat, seperti menu, menu dropdown, form, dan-lain-lain...
Untuk CSS dan HTMLnya silahkan diacak2 sendiri sob....
Semoga bermanfaat dan selamat berkreasi....
Resource : http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
Kritik dan Saran Anda di sini
Hashtag:
#Berita
#JavaScript
Anda dan lainnya
Silahkan tinggalkan Pesan Anda disini jika ada hal yang ingin di sampaikan, tulis nama asli Anda, situs web asli Anda dan pesan Anda. Jika tidak dengan bersedih hati Pesan Anda akan Saya hapus. :)
ReplyDelete