Jika membahas tentang custom font, ada banyak jenis dan kategorinya. Font typography untuk mempercantik tulisan web/blog atau deskripsi produk. Ada juga font khusus desain logo yang kental dengan filosofi disetiap lekukan fontnya. Nah, yang akan saya bahas saat ini yaitu font icon untuk memenuhi kebutuhan web desain ataupun para blogger.
Font icon yang paling terkenal mungkin saat ini adalah Fontawesome. Mudah diintegrasikan dengan front-end framework Bootstrap, kelengkapan koleksi icon, gratis dan segala macam kelebihan lainnya menjadikan fontawesome semakin populer. Tapi bagi beberapa orang yang sangat memperhatikan kesederhanaan dan kenyamanan bagi pengunjung dalam mengakses web/blog yang kita desain, fontawesome dirasa kurang cocok.

Terlalu lengkap, lama dimuat dan banyak icon yang tidak terpakai menjadi alasan utama untuk tidak menggunakan font ini. Sedangkan bagi pengguna Bootstrap, secara default sudah tersedia Glyphicon. Tapi sayangnya koleksi iconnya kurang lengkap seperti tidak adanya social icon (twitter, google dsb). Sehingga pengguna Bootstrap harus menambahkan font icon sendiri dan ini justru akan pula menambah icon yang tidak terpakai. Hal inilah yang menjadi dasar bagi web designer untuk terampil dalam penggunaan font icon agar setiap element dapat sepenuhnya digunakan secara maksimal.

Fontastic.me website khusus untuk mengcustom font icon. Custom font icon, pilih icon, compile dan publish, semua bisa dengan mudah dilakukan di fontastic.me. Ingat, hanya icon yang dibutuhkan saja yang kita compile, dan ini yang membuat font icon racikan kita jadi istimewa. Format font file hasil kompilasi juga lengkap, seperti .eot, .ttf, woff dan svg.

Membuat Font Icon

Daftar

Sangat mudah, buka halaman http://fontastic.me/#signup dan cukup masukkan email kita lalu ketikkan password baru (bukan password email). Hati-hati, saya curiga dengan kemudahan registrasi ini, karena bisa mengecoh kalau kita lengah dan memasukkan password email kita.

Memilih Icon

Setelah registrasi maka akan langsung login dan otomatis membuat file font baru bernama untitled font. Biarkan dulu, pilih saja icon sesuai kebutuhan, scroll terus kebawah maka banyak pilihan. Di bagian pertama ada fontawesome v.4.4 (icon versi lawas dan kurang lengkap dibanding v.4.7). Bisa juga mencari icon dari koleksi font, dengan cara klik menu Add more icon. Lalu pilih font mana saja yang mau di tambahkan ke halaman home dengan klik tombol Active, atau Deactive untuk menonaktifkan font yang ada di home.

Upload icon

Ada juga fitur upload font icon koleksi kita, misal kita ingin mengambil beberapa icon yang ada di salahsatu font icon hasil download di website lain, maka bisa di upload ke fontastic.me. Perlu di ingat, format font icon yang bisa di upload hanya .svg dan filenya harus benar-benar berformat glyph, bukan icon persatuan yang belum menjadi font glyph.
Contoh: misal kita punya fontawesome versi terbaru dengan koleksi icon yang lebih lengkap dan kita butuh beberapa icon baru tersebut, maka bisa di upload ke fontastic.me.


Caranya: Pilih menu Add more icon, lalu klik tombol Import icon dan pilih font-icon*.svg
Untuk Css class mapping font icon yang kita upload tidak dapat diubah dan sedikit membuat bingung, ini jadi tantangan sendiri karena kita harus melakukan beberapa trick agar bisa mudah memanggil iconnya. Contoh CSS class mapping font-icon hasil upload: fontawesome-webfont-2 ini adalah icon Instagram, nah kalau kita memanggilnya di html maka akan kesulitan karena penamaannya tidak mudah di ingat.

Modifikasi font

Penamaan font bisa diubah sesuai keinginan kita juga, dan yang paling penting yaitu penamaan css class prefix icon, seperti icon home bisa kita panggil dengan (jqh-home). Nah css class prefix yang digunakan yaitu (jqh-). Caranya:
Pilih menu Modify font, nanti muncul popup lalu ubah nama font dan css class preffixnya, lalu klik tombol save.

Custom CSS Class Mapping

Seperti penjelasan di atas, font-icon hasil upload sendiri, class mappingnya agak membingungkan. Nah, di menu Customize ini kita bisa mengubahnya agar mudah di ingat. Caranya, pilih menu Customize dan pilih class mapping mana saja yang perlu di ubah. Disini kita tidak perlu klik tombol Save.

Custom Character Mapping

