Create Batch icon font

[csswizardry]

It’d be nice to have an icon font in inuit.css, and I’d like to use @AdamWhitcroft’s Batch icons.

@AdamWhitcroft is cool with this, and I know @sdmix is able/wants to build it so… let’s get cracking!

[AdamWhitcroft]

Down for this for sure - what do you need from me?

[csswizardry]

@AdamWhitcroft I’m not entirely sure really. Permission and an occasional look at progress to make sure we’re doing stuff okay…?

[AdamWhitcroft]

Of course you have permission - I'd also distribute the font directly from the Batch website so it should get out there a fair bit (especially after the HN top spot)

For the Climacons font, Christian used the SVG files as far as I'm aware. If you need SVG's let me know and I'll start preparing them - it might take a while (as there are 300). If they aren't required though that would be killer.

I've also got plans over the weekend to crack out a retina friendly 16x16 sprite sheet and accompanying CSS file.

[csswizardry]

If you need SVG's let me know and I'll start preparing them.

I think @sdmix can work off the PSD, but he’ll need to answer that :)

This is gonna be cool :D

[sdmix]

Just checked out the lovely PSD file, all is well for me to work off that.
Already started putting the structures in place and converting the glyphs from your PSD so should have something I can ping over to both of you very soon :D

[csswizardry]

Thou rocke :D

[AdamWhitcroft]

http://youtu.be/hjAyQzjBmhE

[Keyamoon]

Hey guys @csswizardry @AdamWhitcroft @sdmix

I saw this thread and discovered the Batch icon set (@AdamWhitcroft terrific work sir), and I decided to contribute.

I extracted SVGs out of the PSD and used my IcoMoon app to generate the webfont (+ html demo). I also generated a CSS Sprite (+ html demo) and PNGs in 32px and 16px. I've put it all in this repo for now but if it's considered redistribution, I'll remove the repo.

I noticed some redundant points in a few of the vectors and removed them. The whole work only took me 4 hours and I don't want any credits or anything.

I've spent a lot of time working with icon fonts and I know how to make them look crisp and just the way they were designed. Unlike most of the icon fonts out there, with the fonts that my app generates, you will actually get a 16px icon when you set your font-size to 16px. Scroll down in the html demo to see the crisp 16px result (under CSS class names). I achieve this by a proper alignment of the icons: http://icomoon.io/#docs#font-metrics

A lot of the times people would make their own icon font the same way that regular alphabetic fonts are made. As a result, all the hard work went into making the icons look crisp would go to waste. I don't like to brag; I simply have a lot of experience with icon fonts, as I'm sure you guys are more experienced than me in many other areas :)

If you load the IcoMoon Session.json file to my app (button at bottom right), and press the Images button, you'd be able to generate CSS sprites in any size and color you wish (in both PNG and SVG formats). And of course you could make custom icon fonts too.

I hope you find this helpful.

[Keyamoon]

One more thing. Since font glyphs can only have one color, I changed those two transparent spinners to have different shapes.

[AdamWhitcroft]

@Keyamoon wow - thank you for your hard work. I've had a look through everything and it looks perfect.

The initial plan was to create a Batch font to ship with Inuit - are you happy for this to still happen with the kit you have created? If so, what would you like by way of credit or attribution?

[csswizardry]

Hey man, cheers for all that info, valuable stuff. I’ll leave @sdmix to read through it all. I will say though, he did us some awesome, pixel-perfect, font-size-is-definitely-icon-size work at Sky recently :)

[Keyamoon]

@AdamWhitcroft Sure, feel free to use as much or as little of it in any way you wish. No need for attribution.

I maintain this icon library and if you agree, I'd like to add Batch there on top. It would make using your icons easier as people would be able to search, make custom icon fonts and generate CSS sprites in any size/color they like. But I understand if you prefer people to download the icons directly from your own website (although my library could also send you some traffic). It's your call Adam.

@csswizardry Glad to have helped ;) I'm sure @sdmix would make pixel perfect icon fonts too. My app only makes the process easier and quicker.

If you decided to use the fonts I made, do let me know if you had any questions or noticed any issues with them.

[whatyoubendoing]

Hi @csswizardry, @Keyamoon, @AdamWhitcroft,

Ive made the batch icon font into a gem to use it on the rails asset pipeline. https://github.com/b3nhain3s/batch-rails. Hope thats okay? One thing I did want to know is what license Batch is released under?

Cheers
Ben

[Inkdpixels]

@b3nhain3s The license can be found here http://adamwhitcroft.com/batch/license/

[sdmix]

As of v4.5 inuit.css now includes the Batch v1.2 web icon font. It is disabled by default and is configurable via the Batch setting in the _vars.scss file. If you find any issues or any problems with the web font, please raise an issue with myself mentioned and I will review it.