Daftar Situs Penyedia Icon Fonts CSS

Perkembangan dunia web design sangatlah pesat, salah satu dari kemajuan perkembangan desain web itu adalah 'Font Ikon'. Jika dulu untuk menampilkan sebuah icon di laman web harus menggunakan media gambar yang biasanya membuat lambat loading web tersebt, maka dengan hadirnya font ikon para developer tidak perlu lagi menggunakan media gambar untuk menampilkan icon melainkan hanya dengan menggunakan font saja.
Idenya adalah untuk mengambil satu set ikon atau Piktogram yang biasanya akan diimplementasikan sebagai file gambar atau vektor dan kemudian mengubahnya menjadi font.

Metode ini dinilai jauh lebih baik dan efisien dari pada menggunakan gambar ataupun vector, karena font ikon dapat memuat sebuah laman 14% lebih cepat ketimbang gambar dan dapat menjadi 90% lebih kecil dari file SVG yang secara otomatis akan lebih menghemat bandwitch.

Baca Juga

• Daftar situs Web Penyedia Vector Gratis
• Daftar Situs Web Penyedia Icon Gratis
• Daftar Situs Web Penyedia Stock Foto/Gambar Gratis

kami telah membuat daftar singkat daftar situs penyedia font ikon yang populer dikalangan desainer web dan mungkin menjadi favorit anda. Berikut daftar situs penyedia font ikon terbaik :
jika anda mempunyai reverensi lain silahkan tambahkan di kolom komentar di bawah !

1. Font Awesome

Pada awalnya font awesome dirancang untuk bekerja dengan sempurna dengan Bootstrap namun sekarang font awesome juga sudah bisa dipakai di Html. font ikon ini merupakan yang paling populer dikalangan desainer web dan kamipun juga memakainya.
untuk contoh langsung bisa anda lihat di situs web ini.

2. Fontello

Berbeda dengan Font Awesome, Fontello sebenarnya adalah alat yang memungkinkan Anda untuk dengan mudah mengumpulkan huruf icon Anda sendiri berdasarkan dari sejumlah sumber penyedia font ikon, termasuk: Entypo, Font Awesome, Iconic dan Brandico. jadi lebih mempercepat loading karena yang di load hanya ikon yang dipakai saja.

3. Modern pictograms

Untuk yang satu ini kami sendiri tidak pernah mencobanya karena saya kirang mengerti dengan apa yang di jelaskan di situsnya, di situsnya di sebutkan "Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels." Bagian ini lah yang tidak kami mengerti, dan juga update terakhir font ini adalah tahun 2013 itu berarti sudah dua tahun tidak pernah di update.

4. Typicons

Satu lagi set font ikon yang dibuat dengan grapic yang bersih untuk digunakan sebagai webfont. untuk penggunaan hampir sama dengan font awesome hanya saja typicons hanya menyediakan 36 set ikon lebih sedikit dibanding font awesome.

5. Foundation Icon Fonts 3

Foundation Icon Fonts 2 : Dibuatt oleh ZURB.com, Foundation Icon Fonts 3 menyediakan 283 font ikon yang bisa anda gunakan secara gratis.

6. Pictonic

Pictonic menyediakan lebih dari 2300+ koleksi ikon, namun sayangnya pictonic tidak bisa digunakan secara gratis hanya sekitar 230 ikon saja yang dapat digunakan secara bebas. Untuk dapat menggunakan pictonic secara keseluruhan anda harus membayar sebesar $ 160 dollar.

7. Pictos

Pictos menyediakan 2 pilihan dalam penggunaannya pertama dengan cara menanamkan langsung di bagian CSS dengan perintah @font-face{} seperti font ikon diatas atau dengan cara mengambil kangsung melalui server Pictos dengan cara subscribe terlebih dahulu. Namun Pictos tidaklah gratis, untuk menggunakannya anda harus membelinya dahulu sebesar $ 49 atau sekitar Rp. 600.000an.

8. Ionicons (441 ikon)

9. Shock Icon Font (1121 ikon)

10. Dripicons (95 ikon)

11. Entypo (250 ikon)

12. Sosa (160 ikon)

13. The Elegant Icon Font (310 ikon)

14. Map Icon (175 ikon)

15. Ligature Symbol (250 ikon)

16. Heydings Icons (60 ikon)

17. Signifi (38 ikon)

