Cara Memasang Dan Menggunakan Font Awesome di Blog - Sebelumnya Saya selaku admin blog ini mengucapkan Selamat hari raya Idul Fitri 1346 H Mohon maaf lahir dan batin ya.
Font Awesome adalah kumpulan icon dan tombol yang berbasis pada text atau font. Jadi, ketika sobat membutuhkan ikon di blog, sobat perlu lagi repot menyisipkan gambar yang tentunya akan lebih mempercepat blog sobat.
Memasang Font Awesome :
Untuk memasang Font Awesome pada blog sobat, Sobat harus Menyimpan kode CSS dibawah ini tepat diatas kode </head><link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet"></link>
Menggunakan Font Awesome :
Untuk menggunakan Font Awesome, sobat harus menambahkan tag <i> kemudian class nya gunakan nama icon
cara penulisannya :
<i class="fa fa-play"></i>
cara penulisannya :
<i class="fa fa-pause"></i>
Memperbesar Ukuran
<i class="fa fa-play"></i> <i class="fa fa-play fa-2x"></i> <i class="fa fa-play fa-3x"></i> <i class="fa fa-play fa-4x"></i>
Bordered & Pulled Icons
Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan fa-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.
<i class="fa fa-smile-o-left fa-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.
Memasang Animasi
Ini contoh fa fa-spinner yang diputar.
<i class="fa fa-spinner fa-spin fa-3x"></i> Ini contoh fa fa-spinner yang diputar.
Rotated & Flipped
Ikon Font Awesome juga dapat Sobat putar dengan menentukan derajat putar, dan Sobat juga bisa membaliknya secara vertikal maupun 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="fa fa-bolt"></i> : ikon normal <i class="fa fa-bolt fa-rotate-90"></i> : ikon diputar 90 derajat <i class="fa fa-bolt fa-rotate-180"></i> : ikon diputar 180 derajat <i class="fa fa-bolt fa-rotate-270"></i> : ikon diputar 270 derajat <i class="fa fa-bolt fa-flip-horizontal"></i> : ikon dibalik secara horizontal <i class="fa fa-bolt fa-flip-vertical"></i> : ikon dibalik secara vertikal
Button
Sobat juga dapat menerapkan ikon pada tombol / button.<div id="wrap"> <a href="#" class="btn" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a> <a href="#" class="btn down" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a> </div>
Ikon Awesome juga dapat ditambahkan di beberapa berbagai tempat, seperti menu, menu dropdown, form, widget, dan lain-lain.
Nah itulah Cara memasang dan menggunakan Font Awesome, semoga bermanfaat dan selamat berkreasi ya sobat blogger.
http://irhamantapblog.blogspot.com/2015/07/cara-memasang-dan-menggunakan-font-awesome-di-blog.html
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
Penulisan markup di komentar Disqus
- Untuk menulis huruf bold silakan gunakan
atau. - Untuk menulis huruf italic silakan gunakan
atau. - Untuk menulis huruf underline silakan gunakan
. - Untuk menulis huruf strikethrought silakan gunakan
- Untuk menulis kode HTML silakan gunakan
atau atau
, dan silakan parse kode pada kotak parser di bawah ini.
Peraturan Dalam Berkomentar :
● Marilah Kita Budayakan Berkomentar Sesudah Membaca Artikel.
● Dilarang Menghina, Promosi Atau Iklan, Menyelipkan Link Aktif Dan Non Aktif
● Dilarang Berkomentar Yang Mengandung Unsur Pornografi, Spam, Sara, Politik, Profokasi.
● Budayakan Berkomentar Dengan Sopan, Bijak, dan Sesuai Artikel (Dilarang Berkomentar Diluar Topic,)
● Untuk komentar diluar topik silahkan menuju ke halaman Forum. EmoticonEmoticon