Cara Memasang Font Awesome di Blog
Pada kesempatan hari ini, saya akan bicara tentang desain sebuah blog. Untuk membuat desain blog menjadi menarik dan indah, kita memerlukan sebuah font yang menarik juga. Font Awesome merupakan font yang tepat untuk membuat desain blog menjadi lebih menarik. Font Awesome adalah sekumpulan tombol atau ikon dalam bentuk font.
Pada kesempatan hari ini, saya akan bicara tentang desain sebuah blog. Untuk membuat desain blog menjadi menarik dan indah, kita memerlukan sebuah font yang menarik juga. Font Awesome merupakan font yang tepat untuk membuat desain blog menjadi lebih menarik. Font Awesome adalah sekumpulan tombol atau ikon dalam bentuk font. Dalam hal ini, ikon yang terletak di blog tidak akan menjadi gambar yang membuat loading menjadi berat. Namun, ikon akan menjadi font yang menarik di blog. Untuk membuat sebuah Font Awesome, diperlukan sebuah elemen CSS dan pemanggilnya. Langsung saja kita masuk ke langkah-langkah membuatnya:
- Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
- Pada menu Dashboard, Pilih Template --> Edit HTML.
- Cari kode </head> dengan cara Ctrl+F.
- Kemuadian salin kode dibwah ini tepat dibawahnya.
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> Cara Menggunakan Font Awesome
Untuk pertama kali, sobat harus memasang kode
<i class="Kode Font Awesome">Judul</i>.
cara penulisannya :
<i class="icon-group"></i>
cara penulisannya :
<i class="icon-heart"></i> Memperbesar Size Font Awesome
<i class="icon-heart"></i>
<i class="icon-heart icon-large"></i>
<i class="icon-heart icon-2x"></i>
<i class="icon-heart icon-3x"></i>
<i class="icon-heart icon-4x"> Rotate & Flipped Font Awesome
Font Awesome dapat diputar secara vertikal dan horizontal seperti dibawah ini.
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-hand-up icon-large icon-rotate-90"></i> ikon diputar 90 derajat
<i class="icon-hand-up icon-large icon-rotate-180"></i> ikon diputar 180 derajat
<i class="icon-hand-up icon-large icon-rotate-270"></i> ikon diputar 270 derajat
<i class="icon-hand-up icon-large icon-flip-horizontal"></i> ikon dibalik horizontal
<i class="icon-hand-up icon-large icon-flip-vertical"></i> ikon dibalik vertikal Animasi Font Awesome
Font Awesome dapat digunakan untuk animasi loading pada website. Cocok untukicon-spinner dan icon-refresh.
Ini adalah contoh
icon-refresh yang diputar.<i class="icon-refresh icon-spin icon-2x"></i> Ini contoh icon-refresh yang diputar. Stacked Font Awesome
Font Awesome juga dapat ditumpuk dengan font lain. Gunakan kode
icon-stack sebelum tag ikon, dan kode icon-stack-base sebagai background / di bawah.
icon-caret-left di atas icon-check-empty
icon-caret-right di atas icon-circle
icon-caret-right di atas icon-circle
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i><i class="icon-caret-left"></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-caret-right icon-light"></i></span><span style="margin-left: 8px;">icon-flag di atas icon-circle
</span> Bordered Font Awesome
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-flag icon-3x pull-left icon-border"></i>
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-group icon-4x pull-left icon-muted"></i>Button Font Awesome
Ikon pada Font Awesome dapat dimanfaatkan untuk mempercantik tampilan sebuah tombol. <ul class="button">
<li><a class="demo" href="#" target="_blank"><i class="icon-gamepad"></i> Games</a></li>
<li><a class="download" href="#" target="_blank"><i class="icon-gift"></i> Hadiah</a></li>
<li><a class="download" href="#" target="_blank"><i class="icon-globe"></i> Maps</a></li>
<li><a class="demo" href="#" target="_blank"><i class="icon-star"></i> Bintang</a></li>
</ul> Efek Pada Font Awesome
Silahkan sobat berkresi dengan penambahan efek pada Font Awesome. Berikut contoh kecilnya:Sekian tutorial kali ini, semoga bermanfaat bagi kita semua.
