Generate iconfonts from probably the largest premium vector icon set on the web

by alz • 14 years ago

41 27 14 years ago

agscala2• 14 years ago

Looks nice. Why do I have to log in to browse icons? There is the widget on the homepage that cycles through them but I can't actually get it to pause so I can see what's available. That's really annoying.

alz12• 14 years ago

hi there, i worked on pictonic. thanks for the feedback. the widget should pause on hover, i'll look into that. it only shows a small random sample from the full library though. since these are premium icons we have some terms and a non-public area

agscala2• 14 years ago

You're right, it does pause on hover. Unfortunately I was hovering over the little "page" icons which don't pause

tomjen32• 14 years ago

Don't use hover for that. First it is not obvious because it has no affordance and secondly it doesn't work on mobile.

DenisM4• 14 years ago

Can I use icon fonts with native iOS apps?

alz12• 14 years ago

good question. the font icons appear beautifully on retina displays, because they're vector. can't think of any reason they wouldn't work with a webview, but haven't tested this. in terms of native apps, i don't know, but will look into it

tomjen32• 14 years ago

They are standard fonts so if you can set the type, why not?

alz12• 14 years ago

Totally : > I won't say yes until i've seen and tested it though

DenisM4• 14 years ago

I ask because alz needs to know I care.

That, and I'm lazy. Which alz also needs to know.

nimblegorilla2• 14 years ago

Looks cool. In the demo I would love to be able to change the font-size beyond 20-40 px as well as add a 2nd font with regular text to see how it looks next to that.

alz12• 14 years ago

Hiya, thanks for the feedback! what info would the comparison give? Did you want to compare kerning and baselines?

nimblegorilla2• 14 years ago

I just want to look at the source for something like your example image to see what you need to do to line up the icons with other fonts.

thinkbohemian• 14 years ago

No github icon D:

alz12• 14 years ago

facepalm ...we'll add this for sure

vlasta2• 14 years ago

It looks very nice, but isn't this the wrong way to do vector graphics online? The purpose of a font as I see it is to give text certain style. This looks like a hack - using one thing in a way it was not supposed to be used. Editing the source code of a web page using this must be very unintuitive. We have SVG and while it is far from perfect, at least it is supposed to represent pictures. And can use more than 1 color...

crazygringo• 14 years ago

Theoretically you're right, but SVG doesn't work in IE, so it's not a realistic option for most developers. Icon fonts are scalable, retina-ready and actually work.

erichocean2• 14 years ago

I'd like to see JavaScript code provided that is capable of drawing the same thing in a Canvas2D context. I can work with you on what that would look like.

(I'm the author of Blossom, an upgrade to SproutCore that does all UI elements in Canvas -- see https://github.com/fohr/blossom.)

UPDATE: Yes, I'm aware there are SVG converters out there. It's still annoying.

alz12• 14 years ago

Interesting, yea I guess that's exactly what would be required to achieve this, a function capable of reliably translating between path data formats and also canvas instructions. Path data can be annoying though, so many ways to express the same thing. Happy to collab on a jsfiddle? Once we have that the rest should be fairy simple.

erichocean2• 14 years ago

I'd start with this and see what the output looks like: http://www.professorcloud.com/svg-to-canvas/

Generate iconfonts from probably the largest premium vector icon set on the web

Related Stories