18. Pursajs (73 ikon)

19. Elusive (271 ikon)

Menggunakan Font icon memungkinkan desainer untuk dapat menyesuaikan ukuran, warna dan bayangan ikon mereka dengan mudah dan cepat, dapat menghemat waktu pengerjaan.

** Sebaiknya sebelum megunakan font icon diatas terlebih dahulu baca lisensi dan ketentuan yang mereka gunakan.

10 Tools Yang Digunakan Web Desainer Professional

jika anda mencari di google atau mesin pencari lain tentang alat/tools yang digunakan para web desainer untuk membuat sebuah website yang super keren maka mungkin anda hanya akan mendapatkan tools yang berhubungan dengan software Illustrator, Dreamweaver, Photoshop, Corel Website Creator, Wordpress dan banyak pilihan tools populer lainnya.

Padahal kenyataannya tidak semua web designer menggunakan tools - tools tersebut, ada banyak tools lain yang tidak terkenal yang justru sangat berguna dan sering digunakan oleh web designer professional yang mungkin anda tidak tahu.

Nah, pada artikel kali ini kami akan memperlihatkan kepada anda tools - tools yang tidak terlalu terkenal namun sering digunakan oleh desainer professional :

1. Webydo

Webydo web suite adalah platform yang menggabungkan Web Design dan Web Develover menjadi satu, webydo juga memungkinkan para web desainer untuk membuat sebuah website tanpa menulis kode apapun, webydo menyediakan platform serbaguna untuk memudahkan anda untuk membuat dan mengelola website yang responsive yang sangat direkomendasikan untuk anda miliki.

Kelebihan lainnya adalah tata telak yang terstruktur, anda hanya tinggal mendesain di halaman web editor dan sistem akan otomatis menuliskan kode seperti html, php, jquery dan lain-lain untuk anda, anda juga bisa menambahkan widget populer ataupun animasi tanpa menulis kode apapun.

terterik untuk mencobanya ? silahkan kunjungi webydo.com

2. Pixlr

Anda semua pasti sudah mengenal Adobe Photoshop, software ini sudah menjadi standar bagi web designer, namun seperti yang anda tahu biaya untuk membayar lisensi software tersebut tidaklah murah.
maka dari untuk anda yang kesulitan membayar lisensi software tersebut Pixlr Editor bisa menjadi alternative untuk kebutuhan editing gambar tanpa harus memikirkan biaya lisensi.

Fungsi yang di sediakan Pixlr juga beragam tidak kalah dengan Photoshop, dan Pixlr pun juga bisa digunakan untuk membuka dan mengedit file .PSD, maka dari itu editor foto ini menjadi favorit dikalangan desainer web professional.

Anda dapat mengakses aplikasi Web Pixlr ini di pixlr.com

3. Adobe Color CC

Dari sekian banyak tools color generator, hanya Adobe Color CC lah yang terbaik menurut kami, karena tools online gratis ini memberikan varian warna paling lengkap diantara yang lain, kelebihan utamanya adalah Adobe Color CC menyediakan beberapa color rules sepertiAnalogus, Triad, Complementary, dan lainnya. Anda juga bisa membuat pallete warna sendiri atau memakai pallete warna yang tersedia untuk desain anda.

silahkan kunjungi color.adobe.com untuk mengakses tools ini

4. FitText

Salah satu tantangan terbesar ketika membangun sebuah website adalah membuat ukuran headline teks yang sesuai dengan ukuran resolusi layar, tidak cuma di tampilan dekstop saja bahkan di semua resolusi bahkan resolusi layar yang terkecil sekalipun.
disinilah FitText berperan, FitText adalah plugin jQuery yang dapat memecahkan masalah ini untuk Anda dalam beberapa keadaan.

FitText tool mampu membuat ukuran headline yang sesuai dengan elemeny div utamanya, text akan otomatis diperbesar ataupun diperkecil mengikuti ukuran resolusi layar, jadi anda tidak perlu mengedit kode CSS anda.

Anda dapat mempelajari lebih lanjut tentang plugin ini di fittextjs.com

5. Font Squirrel

sangat penting untuk memilih font yang tepat untuk menciptakan typografi website yang sesuai. pilihan pertama untuk masalah ini adalah www.fontsquirrel.com

