Bagaimana Cara Kostumisasi Ikon Font Awesome Di Blogger?

Font Awesome yaitu font berbasis icon yang sangat menakjubkan yang berisi kualitas scalable vector graphics dan sanggup dipakai 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 ihwal font yang ikonik ini yaitu bahwa sanggup dikostumisasi dengan CSS, yang berarti Anda sanggup memakai beberapa kelas pre-built atau menulis dengan gaya kostumisasi Anda sendiri untuk diadaptasi dengan situs Web Anda. Dalam postingan ini kami akan berbicara ihwal cara kostumisasi ikon ini untuk Anda.

Silahkan baca artikel kami sebelumnya mengenai cara memasang Font Awesome di Template Blogger!

Cara Memasang Font Ikon yang Menakjubkan di Template Blogger Anda!

untuk memakai ikon, gunakan tag <i> menyerupai di bawah ini.

<i class="fa fa-home"></i>

Anda sanggup mengubah bab 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 sanggup membuat CSS rule yang gres untuk salah satu kelas yang ditentukan. Sebagai contoh:

.fa-home {
 font-size: 32px;
 color: #033;
 padding: 8px;
 border: 1px solid #000;
 float:left;
}

ini yaitu ikon sebelum styling
ini yaitu ikon yang sama sesudah styling
Kadang-kadang, memakai CSS mungkin bukan cara terbaik untuk melaksanakan 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 hukum menyerupai 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 sanggup diubah ukurannya dengan cara ini.

Spinning Ikon

Sama menyerupai dikala mengubah ukuran ikon, Anda sanggup memakai kelas yang disebut fa-spin untuk memperlihatkan efek memutar pada ikon. Sekali lagi, ini hanya bekerja dengan baik pada beberapa ikon menyerupai fa-cog dan fa-refresh.

<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Akan terlihat menyerupai berikut.

   

Merubah Orientasi

Anda sanggup dengan gampang membalik atau memutar ikon dengan cara yang sama. Berikut ini yaitu 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 memakai bullets and numberings yang lain, Anda sanggup dengan gampang menggantinya dengan ikon! Berikut ini contohnya:

• Home Icon
• Square Icon
• Checked Square Icon

Berikut yaitu cara untuk memakai 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 mempunyai kegunaan untuk menggabungkan dua ikon gotong royong untuk membuat keseluruhan ikon baru. Sebagai contoh, sebuah ikon bendera sanggup diletakkan di atas ikon bundar untuk menunjukan sesuatu. Anda sanggup menggabungkan banyak pasang ikon untuk membentuk suatu simbol baru. Berikut yaitu 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 menyerupai ini:

Jika Anda telah melaksanakan percobaan dan menemukan sesuatu yang baru, silahkan masukkan komentar Anda di sini. Maka, menyebarkan itu sangatlah indah. Terimakasih biar bermanfaat dan Anda menyukainya.