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

Ad 468 X 60

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.

17 comments:

  1. Berarti tanpa harus masuk kes edited foto ya gan.

    ReplyDelete
  2. tipsnya keren banget nih, bisa untuk semakin mempercantik blog saya, terima kasih gan tipsnya

    ReplyDelete
  3. Hanya Share Artikel di FB, tiap ada yang Klik dibayar Rp250 (Bonus Daftar Rp. 1500)
    Daftar Di http://goo.gl/r3Y65b
    Bukti Pembayaran/WD/PO Dari Member/Anggota
    http://i.imgur.com/G2FHF69.jpg
    Untuk Panduan Daftar Dan Penggunaan
    http://goo.gl/14h9QB
    Bukti WD/Pembayaran PTC Probux Bulan Maret 2014
    http://prntscr.com/34hml3
    Yang Berminat Bisa Daftar Dan Join Di
    http://goo.gl/I1i0RI
    Bukti WD/Pembayaran PTC Wad Ojooo
    http://i.imgur.com/joiV3hs.png
    Yang Berminat Bisa Daftar Dan Join Di
    http://goo.gl/9wufTl
    Bukti Pembayaran Fusebux
    http://oi57.tinypic.com/2uyoe3c.jpg
    Yang Berminat Bisa Daftar Dan Join Di
    http://goo.gl/0ZTawY
    Program Affiliasi Membayar Paling Tinggi Di Indonesia (Rp. 10.000/referal)
    Ini Bukti Komisi Pembayaran Untuk Member
    http://i.imgur.com/yx49XJx.jpg
    Buruan Daftar Di http://goo.gl/wqwVSj
    Linkbucks (Penyingkat URL)
    Daftar Di http://goo.gl/s0cUgG
    id.ipanelonline (Survey Online)
    Daftar Di http://goo.gl/boUiaf
    id.viewfruit (Survey Online)
    Daftar Di http://goo.gl/K44GIa
    Bukti WD/Pembayaran/Payout
    http://i.imgur.com/t14wjrD.jpg

    ReplyDelete
  4. Kalau begitu jadi lebih bagus ya mas... :D makasih udah di share.

    ReplyDelete
  5. terima kasih tutorialnya, sangat bermanfaat

    ReplyDelete
  6. Terima kasih infonya sangat bermanfaat, akan saya coba langsung di blog saya perawatan wajah

    ReplyDelete
  7. terimakasih atas informasinya, sangat bermanfaat :)

    ReplyDelete
  8. Game Poker dan Domino serta Bandar Ceme Terbesar di Indonesia
    Www.JagoanPoker.com
    Hadir dengan Hadiah Jackpot TERBESAR dan PERTAMA di Indonesia.
    Jackpot Rp. 1.000 dapatkan 30 Juta Rupiah
    Jackpot Rp. 2.000 Dapatkan 60 JuTa Rupiah
    Telah di Percayai lebih dari 10.000 member aktif di Indonesia.
    Game Poker dan Domino dan Bandar Ceme dalam 1 Website.
    Gabung segera dengan www.JagoanPoker.com

    ReplyDelete
  9. Terimakasih banyak gan, sangat bermanfaat sekali tutorialnya..

    http://obatasliindonesia.com/pengobatan-glaukoma-paling-mujarab/

    ReplyDelete
  10. apa font awesome bisa dirubah? soalnya ganti font iconnya gak muncul

    ReplyDelete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.