[Love & Seks] Cara Kostumisasi Ikon Font Awesome Di Blogg

Lubang Warak - Font Awesome adlh font berbasis icon yg sangat menakjubkan yg berisi kualitas scalable vector graphics dan dpt digunakan untk mengoptimalkan ikon di situs Anda. Kami telah membahas bagaimana cara menerapkan Font Awesome ni ke dlm template Blogger Anda (atau halaman Web HTML), dan kami melihat bahwa salah satu fitur terbaik tentang font yg ikonik ni adlh bahwa bisa dikostumisasi dgn CSS, yg berarti Anda dpt menggunakan beberapa kelas pre-built / menulis dgn gaya kostumisasi Anda sendiri untk disesuaikan dgn situs Web Anda. Dalam postingan ni
kami akan berbicara tentang cara kostumisasi ikon ni untk Anda.

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

untk menggunakan ikon, gunakan tag <i> seperti di bawah ini.

<i></i>

Anda dpt mengubah bagian yg di highlight dgn nama dari tiap kelas ikon lain yg Anda suka. Daftar dari semua ikon yg tersedia .

Costumisasi CSS

Anda dpt membuat CSS rule yg baru untk salah satu kelas yg ditentukan. Sebagai contoh:

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

ni adlh ikon sebelum styling
ini adlh ikon yg sama setelah styling
Kadang-kadang, menggunakan CSS mungkin bukan cara terbaik untk melakukan sesuatu. Font Awesome menyediakan beberapa fitur tambahan!

Mengatur Ukuran Ikon

Untuk mengatur ukuran ikon dgn faktor konstan, katakanlah dua kali / empat kali, cukup tambahkan aturan seperti di bawah ini:

<i></i>
<i></i>
<i></i>
<i></i>
<i></i>

Harap dicatat bahwa tak semua ikon dpt diubah ukurannya dgn cara ini.

Spinning Ikon

Sama seperti ketika mengubah ukuran ikon, Anda dpt menggunakan kelas yg disebut fa-spin untk memberikan efek memutar pd ikon. Sekali lagi, ni hanya bekerja dgn baik pd beberapa ikon seperti fa-cog dan fa-refresh.

<i></i>
<i></i>

Akan terlihat seperti berikut.

Merubah Orientasi

Anda dpt dgn mudah membalik / memutar ikon dgn cara yg sama. Berikut ni adlh kelas yg digunakan.

<i></i>&nbsp; normal<br>
<i></i> <!--Flip Horizontally-->
<i></i> <!--Flip Vertically-->
<i></i> <!--Rotate 90 Degrees Clockwise-->
<i></i> <!--Rotate 180 Degrees-->
<i></i> <!--Rotate 90 Degrees Anti-clockwise-->

Daftar

Jika Anda ingin menggunakan bullets and numberings yg lain, Anda dpt dgn mudah menggantinya dgn ikon! Berikut ni contohnya:

• Home Icon
• Square Icon
• Checked Square Icon

Berikut adlh cara untk menggunakan ikon dlm daftar:

<ul>
<li><i></i>Home Icon</li>
<li><i></i>Square Icon</li>
<li><i></i>Checked Square Icon</li>
</ul>

Menumpuk Ikon

Kadang-kadang hal ni sangat berguna untk menggabungkan dua ikon bersama-sama untk menciptakan keseluruhan ikon baru. Sebagai contoh, sebuah ikon bendera bisa diletakkan di atas ikon lingkaran untk menandakan sesuatu. Anda dpt menggabungkan banyak pasang ikon untk membentuk suatu simbol baru. Berikut adlh beberapa contohnya.

<span>
<i></i><i></i>
</span>
<span>
<i></i><i></i>
</span>
<span>
<i></i><i></i>
</span>

Mereka akan terlihat seperti ini:

Jika Anda telah melakukan percobaan dan menemukan sesuatu yg baru, silahkan masukkan komentar Anda di sini. Maka, berbagi itu sangatlah indah. Terimakasih semoga bermanfaat dan Anda menyukainya.

source : http://lubangwaraktetel.blogspot.com, http://hipwee.com, http://flickr.com

Posted by Unknown