Assalamu'alaikum... Arikel hari ini membahas tentang Web Font dengan lisensi Open Source. Web Font Open Source membuat desainer web secara radikal mengubah halaman desain dan gaya typographic. Ini membuat bahan-bahan untuk mendesain halaman web menjadi semakin melimpah dengan hasil yang memuaskan baik untuk desainer itu sendiri atau bagi orang lain. Halaman web menjadi lebih indah, menarik dan dinamis, membuat para pengunjung tidak cepat bosan. Karakter pengunjung web itu bermacam-macam, ada yang memang suka dengan isi (content) yang dibahas, atau pun sekedar menikmati desain halaman web tersebut.
Jika anda seorang desainer web dan sedang mencari Icon Font yang 100% gratis maka anda membuka halaman artikel yang tepat. Kali ini penulis mengumpulkan icon-icon font yang terbaik dan paling banyak digunakan didunia desain web. Setiap paketan ikon dalam artikel ini disediakan benar-benar gratis dengan format file vektor SVG dan format webfont. Desainer web bisa memanfaatkan ikon format SVG untuk mulai merencanakan desain web pada perangkat lunak vektor atau yang sejenis. Sedangkan ikon dengan format webfont tinggal ditambahkan kedalam stylesheet dihalaman web yang sedang anda rancang.
Dibawah ini 10 web icon font yang bisa kita unduh atau langsung kita gunakan pada halaman web. Tetapi sebagian situs penyedia web icon font dibawah ini memang ada yang belum menyertakan web icon font pada CDN, sehingga kita harus menyediakan sendiri hosting file untuk menyimpang file ikon tersebut.
1. Captain Icon
Web Font yang satu ini sangatlah unik jika dibanding dengan ikon yang lainnya. Web Icon ini dibuat oleh Mario dell Valle dari Spanyol. Web Font ini dibuat dengan proyek sumber terbuka (Open Source) yang artinya siapa saja boleh mengunduh, menggunakan, melakukan modifikasi dengan atau tanpa memberitahu pembuatnya, namun demikian akan lebih baik kita selalu melakukan konformasi kepada sang pembuat sebagai bentuk penghargaan kepadanya. Web Font ini selain open source juga disimpan di situs GitHub yang terkenal sangat mendukung proyek Open Source.
Semua ikon Captain Icon dibuat dengan tangan sehingga coretan-coretan tangan pada icon ini begitu tampak, berbeda dengan icon lain yang cenderung dibuat dengan perangkat lunak komputer. Selain itu dalam paketannya juga tersedia beberapa format icon yang disertakan, ada PNG, EPS, PSD, SVG dan Font. Hal ini tentu menjadi daya tarik tersendiri, selain bisa digunakan pada halaman web, icon ini juga bisa digunakan pada proyek-proyek vektor. Gaya Captain Icon sangat cocok digunakan pada situs kreatif yang lebih menonjolkan sisi khas coretan tangan, untuk situs resmi tentunya menjadi tidak relevan.
2. Octicons
Sering berkunjung ke halaman GitHub? Bagi mereka yang sering berkunjung pasti pernah melihat ikon-ikon yang digunakan oleh GitHub. Dan ternyata GitHub kemudian membagikan paketan Icon yang biasa mereka gunakan pada situs GitHub untuk para desainer web. Paketan ikon yang dibuat oleh GitHub diberi nama Octicons sesuai dengan brand mereka yaitu Octocat. Pada saat artikel ini ditulis, Octicons sudah memasuki versi 8.1.0. yang terdiri dari 178 ikon dengan beberapa icon dasar yang sering digunakan.
Paketan ikon pada Octions dibuat dengan sederhana sehingga dapat bekerja sempurna hampir pada semua jenis antarmuka situs. Jadi cocok untuk para web desainer yang lebih mengutamakan kesederhanaan dan kecepatan loading web.
3. Font Awesome
Web Font senior yang sudah malang melintar di dunia desain web, yang hampir setiap desainer web di dunia pernah menggunakan bahkan mungkin masih banyak yang menggunakan Web Font ini. Font Awesome sudah tersedia gratis selama bertahun-tahun dan digunakan secara luas dihampir setiap halaman situs yang pernah kita kunjungi. Font Awesome bisa dikatakan sebagai pelopor dunia Icon Font pertama yang menggunakan lisensi Open Source ketika saat itu masih sangat langka para desainer icon mau berbagi dengan gratis. Selama ada yang gratis kenapa harus berbayar? Silahkan unduh Font Awesome di GitHub untuk keperluan proyek anda.
Ikon Font Awesome begitu fleksibel, pada desainer web dengan mudah dapat mengubah ukuran dan mengelolanya langsung melalui CSS. Kita dapat pula mengubah warna, latar belakang, bayangan, gradasi warna dan banyak hal lainnya dengan menggunakan CSS. Sampai hari ini Font Awesome merupakan sekumpulan ikon yang paling aman dan nyaman untuk digunakan dalam jangka panjang.
4. Material Design
Google benar-benar serius menggarap dunia internet, bukan hanya konsentrasi pada mesin pencari, namun Google juga berkontribusi untuk mempermudah pada desainer web salah satunya dengan Material Design. Sebenarnya Material Design lebih layak disebut sebagai aturan dasar pembuatan halaman web namun karena didalamnya juga mencakup banyak sumber daya termasuk ikon membuat Material Design Google menjadi acuan dasar pembuatan halaman web. Material Design buatan Google membawa perubahan signifikan pada dunia UX/UI. Ini tentunya mempengaruhi banyak sekali kerangka kerja (framework) dan sumber daya (resource) pada dunia desain web salah satunya dengan ketersediaan ikon web.
Paketan ini disediakan dengan gratis yang dapat diunduh pada halaman GitHub. Paketan ikon ini terdiri dari +3.500 ikon yang mencakup banyak sekali icon untuk beragam fitur antarmuka yang dinamis. Selain itu, Ikon ini dilisensikan sebagai Open Source, sangat cocok bagi siapa saja yang akan membuat halaman web dengan mengacu pada aturan dasar web yang disusun Google.
5. Typicons
Sudut bulat (rounded) dengan garis-garis yang jelas memberi kesan sederhana namun nyaman untuk dipandang. Typicons sangat cocok digunakan untuk situs bertema apapun. Typicons tersedia sekitar +300 icon unik dengan semua gaya yang sama sehingga cocok sekali untuk situs yang santai tapi serius (seperti apa sih situs yang santai tapi serius?).
Paketan Typicons tersedia gratis yang dapat diunduh di halaman GitHub. Ini juga berarti kita dapat secara langsung memasang Typicons pada situs yang kita kelola dan atau mengeditnya sesuai keinginan kita.
Typicons tidak begitu terkenal seperti icon yang sudah diulas sebelumnya, sehingga sangat sedikit web desainer yang menggunakannya, namun bukan berarti jelek ya. Typicons tidak bisa dipandang sebelah mata, karena ia termasuk Icon Font terbaik (versi saya... jangan protes!). Bahkan Typicons mampu bekerja dengan baik pada iOS dengan beberapa penyesuaian kecil dan secuil baris kode khusus.
6. Zondicon
Ini satu lagi web icon yang masuk kategori bagus dan memuaskan. Termasuk kelas premium namun disediakan dengan gratis untuk digunakan oleh siapa saja. Sedikit hal yang kurang dari Zondicon yaitu paketan tidak di simpan pada halaman GitHub, sehingga kita tidak bisa mengikuti perkembangannya dengan mudah dan kita tidak akan mampu mengakses arsip-arsip lamanya.
Namun demikian, kita bisa melihat semua ikonnya pada halaman demo, serta melihat ikon-ikon terbaru yang telah ditambahkan.
Penulis memasukan Zondicon dan merekomendasikannya webfont ini jika anda berencana membuat halaman-halaman web yang sederhana, mudah digunakan dan dapat berbaur dengan gaya yang lebih "generik".
7. Entypo
Ikon Webfont ini telah tersedia jauh sebelum webfont-webfont lain popular dan sudah menerapkan lisensi sumber terbuka. Lebih tepat (sebagai penghargaan) Entypo ini cikal bakal atau pelopor Ikon Webfont yang berani keluar batas komersil pada awal dibangun. Walau update ikon terakhir pada tahun 2015 namun Entypo masih layak dan bagus untuk melengkapi desain halaman-halaman web. Yang menarik, Icon dibagi menjadi dua bagian, yaitu: paket utama dan paket sosial. Hal ini tentunya menguntung dari sisi ukuran file pada saat load halaman. Jadi bagi yang hanya membutuhkan icon sosial, maka cukup menyertakan icon sosial pada halaman situs tanpa harus memasukan icon lain yang tidak digunakan. Hal ini mampu memperingan proses loading halaman situs.
Buka repository GitHub untuk mengunduh Icon Webfont Entypo. GitHub lagi? Ya karena menerapkan lisensi CC BY-SA 4.0 jadi para desainer lebih nyaman menyimpannya di GitHub.
8. MFG Labs
Pendatang baru di dunia ikon ini datang dari meja MFG Labs yang terinspirasi dari Dave Gandy yang terkenal dengan Font Awesome dan juga terinspirasi dari font Octicons yang dibuat oleh team GitHub. Sebagian besar webfont ikon dibuat dengan standar format yang menggunakan Private Use Area Unicode (PUA) untuk menghindari terjadinya konflik dengan kode CSS umum lainnya. Demikian pula dengan MFG Labs Icon yang mengikuti standar PUA, sehingga dalam proses penerapan pada halaman situs menjadi mudah dan aman dari konflik.
Ikon MFG Labs memiliki gaya unik yang menonjol dari ikon lainnya. Saya sangat merekomendasikan font ikon ini untuk semua jenis situs web, baik untuk tujuan komersial atau tujuan lainnya.
9. Ionicons
Ionicons dibuat dan dikembangkan untuk menyempurnakan framework Ionic. Ionic adalah framework web yang konsentrasi pada aturan dasar pembuatan web dengan basis cross-platform. Framework Ionic dibuat sebagai solusi para desainer web berbasis mobile terutama iOS. Team Ionics kemudian merilis icon mereka sebagai webfont yang diberi nama Ionicons.
Secara resmi tim Ionics merilisnya dengan gratis dan tersedia di GitHub. Anda bahkan dapat menambahkan ikon ini langsung ke situs menggunakan stylesheet CDN Ionic. Sebagian besar desainer web merekomendasikan Ionicons untuk pemula yang belum pernah menggunakan font ikon sebelumnya. Mereka sangat mudah diatur, dan begitu Anda mengerti cara kerjanya, Anda dapat pindah ke hampir semua ikon webfont lainnya yang tersedia di internet.
10. Devicons
Paket Devicons adalah salah satu font web terbaru yang dapat Anda coba dengan fokus pada logo & branding teknologi. Font ikon ini memiliki setiap logo yang sulit ditemukan pada font ikon lainya. Devicons tersedia mulai dari pemain teknologi besar seperti Google hingga logo CMS yang terbaru seperti Ghost. Jadi Devicons ini hanya berguna untuk situs yang membutuhkan logo-logo teknologi berformat vektor yang tentunya tidak setiap desainer web membutuhkannya. Namun begitu Devicons menarik karena paket ikon yang banyak dan tentunya gratis! Anda bisa mengunduh dan menggunakan Devicons pada halaman-halaman situs yang anda kelola dengan memanfaatkan CDN gratis untuk mengurangi waktu pemuatan halaman web.
Kesimpulan
Yah begitulah dunia desain web... Sumber daya sangat melimpah ruah sehingga sangatlah sulit untuk menentukan sumber daya yang akan digunakan. Semakin banyak tersedia, semakin banyak pilihan bukannya semakin mudah namun semakin sulit, apalagi dari setiap paket ikon tersebut memiliki kelebihan yang menonjol. Ini baru 10 jenis Icon Webfont, masih ribuan lagi icon webfont yang tersedia di internet baik yang sifatnya komersil maupun benar-benar gratis. 10 icon webfont diatas hanya pilihan saya dan tidak mewakili pendapat siapapun, jadi jika anda memiliki saran lain tentang icon webfont yang menarik, silahkan tinggalkan informasinya pada kolom komentar. Selamat berkarya....!
Comments
Post a Comment