Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Friday, February 21, 2014

Bagaimana Cara Kostumisasi Ikon Font Awesome di Blogger?

kostumisasi-font-awesome-di-blogger
Font Awesome adalah font berbasis icon yang sangat menakjubkan yang berisi kualitas scalable vector graphics dan dapat digunakan untuk mengoptimalkan ikon di situs Anda. Kami telah membahas bagaimana cara menerapkan Font Awesome ini ke dalam template Blogger Anda (atau halaman Web HTML), dan kami melihat bahwa salah satu fitur terbaik tentang font yang ikonik ini adalah bahwa bisa dikostumisasi dengan CSS, yang berarti Anda dapat menggunakan beberapa kelas pre-built atau menulis dengan gaya kostumisasi Anda sendiri untuk disesuaikan dengan situs Web Anda. Dalam postingan ini kami akan berbicara tentang cara kostumisasi ikon ini untuk Anda.

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-1g"></i>
   <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>&nbsp; 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.

Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang.