Jika sebelumnya saya sudah membahas perihal cara penggunaaan font awsome terbaru yakni font awsome5 yakni untuk mempercantik font menu navigasi sebuah blog, sekarang saya akan menjelaskan sebuah trik yang juga sangat bermanfaat untuk lebih mempercantik desain sebuah templat blogger yaitu membuat font awsome tersebut menjadi berwarna warni tanpa harus merugikan loading blog.
Semua ikon fa fa awsome bisa di perkaya dengan warna dengan menambahkan sedikit trik pada kodenya dengan kode tambahan: gradient-icon baiklah mari kita mulai penjelasannya:
MEMPERCANTIK IKON AWSOME DENGAN STYLE WARNA GRADASI
Pernah memperhatikan template template yang didesain untuk wordpress blog? Atau pernah melihat karya karya envanto yang sangat "mobile" namun dengan loading cepat tanpa kehilangan keindahannya?. Disinilah peranan dan sentuhan seorang desainer dan seorang programmer sekaligus diperlukan dalam pembuatan sebuah template yang indah, gegas, dan cepat.
Bukan hanya template bergaya infinite yang dominan warna gradasi pada headrnya akan tetapi setiap ikon dapat kita berikan warna gradasi sesuka hati dan menurut selera kita asalkan mengikuti syarat ini: Mengkombinasikan kode css dengan ikon "fa fa awsome" dan atau sejenis dengan itu.
Masuk ke pengaturan blog:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"/>
Save terlebih dahulu template. Dan lalu untuk percobaan kembali ke pengaturan blogger - pilih add widget - pilih HTML/java script, lalu pastekan kode ikon fa fa awsome yang telah kami pilih dibawah ini kedalam kotak widget HTML/javascript tadi atau lihat gambar dibawah.
<i class="fab fa-facebook-square"></i>
Save terlebih dahulu template. Jika mau geser saja widgetnya biar berada diatas postingan, maka kode tersebut akan berbentuk ikon facebook seperti dibawah ini, masih dalam ujud ikon yang berwarna hitam putih.
Agar Widget tadi berwarna gradasi (kombinasi dua warna) kita perlu menambahkan kode dibawah ini dan meletakannya diatas kode: ]]></b:skin>, begini trik pembuatan perintah kode CSS-nya:
.gradient-icon {
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}
Perhatikan letak posisi kode perintah pemanggil tambahan yang diberi warna merah. Sedangkan yang warna biru adalah ukuran besar ikon awsome. Maka ikon akan berganti warna dari hitam dan putih menjadi gradasi! Lihat gambar:
Cobakan kepada semua ikon fa fa awsome ada ratusan kode kode ikon sejenis yang gratis dan bebas di pergunakan di Internet.
Jika kita ingin mengganti warna gradasi atau kombinasi warna maka sobat dapat melakukannya dengan merubah kode css yang telah kita letakan di atas kode ]]></b:skin> diatas. Perhatikan kode warna HEX yang saya sorot dengan warna merah muda:
.gradient-icon {
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}
Ganti saja kode warna dengan kode warna css, cari daftar kode warna warni di internet, semuanya gratis.
Trik ini telah diuji dan berlaku terhadap hampir semua browser-browser besar: chrome, edge, firefox, opera mobile, safari Apple dll.
Contoh nyata bisa anda lihat pada menu navigasi blog ini yang ikonnya telah menjadi dua warna dengan gaya kombinasi "gradasi"
editblogtema.net
Pernah memperhatikan template template yang didesain untuk wordpress blog? Atau pernah melihat karya karya envanto yang sangat "mobile" namun dengan loading cepat tanpa kehilangan keindahannya?. Disinilah peranan dan sentuhan seorang desainer dan seorang programmer sekaligus diperlukan dalam pembuatan sebuah template yang indah, gegas, dan cepat.
Bukan hanya template bergaya infinite yang dominan warna gradasi pada headrnya akan tetapi setiap ikon dapat kita berikan warna gradasi sesuka hati dan menurut selera kita asalkan mengikuti syarat ini: Mengkombinasikan kode css dengan ikon "fa fa awsome" dan atau sejenis dengan itu.
Masuk ke pengaturan blog:
- Pilih tema
- Pilih edit HTML
- Pada halaman editor HTML:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"/>
Save terlebih dahulu template. Dan lalu untuk percobaan kembali ke pengaturan blogger - pilih add widget - pilih HTML/java script, lalu pastekan kode ikon fa fa awsome yang telah kami pilih dibawah ini kedalam kotak widget HTML/javascript tadi atau lihat gambar dibawah.
<i class="fab fa-facebook-square"></i>
.gradient-icon {
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}
Dan langkah berikutnya adalah kembali ke kode ikon fa fa awsome yang berada didalam widget HTML/java script yakni:
<i class="fa fa-facebook-official fa-10x" aria-hidden="true"></i>
Edit dengan menambahkan: "gradient-icon" jadi kode fa fa awsomenya akan menjadi seperti ini:
<i class="fa fa-facebook-official gradient-icon fa-10x" aria-hidden="true"></i><i class="fa fa-facebook-official fa-10x" aria-hidden="true"></i>
Edit dengan menambahkan: "gradient-icon" jadi kode fa fa awsomenya akan menjadi seperti ini:
Jika kita ingin mengganti warna gradasi atau kombinasi warna maka sobat dapat melakukannya dengan merubah kode css yang telah kita letakan di atas kode ]]></b:skin> diatas. Perhatikan kode warna HEX yang saya sorot dengan warna merah muda:
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}
Ganti saja kode warna dengan kode warna css, cari daftar kode warna warni di internet, semuanya gratis.
Trik ini telah diuji dan berlaku terhadap hampir semua browser-browser besar: chrome, edge, firefox, opera mobile, safari Apple dll.
Contoh nyata bisa anda lihat pada menu navigasi blog ini yang ikonnya telah menjadi dua warna dengan gaya kombinasi "gradasi"
.png)
