Designers meet Pictos Server!

Unfortunely we not longer endorse this product, the support was sub-par. Which isn’t optimal for an app in production.

If you're like me, you're a designer who is sick of resizing icons, cropping and saving, uploading and refreshing. Here is a magical solution: I recently found Pictos Server by Drew Wilson. It allows you to build a collection of icons from they're large set. In a process called "icon fonting," they're embedding icons into TTR and EOT fonts, which can be used in your web pages. (I personally do not care about the magic behind it, only how it can help me.) Read more about the advantages of icon fonts.

Setup is simple, it's similar to TypeKit.com

1. In the Pictos admin panel, add the domains you're working on. I added… *.local, lessaccounting.com *.localhost.co, localhost, localhost.co
2. In the Pictos' admin panel navigate to "Font Builder". Now select icons you want. Then map them to a key character.
   
3. Add this to your sass file (in your app). Also please use sass, css is stupid.
4. In Pictos' admin panel, generate a Code Snippet and paste it into your website as they instruct.
   
5. Quickly add an icon with this haml. You'll notice the "m," "e," and "t" variables are mapped to the icons you've selected. In Pictos' admin panel it associated those letters to the icon you mapped. Yes case matters.
   
6. To change the size and color of your icon remember these icons are fonts so just use sass. Position them as you would any other element in your website.

There are a few others way to add icons but this was the quickest way to see the power of Pictos.

I usually design in browser and just after one day of using pictos server I've saved A TON of headache. Seriously check out Pictos Server. Also more about icon fonts on css-tricks.com and more setup tips here.