Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Feather: Open-source icons

feathericons.com

Post reply on HN
Print view View original

121–130 of 146 posts

Re: Feather: Open-source icons

#121

Post by usaphp »

asdfgadsfgasfdg wrote: post #94
usaphp wrote: post #87

Earlier quoted context omitted.

Vas majority of the websites that use font awesome icons are cheaply made projects that fail to get traction most of the time and have a relatively small user base. So using font awesome icons with an idea that it will help users recognize what they represent, is flawed. I doubt regular users who according to you "would have trouble figuring out what the icon means if they did not see it before" even visit the type o…

Please do not misquote me like you do in this post.

> Most of that design work you did to make you site "different" or "beautiful" just made your site less intuitive for a user.

Re: Feather: Open-source icons

#122

Post by amelius »

hungerstrike wrote: post #68

I wouldn't call them "beautiful". They're OK. "Cute" maybe. In any case, personally I'd rather wait for other people to call my work beautiful. Seems a bit pompous to self-apply it.

I think the fastest way to judge an icon set is to look at the "people" icons (or "user" icons). These are the most difficult to get right.

Often, and I wish I had a better description, the people icons look like the symbols you see on men's toilets.

I'd be interested in icon sets which have better solutions for these people icons.

Re: Feather: Open-source icons

#123

Post by seanwilson »

CrystalGamma wrote: post #114
seanwilson wrote: post #112

Earlier quoted context omitted.

Unfortunately no but would love to be proved wrong. You can inline them server-side but then they're not cacheable. There's SVG filters but they're not widely supported yet. I'm curious of the reason why this is so difficult actually (security?). What's wrong with using JS?

I block it by default, so that wouldn't work. I would love to make web pages that I myself could read/see if they were made by someone else.

Fair enough. There's so much JS only functionality now though that I can't see how you can avoid it when developing a complex website. You find you can do the majority of things you want online with JS disabled?

Re: Feather: Open-source icons

#124

Post by seanwilson »

shakna wrote: post #120
seanwilson wrote: post #113

Earlier quoted context omitted.

That works because the SVG element is inline with the document. It doesn't work if you use an external link to the SVG document. The standard workaround is to use JS or server-side processing to inline the SVG elements directly into your HTML document.

Okay, here's a better example. [0] That's a linked svg, styled with CSS, though the CSS gets linked into the SVG header, rather than inherited from the page it is on. However, still possible to use CSS, rather than JS, without inlining. [0] http://blogs.sitepointstatic.com/examples/tech/svg-basics/sv...

So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font). To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one? If so it means you couldn't cache the SVG files.

Re: Feather: Open-source icons

#125

Post by shakna »

seanwilson wrote: post #124
shakna wrote: post #120

Earlier quoted context omitted.

Okay, here's a better example. [0] That's a linked svg, styled with CSS, though the CSS gets linked into the SVG header, rather than inherited from the page it is on. However, still possible to use CSS, rather than JS, without inlining. [0] http://blogs.sitepointstatic.com/examples/tech/svg-basics/sv...

So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font). To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one? If so it means you couldn't cache the SVG files.

> So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font).

That wasn't my assumption, I was just seeing if it could be done, rather than if you might want to. That thought would make this method impractical, though there may be a way around that.

> To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one?

Not necessarily. CSS cascades, and SVG can embed SVG. (Edit: I'm not actually sure about the browser support here. Do nested SVGs get to inherit from each other? Is that the same for all browsers? It'd require a bit of experimentation.)

So potentially, you could have a wrapper document that sets an ID or class that corresponds to how you want to change it, and then your base image linked within the wrapper.

The base image would cache, as would the base CSS file, however you could still apply changes.

A bit clumsy, but still allows you to avoid JS or in-lining, if that is what you want.

Of course, the wrapper won't cache, but it should be a very, very small overhead.

Re: Feather: Open-source icons

#126

Post by unkown-unknowns »

CrystalGamma wrote: post #114
seanwilson wrote: post #112

Earlier quoted context omitted.

Unfortunately no but would love to be proved wrong. You can inline them server-side but then they're not cacheable. There's SVG filters but they're not widely supported yet. I'm curious of the reason why this is so difficult actually (security?). What's wrong with using JS?

I block it by default, so that wouldn't work. I would love to make web pages that I myself could read/see if they were made by someone else.

Consider a middle ground. Check out uMatrix, it allows you to block third-party js by default while allowing js from same site as well as making it simple to permanently allow selected domains for one or all others.

Re: Feather: Open-source icons

#127

Post by Sophistifunk »

CrystalGamma wrote: post #104
seanwilson wrote: post #64

Earlier quoted context omitted.

I prefer SVGs as well now. You can style + animate them with CSS, it's easier to see what changed in your Git diffs and you can quickly edit them in an SVG editor if you need to.

Do you know any way to style them using CSS without using JS? (and while keeping them cacheable)

You mean more than (stroke|fill)(Color|Opacity)?

Re: Feather: Open-source icons

#128

Post by shalabhc »

amelius wrote: post #58
huhtenberg wrote: post #7

Seems like a good time to mention an absolutely awesome - https://icomoon.io/app It allows cherry-picking icons from dozens of different SVG icon packs (including Feather) and packaging them into a custom (web)font. It can also be used to package your own SVG assets into a single font file and then use resulting .woff as an SVG sprite sheet.

Why not use separate SVG files? You could reference them as data-url from the CSS to save round-trips. Perhaps it's just me but using a font to store icons seems arcane.

SVGs might work well on the web, but fonts may work better in other contexts. For instance, to display icons in a text editor using just the standard text rendering system.

Re: Feather: Open-source icons

#129

Post by kevin_thibedeau »

jwilk wrote: post #106
vforgione wrote: post #82

There's a Chrome icon, but no Firefox or Safari or Edge or any other browser. Not even a generic. Can we please stop with the implicit homogenization around Chrome? /rant

What's the use case for Chrome icon anyway?

Not a good one that's for sure.

Re: Feather: Open-source icons

#130

Post by [deleted] »

shakna wrote: post #125
seanwilson wrote: post #124

Earlier quoted context omitted.

So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font). To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one? If so it means you couldn't cache the SVG files.

> So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font). That wasn't my assumption, I was just seeing if it could be done, rather than if you might want to. That thought would make this method impractical, though there may be a way around that. > To do i…

[deleted]
Post reply on HN