[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-list-icon-library-keren-dan-open-source-untuk-mempercantik-website-kamu":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":14,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},340,"list-icon-library-keren-dan-open-source-untuk-mempercantik-website-kamu","List icon library keren dan open source untuk mempercantik website kamu","Agus Yusida September 6, 2017 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",null,[],"2019-04-13T16:00:00Z","2026-07-14T04:39:31.851745Z","\u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"http:\u002F\u002F0.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&d=mm&r=g\"\u002F>  Agus Yusida September 6, 2017\u003Cp>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.\u003C\u002Fp>\u003Ch3>1. Fontawesome\u003C\u002Fh3>\u003Cp>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:\u003C\u002Fp>\u003Cul>\u003Cli>Total ada 675 Icons\u003C\u002Fli>\u003Cli>Gratis\u003C\u002Fli>\u003Cli>Tanpa javascript\u003C\u002Fli>\u003Cli>Scalable, jadi bisa diperbesar\u002Fdiperkecil tanpa takut menjadi blur\u003C\u002Fli>\u003Cli>Gampang untuk di edit dengan css\u003C\u002Fli>\u003Cli>Sudah support dengan retina display\u003C\u002Fli>\u003Cli>Gampang di instegrasikan dengan beberapa css framework lain seperti boostrap dll.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Untuk kamu yang mau mengecek dokumentasinya bisa kunjungin link berikut: \u003Ca href=\"http:\u002F\u002Ffontawesome.io\u002Fget-started\u002F\">http:\u002F\u002Ffontawesome.io\u002Fget-started\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Ch3>2. Openiconic\u003C\u002Fh3>\u003Cp>Selanjutnya kita punya icon library yaitu Open Ionic yang merupakan versi free dan open source dari Iconic. Apa saja fitur-fitur dari Open Iconic?\u003C\u002Fp> \u003Cul>\u003Cli>Open Iconic memilki total 223 icon dalam bentuk SVG, webfont dan raster formats. \u003C\u002Fli>\u003Cli>Gratis\u003C\u002Fli>\u003Cli>Ukurannya yang cukup kecil hanya 12,4kb atau lebih kecil 4x dari ukuran fontawesome\u003C\u002Fli>\u003Cli>Bisa diwarnai dengan css\u003C\u002Fli>\u003Cli>Bisa digunakan dengan banyak css framework seperti bootstrap & foundation\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Cara menggunakan Open Iconic adalah dengan meng-include cssnya secara langsung seperti contoh di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode><link href=\"\u002Fopen-iconic\u002Ffont\u002Fcss\u002Fopen-iconic.css\" rel=\"stylesheet\">\n#penggunaan\n<span class=\"oi\" data-glyph=\"icon-name\" title=\"icon name\" aria-hidden=\"true\"><\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kalian bisa melihat contoh iconya dengan mengunjungi halaman berikut ini: \u003Ca href=\"https:\u002F\u002Fuseiconic.com\u002Fopen\u002F\">https:\u002F\u002Fuseiconic.com\u002Fopen\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Ch3>3.Google Material icons\u003C\u002Fh3>\u003Cp>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:\u003C\u002Fp>\u003Cul>\u003Cli>900+ material icons \u003C\u002Fli>\u003Cli>Bisa menggunakan hosting di Google Web Font atau kamu dowload \u003C\u002Fli>\u003Cli>Sudah support semua modern web browsers.\u003C\u002Fli>\u003Cli>Bisa di edit dengan css langsung seperti warna, ukuran dan posisinya\u003C\u002Fli>\u003Cli>Vector based yang artinya ga ngeblur mesti di kecilin atau dibersarkan ukurannya,\u003C\u002Fli>\u003C\u002Ful>Rekomendasi:  5 image & video hosting gratis untuk kamu coba para web developer\u003Cp>Cara penggunaanya cukup mudah kamu hanya perlu menginclude cssnya seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode><link href=\"https:\u002F\u002Ffonts.googleapis.com\u002Ficon?family=Material+Icons\"\n      rel=\"stylesheet\">\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kemudian kamu bisa memanggil icon-nya dengan tag seperti dibawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode><i class=\"material-icons\">face<\u002Fi>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Untuk lebih detailnya kamu bisa kunjungi dokumentasinya disini: \u003Ca href=\"http:\u002F\u002Fgoogle.github.io\u002Fmaterial-design-icons\u002F#icon-font-for-the-web\">http:\u002F\u002Fgoogle.github.io\u002Fmaterial-design-icons\u002F#icon-font-for-the-web\u003C\u002Fa>\u003C\u002Fp>\u003Ch3>4. Ionicons\u003C\u002Fh3>\u003Cp>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: \u003Ca href=\"http:\u002F\u002Fionicons.com\u002F\">http:\u002F\u002Fionicons.com\u003C\u002Fa>\u003C\u002Fp>\u003Cp>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!\u003C\u002Fp>Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&media=&description=\">\u003C\u002Fa> Tags: Free gratis Icon","Agus Yusida September 6, 2017 Halo teman ngide, kalian pasti pernah membutuhkan icon-icon yang dalam membuat sebuah website bukan? Kali ini kita mau membagikan ",[],[],0]