Mengenal Icon Fonts
Assalamualaikum warakhmatullahi wabarakatuh.
Bismillahirahmanirrahim.
Ini pertama kalinya saya menulis tulisan yang berhubungan dengan bidang pekerjaan saya. Saya sebenarnya seorang yang masih pemula dalam dunia website, tapi tak ada salahnya berbagi. Langsung saja yuk.
Icon adalah sebuah gambar atau simbol yang menggambarkan suatu fungsi atau aktivitas yang merupakan hal penting dalam sebuah desain. Selain itu icon dapat memperjelas informasi dari suatu fungsi tertentu dan juga memperindah tampilan. Pertama kali kita mengenal icon, yaitu dari gambar logo sebuah aplikasi. Namun sekarang icon bisa terdapat dalam tampilan aplikasi, website, desain dan lain-lain. Sedangkan font adalah model atau gaya dalam penulisan huruf, angka, simbol maupun tanda khusus yang juga tak kalah penting dalam setiap tulisan dan desain.
Jadi, dari kedua arti kata diatas, bisa disimpulkan bahwa Icon Fonts adalah font yang direpresentasikan dalam bentuk icon-icon tertentu. Perbedaan dari font dan icon fonts adalah pada isinya, font berisi bentuk model atau gaya dari semua huruf, angka, simbol dan tanda-tanda khusus, sedangkan icon fonts berisi icon-icon tertentu yang jumlahnya bisa berbeda-beda. Dalam tulisan ini saya akan membahas icon fonts dalam konteks website.
Kenapa Icon Fonts?
Pernahkah anda mendesain sebuah icon lalu menambahkannya ke dalam sebuah tampilan website? Saya harap anda pernah melakukannya. Haha.
Ada banyak cara atau metode untuk menambahkan icon ke dalam tampilan website. Kita bisa menambahkannya dengan menggunakan gambar atau image yang berformat PNG (Portable Network Graphics) dengan tag <img>. Contoh kodenya dapat dilihat di bawah ini.
<img src=”icon.png” alt=”icon” />Tapi bagaimana kalau kita harus memperbesar ukuran icon hingga 10 kali lebih besar? Yang terjadi adalah gambar pecah dan terlihat tidak bagus. Karena gambar berformat PNG memiliki basis bitmap. Itulah salah satu kelemahan menggunakan gambar berformat PNG. Selain format PNG ada format lain, yaitu format SVG (Scaleable Vector Graphics). SVG adalah gambar yang berbasis vektor sehingga dapat diskalakan atau diperbesar dan diperkecil. Gambar dengan format SVG dapat kita buat dengan editor yang berbasis vektor seperti Adobe Illustrator, Corel Draw dan Figma. Karena berbasis vektor, gambar dengan format ini tidak akan mengalami pecah ketika diperbesar atau diperkecil. Tapi bagaimana ketika kita ingin mengubah warna? Tentu tidak ada cara untuk bisa mengubah warna jika kita menambahkan gambar dengan tag <img>.
Adapun cara lain untuk dapat menambahkan icon dengan format SVG tersebut ke dalam tampilan website. Gambar dengan format SVG merupakan sebuah kumpulan kode-kode yang dapat dibaca oleh browser, sehingga kita dapat menyalin isi dari kode-kode tersebut ke dalam kode HTML, ini disebut dengan inline SVG karena kita menambahkan kode SVG tersebut dalam baris kode HTML. Contoh kodenya dapat dilihat di bawah ini.
<svg width=”21" height=”21" viewBox=”0 0 21 21" version=”1.1" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">
<g id=”Canvas” transform=”translate(6679 -3531)”>
<g id=”Lingkaran”>
<use xlink:href=”#path0_fill” transform=”translate(-6679 3531)”/>
</g>
</g>
<defs>
<path id=”path0_fill” d=”M 21 10.5C 21 16.299 16.299 21 10.5 21C 4.70101 21 0 16.299 0 10.5C 0 4.70101 4.70101 0 10.5 0C 16.299 0 21 4.70101 21 10.5Z”/>
</defs>
</svg>Namun cara ini pasti akan terasa rumit karena kode dari SVG akan tergantung pada gambaran objeknya. Apabila gambar tersebut memiliki banyak objek, kode SVG yang dihasilkan pun akan semakin banyak, belum lagi kita harus mengerti setiap elemen kode SVG tersebut jika ingin mengubah warna atau bentuk dari sebuah elemen dalam SVG dan hal tersebut menjadi tidak efektif dan efisien.
Berbeda dengan icon fonts, yang terdiri dari sekumpulan icon telah dibundel dalam sebuah font dan memiliki pengatur style dalam CSS. Sehingga dalam penggunaannya icon font akan sangat mudah digunakan. Contoh kode dapat dilihat di bawah ini.
<i class=”nama-icon”></i>Kita dapat menampilkan icon tertentu dengan menambahkan nama class icon. Tentu cara ini akan sangat efektif dan efisien. Ketika kita ingin menampilkannya kembali kita hanya perlu menambahkan kode diatas disertai dengan nama classnya. Ketika kita ingin memperbesar ukuran atau mengubah warna ataupun menambahkan efek bayangan, kita bisa menambahkan style ke dalam CSS.
Namun dari setiap kelebihan pasti memiliki kelemahan. Dengan menggunakan icon fonts, icon yang dihasilkan hanya sebatas memiliki satu warna. Jika ingin menambahkan icon yang memiliki banyak warna disetiap elemen SVG, saya sarankan untuk menggunakan tag <img>.
Bagaimana cara mendapatkan Icon Fonts?
Banyak website yang menyediakan icon fonts secara gratis maupun berbayar, seperti Font Awesome dan Ionicons.
Selain itu, jika kita ingin icon-icon dengan desain sendiri diubah menjadi icon fonts, banyak website yang dapat membantu membuat icon fonts tersebut, seperti Fontastic, Icomoon dan Typicons.
Mungkin di tulisan selanjutnya saya akan membahas bagaimana membuat icon fonts dengan salah satu tool dari website yang sebutkan diatas.
Sekian tulisan dari saya, mohon maaf kalau ada salah-salah kata ataupun kata-kata yang kurang berkenan di hati pembaca. Semoga tulisan ini dapat bermanfaat untuk semua. Terima kasih.
Referensi:
