Selain berformat PNG atau GIF, kita dapat pula menggunakan ikon dengan format SVG (Scalable Vector Graphic) yang biasanya dipaketkan menjadi sejenis font, tidak jauh berbeda dengan jenis huruf Arial atau Georgia yang biasa kita gunakan untuk memormat teks di aplikasi pengolah kata seperti Office Word.
Salah satu kelebihan penggunaan ikon berjenis font ini pada desain web atau blog adalah fleksibilitasnya yang dapat mengikuti ukuran huruf lainnya seperti yang didefiniskan pada dokumen CSS menggunakan properti
font-size. Ini tentu berbeda dengan ikon berformat PNG atau GIF yang akan tampak pecah jika ukuran lebar atau tingginya diperbesar beberapa kali.Selain fleksibilitas ukuran, ikon jenis font ini dapat dimodifikasi lebih lanjut dengan bantuan CSS, seperti mengubah warna serta memberinya bayangan (drop shadow). Jadi, kita tidak perlu repot memodifikasi ikon-ikon tersebut dengan Photoshop atau Adobe Illustrator untuk disesuaikan dengan kebutuhan. Kita hanya perlu menyunting properti-properti CSS yang berhubungan dengan ikon bersangkutan.
Salah satu ikon jenis SVG yang cukup populer saat ini adalah Font Awesome. Versi terbaru Font Awesome adalah 4.0.3. Terdapat lebih dari 360 ikon yang bisa kita gunakan pada versi ini, seperti ikon facebook, twitter, camera, user, dan sebagainya.
Kita tidak perlu mengunduh ikon-ikon ini jika kita akan menggunakannya di Blogger. Kita cukup menambahkan alamat CDN (Content Delivery Network) CSS-nya pada tempat blog kita. Dengan menggunakan CDN ini, kita tidak menyimpan file CSS ini di Blogger, tetapi hanya memanggilnya.
Adapun alamat CDN Font Awesome dapat diperoleh di bootstrapcdn.com, seperti terlihat pada gambar di bawah ini.
Selanjutnya, simpan alamat yang telah disalin tersebut di bagian sebelum
</head> dari templat Blogger Anda.Untuk mulai menggunakan Font Awesome ini, cukup tambahkan tag
<i class=""></i> pada elemen yang akan diberi ikon. Nilai untuk class diisi dengan fa kemudian diikuti dengan nama ikon seperti yang dapat dilihat di halaman daftar ikon Font Awesome.
Sebagai contoh kita akan menambahkan ikon tag pada masing-masing nama label artikel. Silakan masuk ke halaman dasbor Blogger. Pada menu di sebelah kiri, klik Template kemudian pilih Edit HTML. Pada kotak edit HTML yang muncul, cari bagian
data:post.labels. Anda bisa mencarinya dengan menakan Ctrl + F untuk lebih mudahnya. Dalam contoh ini saya menggunakan templat bawaan Blogger, Simple, karya Josh Peterson.Berikut adalah tampilan elemen untuk menampilkan label posting dari templat Simple di atas. Saya menyisipkan ikon di bagian setelah
<a expr:href='data:label.url' rel='tag'>. Perhatikan bagian yang diberi tanda panah!
Hasilnya dapat dilihat pada gambar di bawah ini.
Untuk mengganti ikon dengan bentuk lain, misalnya ikon file, cukup ganti
fa-tag dengan fa-file, menjadi <i class="fa fa-file"></>.
Anda dapat menambahkan ikon-ikon lain pada elemen-elemen lainnya dengan cara yang sama seperti dijelaskan di atas.