State of affairs: We want to make a switch to an icon font, and replace the .PNG sprites. Trying to achieve that with minimum effort and if possible no additional software we searched for a web-app to help us.
There is a ton of software and free or demo apps that can help you get your way and add some nice pre-designed vector icons to your project (like fontawesome). However being a perfectionist using pre-designed icons did not satisfy me. What I wanted is a way to translate the exact vector icons I developed in illustrator and photoshop into a web-font and that seemed to be impossible without an expensive font-editing software.
And then we found icomoon app. This baby can take custom .SVG files, combine them with pre-designed icons from several extensive libraries and export them into a custom web-font. Then the session can be stored and donloaded as a .JSON file, making it possible to edit in the future. All free, no strings attached. This is perfect!
(Note, the font-export button is at the bottom)
This is how we do it now:
Now I open a sheet in illustrator, exporting every icon to a separate .SVG file, and importing them in icomoon.
Front-end dev’s call every icon by it’s code like so:
<a class=”prev ficon icon-arrow-left”></a>
And voila, now we have scaleable and custom icons all over the website, easily scalable to fit mobile, tablet and desktop view.
Check them all out here: www.ftbpro.com