Halo teman ngide, kalian pasti pernah membutuhkan icon-icon yang dalam membuat sebuah website bukan? Kali ini kita mau membagikan beberapa icon library yang bisa di pakai untuk mempercantik tampilan user interface website kamu. Yang pasti icon-icon ini gratis dan open source.
1. Fontawesome
Icon library yang pertama adalah Fontawesome. Fontawesome bisa dibilang salah satu icon library yang paling populer di pakai citizen jaman now. Adapun beberapa fitur-fiturnya adalah:
- Total ada 675 Icons
- Gratis
- Tanpa javascript
- Scalable, jadi bisa diperbesar/diperkecil tanpa takut menjadi blur
- Gampang untuk di edit dengan css
- Sudah support dengan retina display
- Gampang di instegrasikan dengan beberapa css framework lain seperti boostrap dll.
Untuk kamu yang mau mengecek dokumentasinya bisa kunjungin link berikut: http://fontawesome.io/get-started/
2. Openiconic
Selanjutnya kita punya icon library yaitu Open Ionic yang merupakan versi free dan open source dari Iconic. Apa saja fitur-fitur dari Open Iconic?
- Open Iconic memilki total 223 icon dalam bentuk SVG, webfont dan raster formats.
- Gratis
- Ukurannya yang cukup kecil hanya 12,4kb atau lebih kecil 4x dari ukuran fontawesome
- Bisa diwarnai dengan css
- Bisa digunakan dengan banyak css framework seperti bootstrap & foundation
Cara menggunakan Open Iconic adalah dengan meng-include cssnya secara langsung seperti contoh di bawah ini:
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
#penggunaan
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
Kalian bisa melihat contoh iconya dengan mengunjungi halaman berikut ini: https://useiconic.com/open/
3.Google Material icons
Dari namanya kalian pasti bisa menebak kan siapa pembuat icon library ini? Yup, Icon ini dibuat oleh Google. Buat kalian yang ingin memakai icon-icon dengan style google material maka icon ini menjadi pilihan yang cocok. Adapun beberapa fitur dari icon ini adalah:
- 900+ material icons
- Bisa menggunakan hosting di Google Web Font atau kamu dowload
- Sudah support semua modern web browsers.
- Bisa di edit dengan css langsung seperti warna, ukuran dan posisinya
- Vector based yang artinya ga ngeblur mesti di kecilin atau dibersarkan ukurannya,
Cara penggunaanya cukup mudah kamu hanya perlu menginclude cssnya seperti di bawah ini:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Kemudian kamu bisa memanggil icon-nya dengan tag seperti dibawah ini:
<i class="material-icons">face</i>
Untuk lebih detailnya kamu bisa kunjungi dokumentasinya disini: http://google.github.io/material-design-icons/#icon-font-for-the-web
4. Ionicons
Font library yang satu ini khusus di desain untuk ionicframework yaitu framework untuk membuat mobile app. Untuk kalian pengguna Ionic Framework bisa cek ke websitenya langsung disini: http://ionicons.com/
Itulah beberapa icon library yang bisa kamu gunakan dengan mudah di project website kamu. Apa kalian punya icon library lainnya? Silakan sampaikan di kolom komentar ya teman ngide!
