Trend desain website dan blog terus berkembang. Di antaranya trend flat
design, yang mensyaratkan sebuah website/blog tampil secara elegan tanpa
elemen yang menonjol dan berjejal. Website yang biasanya dihiasi dengan
berbagai gambar ikon juga beralih ke penggunaan ikon berbasis font,
sebut saja Glyphicons, Foundation Icon Fonts, IcoMoon, Fontello, dll. Yang terakhir, yang lagi ngetrend: Font Awesome Icons. Platform icon ini cepat populer lantaran bersifat CSS toolkit, sehingga mudah digunakan dan tidak berat.
Apa itu Font-Awesome Icons?
Font Awesome adalah font ikonik dan merupakan bagian dari
pengembangan Bootstrap (Twitter). Icon-icon yang digunakan berbasis
gambar vector yang bisa diatur ukurannya sesuai ukuran font (Scalable
Vector Graphic). Ikon-ikon ini bisa dikostumisasi sedemikian rupa
(dengan styling) dan digunakan oleh website apa saja, termasuk pada
template Blogger. Ukurannya sangat kecil, mudah dikostumisasi, mudah
dipakai dengan berbagai modifikasi sesuai platform, dan bisa diatur
ukurannya dengan tampilan resolusi yang tetap baik. Desainnya sangat
profesional sehingga membuat layout tampak elegan. Maka Font-Awesome
bisa ditebak menjadi dambaan setiap web designer maupun developer.
- Koleksi icon Font-Awesome terus bertambah, sehingga semua kebutuhan icon akan terus terpenuhi.
- Ringan, mudah dikostumisasi.
- Kita bisa menggunakan library font-awesome (CSS) dari CDN Font-Awesome. Jadi tidak perlu repot-repot upload dan host sendiri.
- Gratis. :D
Ada 2 tahap untuk menggunakan icon Font Awesome di Blogger:
- Menambahkan link stylesheet eksternal dari Font-Awesome.
- Memasang Snippet Font Awesome
Memasang dan Memanggil External Stylesheet Font-Awesome
Beberapa tutorial lain meminta pembaca untuk memasang stylesheet yang
sudah baku, sehingga ketika font-awesome diupdate, maka stylesheet yang
digunakan tidak akan mengandung icon baru. Akibatnya, apabila
Font-Awesome menambahkan icon baru, anda tidak bisa memanggilnya.
Oleh karena itu, saya sarankan sobat tetap update dengan link stylesheet
yang digunakan oleh Font-Awesome dan rajin-rajinlah untuk menyimak
update terbaru di sana.
Untuk saat ini, Font-Awesome berada pada versi 4.2.0. dengan 479 ikon.
Dan external link untuk memanggil stylesheetnya hingga saat ini adalah:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Untuk terus update dengan stylesheet terbaru,
pantau halaman ini. Saya juga akan terus update stylesheet di atas apabila mengalami upgrade versi.
Sekarang, kita beranjak ke cara memasangnya:
a. Buka
dashboard > template > edit HTML. Letakkan stylesheet eksternal di atas ke dalam
<head>.
Boleh di bagian mana saja asal masih di dalam tag itu. Tapi agar mudah
dan cepat dipanggil terlebih dahulu, terutama apabila sobat pakai
custom fonts, letakkan di bagian yang lebih atas. Contoh:
<head>
...
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
...
...
...
...
</head>
b. Setelah yakin terpasang dengan benar, save template.
Cara Memasang dan Menggunakan Snippet Font Awesome
Sobat bisa menggunakan ikon font awesome ini di mana saja. Sebagai contoh, saya menggunakannya di bagian menu.
Formula dari memunculkan font awesome ini adalah dengan menggunakan tag
<i> dan menambahkan class utama (fa) dan class untuk memanggil
ikon tertentu.
<i class="fa fa-home"></i>
Contoh di atas digunakan untuk menampilkan ikon
Untuk melihat library berbagai ikon, gunakan
halaman ini sebagai cheatsheet lengkapnya. Bookmark agar mudah diakses kedepannya.
Note: untuk penerapan pada bagian post, gunakan mode HTML pada saat
menulis/edit. Jika dikembalikan ke "compose", sobat tidak akan melihat
apa-apa. Tapi jangan sampai terhapus tidak sengaja. Sobat bisa melihat
hasilnya setelah diterbitkan atau via "preview"/"pratinjau. Ini juga
berlaku pada widget HTML/Javascript.
Untuk penggunaan icon mendampingi teks, misalnya pada menu, heading, dan
sejenisnya, gunakan spasi agar tidak bertubrukan. Ingat, tulis atau
gunakan kodenya saat menulis dalam mode HTML. Untuk menghindari
autoformat Blogger yang kadang-kadang menghapus spasi yang dibuat dengan
kunci keyboard "space". Gunakan code
. Contoh
<i class="fa fa-home"></i> teks-teks.
Agar lebih lebar, tambahkan
baru.
teks-teks.
Secara umum, warna dan ukuran icon akan menyesuaikan dengan CSS yang
menaungi elemen yang berada bersamanya. Jadi untuk saat ini, saya kira
tidak begitu dipentingkan styling dengan bentuk berbeda dan akan saya
share di post berbeda pula.
Contoh-contoh Penggunaannya
Contoh Heading Kamera
<h3><i class="fa fa-camera-retro"></i> Contoh Heading Kamera</h3>
Di dalam Link
<a href="http://buka-rahasia.blogspot.com/" target="_blank"><i class="fa fa-link"></i> Di dalam Link</a>
Next, saya akan share berbagai modifikasi-nya disesuaikan dengan fungsi
Font-Awesome untuk elemen-elemen layout tertentu. That's it for now. :)
Android
merupakan sistem operasi untuk smartphone yang mengalami perkembangan
sangat pesat.Sistem operasi Android dikembangkan oleh Google yang
bersifat open source.
semoga bermanfaat :)
Mungkin
anda pernah mengalami proses shutdown yang begitu lama pada saat anda
ingin mematikan komputer anda. Memang proses shutdown yang memakan waktu
begitu lama akan sangat menjengkelkan bagi kita dan terlebih lagi jika
kita memang ingin segera mematikan komputer tersebut karena ada
pekerjaan yang lain.
Microsoft Excel atau Microsoft Office Excel
adalah sebuah program aplikasi lembar kerja spreadsheet yang dibuat dan
didistribusikan oleh Microsoft Corporation untuk sistem operasi Microsoft 