Font Squirrel memiliki ratusan font yang sangat bagus yang tersedia di situs mereka, serta link ke font lain yang tersedia "off-site", yang dapat dengan mudah didownload dan digunakan di situs Web atau proyek desain lainnya. Klasifikasi dan tag memungkinkan Anda untuk mencari berbagai jenis font dan Anda juga bisa menguji coba setiap font untuk melihat tampilan langsung dari font dengan teks yang anda inginkan.

untuk alternative lain anda bisa menggunakan Google Font, kelebihan dari google font adalah ukurannya yang kecil dan terdapat speed loading tools, jadi anda bisa melihat kecepatan browser ketika meload font tersebut.

6. WhatFont

Whatfont adalah sebuah plugin untuk web browser yang memungkinkan anda untuk mengetahui font yang dipakai dalam sebuah website tertentu.

Mungkin anda terinspirasi dengan tampilan sebuah website yang menggunakan font yang keren dan anda ingin menggunakan font tersebut di desain web anda juga, namun anda tidak mengetahui nama dan jenis dari font tersebut. maka Whatfont bisa menjadi pilihan anda untuk menyelesaikan masalah ini. Silahkan pelajari & download plugin eksitensi ini untuk web browser anda di chengyinliu.com/whatfont.html

7. CSS3 Generator

CSS3 dapat digunakan dengan sangat mudah anda dapat menambahkan efek visual dari radius - box shadow, tooltip bahkan anda bisa menambahkan animasi dan efek smooth transisi tanpa menambahkan kode jquery yang biasanya membuat lambat loading blog.
CSS3 Generator memungkinkan desainer untuk memilih kategori style yang diinginkan, mengatur value yang sesuai, dan CSS3 Generator secara otomatis akan menghasilkan CSS yang diperlukan untuk desain anda.

Satu kelebihan utama dari tools ini yaitu CSS3 Generator bersifat real time tools, hal ini memungkinkan anda untuk bereksperimen secara langsung dengan menentukan value yang terbaik untuk desain web anda dan tools akan secara langsung menampilkan hasil dari value yang anda masukkan. Setelah selesai anda bisa langsung copy paste kode css yang anda buat dan meletakkannya di lembar css anda.

Untuk mempelajari lebih lanjut silahkan kunjungi www.css3generator.com

8. RWD Calculator

RWD Calc adalah tools untuk mengubah satuan pixel menjadi persen, tool ini berfungsi untuk
membuat website yang responsive dengan mengganti satuan pixel yang ada di kode css menjadi satuan persen contoh 1000px diganti dengan 100%.

seperti yang anda ketahui pada saat ini sangat penting untuk membuat website anda responsive karena tidak semua penggunjung website anda nanti menggunakan perangkat dekstop atau laptop, pasti ada sebagian yang menggunakan perangkan mobile yang mempunyai layar kecil, kabarnya website yang responsive juga berpengaruh pada posisi SEO.

Silahkan kunjungi rwdcalc.com untuk menjoba tool ini.

9. Am I Responsive

Setelah desain web anda selesai anda mungkin anda ingin menguji seberapa responsive desain web anda dan ingin megambil screenshotnya, maka Am I responsive bisa menjadi pilihan pertama anda. Anda bisa menampilkan web anda di 4 sampai 5 perangkat berbeda dan langsung mengambil screenshotnya bersama-sama tanpa membukan web anda di perangkat berbeda.

Ketik alamat website Anda dan situs ini akan menunjukkan tampilan website anda pada sejumlah perangkat yang berbeda, termasuk desktop, laptop, tablet, dan smartphone. Anda kemudian dapat menggunakan fungsi "print screen" untuk mengambil gambar dari tampilan responsive website anda. anda bisa menemukan tools ini di ami.responsivedesign.is

10. Invision

Jika Anda mencari cara yang lebih baik untuk menjual ide-ide desain web anda, maka Invision mungkin apa yang Anda butuhkan. Prototyping tools ini memungkinkan Anda untuk mengubah desain Anda menjadi prototipe interaktif yang bahkan termasuk transisi dan animasi. Alat ini juga meliputi real-time desain dan kolaborasi yang mempunyai kemampuan sebagai kontrol, sinkronisasi, membuat tools ini menjadi multi-faceted yang mungkin cocok untuk sejumlah kebutuhan desainer.

Anda dapat mempelajari lebih lanjut tentang Invision di www.invisionapp.com/

Silahkan beri tanggapan anda di komentar