Generate iconfonts from probably the largest premium vector icon set on the web | Hacker News Reader

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

pictonic.co

41 pointsalz27 comments

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...

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.

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.

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.

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

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.

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

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

Good points, thanks

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

ah right, yea that's a bit quirky, we'll fix that

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.

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

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.

ok thanks, we'll look into this, in the meantime, it should line up pretty nicely, and its easy to mod with css

Can I use icon fonts with native iOS apps?

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

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

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

I ask because alz needs to know I care.

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

Thanks, this is really good feedback. We will definately look into it

When I did more active development of my iOS apps I was always on the lookout for good icons of this sort. Sometimes I would even do my own using a tool called ArtText2 from the image components they provided. I even sent them an email offering money for more components to build the icons from, which they never followed up on.

Btw We can also provide individual icon svgs with the font pack if this is useful

I'll get back to this when I get to overhauling the icons in my apps. Not sure when that is.

hi there,

i just wanted to let you know that we've tested these on ios, and in an upcoming release we are going to make it a piece of cake to integrate pictonic's icons into your ios projects.

alan

No github icon D:

facepalm ...we'll add this for sure

Reply on news.ycombinator.com