Ini berfungsi untuk memanggil character di html, jadi pada dasarnya font-icon ini adalah font, yang mempunya sifat seperti font pada umumnya seperti kalau di zoom tidak akan pecah dan dapat di panggil per-huruf. Nah, Character Mapping ini adalah penamaan huruf, jadi setiap huruf harus unik tidak boleh sama dengan yang lain. Jangan pula bentrok dengan huruf di font yang terinstall di komputer atau font lainnya.
Caranya: Masih di menu Customize, scroll ke bawah akan ada Character Mapping, di sebelah kanannya ada Link Reset Character, klik link tersebut dan pilih LUA. Nanti Character icon akan menjadi berurutan mulai dari U+E000 dan seterusnya. Kita bisa mengubah urutannya (3 angka terakhir), atau bisa juga membiarkan seperti itu. Karena dengan mengubahnya dari Latin ke LUA ini sudah cukup, agar tidak bentrok dengan font (typography) lain. Contoh, untuk memanggil icon home di html, hanya perlu menuliskan characternya seperti , 003 adalah urutan character icon home.

Publish

Setelah memilih icon, mengubah nama font, css class prefix, class css mapping dan character mapping. Maka selanjutnya adalah publish custom icon kita. Terdapat 2 pilihan jenis font yang akan kita publish (compile), yaitu Icon font (font lengkap .eot, .ttf, .woff, .svg beserta cssnya) dan pilihan kedua yaitu SVG Sprite (hanya font format .svg dan cssnya). Disarankan pilih font-icon lengkap, caranya:
Pilih menu Publish
Lalu di bawahnya ada Tab Icon font, (penggunaan online) klik tab itu dan klik juga tombol Publish berwarna kuning, lalu copy link css di bawahnya. Sedangkan untuk penggunaan offline, maka klik tombol Download berwarna putih di sebelah tombol publish tadi. Maka otomatis akan mendownload file format zip. Yang didalamnya terdapat berbagai macam format font dan 1 file css. Dalam tahap ini Font icon sudah bisa dipakai.
Disarankan memilih download font untuk penggunaan offline dulu, karena font-icon custom yang kita buat tadi masih perlu pengaturan cssnya, mulai dari ukuran icon, posisi dan pewarnaan icon.

Cara menggunakan font icon

Jika font sudah di compile, maka sudah siap digunakan. Cukup panggil css font tersebut dan tuliskan class font di element terpilih menggunakan span atau div, seperti: <span class="icon jqh-home"></span> tapi pasti icon akan sangat kecil dan posisinya masih berantakan. Sebab itu butuh sedikit konfigurasi CSS.

Konfigurasi dasar CSS font-icon

Konfigurasi dasar disini maksudnya hanya sebatas warna dasar font dan ukuran serta posisi.

Penjelasan:
Alasan memakai css class .icon bersamaan dengan css icon adalah untuk mengatur style icon itu sendiri.
display:inline-block artinya agar bisa sejajar dengan teks/icon di sampingnya, dan jika di perlukan maka posisi bisa ada di baris baru.
vertical-align:-15% ini berfungsi untuk mengatur posisi icon agar sejajar (secara vertical) dengan element yang ada di sampingnya. Karena tanpa pengaturan ini, secara default maka icon akan berada terlalu ke atas.
font: normal normal normal 14px/1 mmbb-font ini untuk menentukan ukuran icon, 14px/1yaitu ukuran font 14px dan line-height (jarak baris) adalah 10px (atau 1em). mmbb-fontadalah nama font. Selebihnya bisa di cari di google.
Konfigurasi class .icon seperti di atas sudah cukup untuk pegunaan icon didalam teks berukuran 12px sampai 16px, tapi kalau icon berada di dalam font-size lebih dari itu, maka perlu di beri style tambahan karena ukuran font-icon tidak otomatis mengikuti ukuran font disampingnya. Maka dari itu di perlukan tambahan css class untuk mengatur agar ukuran font-icon mengikuti font disampingnya. Disini saya menambahkan 3 class, icon-sm, icon-md dan icon-lg.

Penjelasan: Sebenarnya dari ketignya hanya berbeda ukuran, line-height (jarak baris) dan posisi icon.
Untuk sekedar mengikuti ukuran font yang ada di sampingnya, cukup tambahkan class icon-sm. Contoh: <span class="icon jqh-comment-o icon-sm"></span> maka otomatis ukuran font-icon mengikuti font disampingnya.

Sedangkan untuk mengubah ukuran icon khusus untuk icon itu sendiri ataupun ukuran beberapa icon berdampingan, maka bisa di pakai class icon-md atau icon-lg. Contoh penggunaannya adalah link social media milik kita, misal kita punya 3 akun sosial media, dan ukuran iconnya ingin agar terlihat lebih besar, maka bisa menggunakan class icon-md atau icon-lg tersebut.

Untuk penggunaan font icon yang lebih kompleks, membutuhkan konfigurasi style lebih lanjut. Misal untuk menu sharing, maka sebaiknya kita menaruh div id sebagai parent element. Sehingga lebih memudahkan kita memanipulasi style icon tersebut secara keseluruhan, tidak satu-persatu. Perlu diingat, icon yang kita custom ukurannya kadang tidak sama. Walaupun style icon sama-sama bulat, tapi posisi logo (atas, kanan, bawah, kiri) kadang tidak sama antar icon. Apalagi jika font-icon racikan kita didapatkan dari berbagai macam jenis font. Juga menambahkan warna dari setiap icon social media, ataupun efek perubahan warna ketika di hover.
Update lain kali..penambahan warna icon social media populer.. Jika membahas tentang custom font, ada banyak jenis dan kategorinya. Font typography untuk mempercantik tulisan web/blog atau deskripsi p...