Friday, February 21, 2014
Bagaimana Cara Kostumisasi Ikon Font Awesome di Blogger?
Silahkan baca artikel kami sebelumnya mengenai cara memasang Font Awesome di Template Blogger!
untuk menggunakan ikon, gunakan tag <i> seperti di bawah ini.
<i class="fa fa-home"></i>
Anda dapat mengubah bagian yang di highlight dengan nama dari setiap kelas ikon lain yang Anda suka. Daftar dari semua ikon yang tersedia bisa Anda lihat di sini!
Costumisasi CSS
Anda dapat membuat CSS rule yang baru untuk salah satu kelas yang ditentukan. Sebagai contoh:
.fa-home {
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}
ini adalah ikon sebelum styling
ini adalah ikon yang sama setelah styling
Kadang-kadang, menggunakan CSS mungkin bukan cara terbaik untuk melakukan sesuatu. Font Awesome menyediakan beberapa fitur tambahan!
Mengatur Ukuran Ikon
Untuk mengatur ukuran ikon dengan faktor konstan, katakanlah dua kali atau empat kali, cukup tambahkan aturan seperti di bawah ini:
<i class="fa fa-home fa-2x"></i>
<i class="fa fa-home fa-3x"></i>
<i class="fa fa-home fa-4x"></i>
<i class="fa fa-home fa-5x"></i>
Harap dicatat bahwa tidak semua ikon dapat diubah ukurannya dengan cara ini.
Spinning Ikon
Sama seperti ketika mengubah ukuran ikon, Anda dapat menggunakan kelas yang disebut fa-spin untuk memberikan efek memutar pada ikon. Sekali lagi, ini hanya bekerja dengan baik pada beberapa ikon seperti fa-cog dan fa-refresh.
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Akan terlihat seperti berikut.
Merubah Orientasi
Anda dapat dengan mudah membalik atau memutar ikon dengan cara yang sama. Berikut ini adalah kelas yang digunakan.
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-flip-horizontal"></i> <!--Flip Horizontally-->
<i class="fa fa-shield fa-flip-vertical"></i> <!--Flip Vertically-->
<i class="fa fa-shield fa-rotate-90"></i> <!--Rotate 90 Degrees Clockwise-->
<i class="fa fa-shield fa-rotate-180"></i> <!--Rotate 180 Degrees-->
<i class="fa fa-shield fa-rotate-270"></i> <!--Rotate 90 Degrees Anti-clockwise-->
Daftar
Jika Anda ingin menggunakan bullets and numberings yang lain, Anda dapat dengan mudah menggantinya dengan ikon! Berikut ini contohnya:
- Home Icon
- Square Icon
- Checked Square Icon
Berikut adalah cara untuk menggunakan ikon dalam daftar:
<ul class="fa-ul">
<li><i class="fa-li fa fa-home"></i>Home Icon</li>
<li><i class="fa-li fa fa-square"></i>Square Icon</li>
<li><i class="fa-li fa fa-check-square"></i>Checked Square Icon</li>
</ul>
Menumpuk Ikon
Kadang-kadang hal ini sangat berguna untuk menggabungkan dua ikon bersama-sama untuk menciptakan keseluruhan ikon baru. Sebagai contoh, sebuah ikon bendera bisa diletakkan di atas ikon lingkaran untuk menandakan sesuatu. Anda dapat menggabungkan banyak pasang ikon untuk membentuk suatu simbol baru. Berikut adalah beberapa contohnya.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-check fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
Mereka akan terlihat seperti ini:
Jika Anda telah melakukan percobaan dan menemukan sesuatu yang baru, silahkan masukkan komentar Anda di sini. Maka, berbagi itu sangatlah indah. Terimakasih semoga bermanfaat dan Anda menyukainya.
