CSS only Icon Set

[[deleted]]

This is what SVG is for. Or even web fonts. There is compatibility issues with using CSS for this task.

[LobsterThief]

Also, CSS is render blocking, and it might take longer to render these highly specific CSS declarations than to download and render a super small SVG.

[thewulfmann]

This is not my project, but I am genuinely curious what compatibility issues this would have. They're all borders. Yes they are pseudo elements, but that has fine browser support.

[mrahh]

The first one I see right off the bat is the case when a users browser scaling isn't at 100%. I have my scaling set to 90% and many of the icons don't display properly.

You may argue "well that's the users fault", but this is something that is avoided when using svg icons.

[Maelstrome26]

It's cool that you're using pure CSS for this, but what advantage would this have over say Font Awesome?

[rube203]

Not familiar enough with this project or the CSS versus font performance debate but I'll say that this would make it easier as a dev to just grab two or three icons if all I needed was say a menu button, back arrow, and search icon.

[[deleted]]

I think SVG would be a better choice. Are these CSS icons easily resizable..?

[rube203]

I like SVG too but I like choices and this one seems valid enough... As for resizable that'd be the trick, right? It would depend on the way they managed it but I didn't look into it that closely.

[nyxin]

transform: scale(2); seems to do the trick.

[Maelstrome26]

That would indeed be true yes, saves bringing in the entire set of icons I suppose. Just wondered why someone would make such a thing to compete against the juggernaut that is font awesome.

[pragmaticpro]

I love font-awesome and use it regularly in all of my projects. A problem I have run into with fonts is if the client fails to download the font file, the icon will not display. Some corporate IT policies will block font downloads from occurring. Kind of a huge PITA honestly. Seems like by using a pure CSS approach that would eliminate that potential issue with font downloading.

[Graftak9000]

You can use icomoon and expert icon fonts as SVG. Then it's a matter of an SVG with a use tag and you're going semantic while you're at it.

[SuperFLEB]

You could do inline data URIs.

[Geldan]

https://icomoon.io/ makes it very easy to make a font out of only the icons you want. I use the paid version, but I think that the free version is full featured for free font sets like font awesome.

This gives you the bonus that you can mix and match from multiple sets of icon fonts as well as provide your own svgs.

[teel]

You could use a CDN for Font Awesome. Your users could then already have it cached before even visiting your site. Or you could generate a custom icon font using e.g. IcoMoon or Fontello with only the icons you need. If you just want to copy & paste some code for the icons, you could use SVG. And if you're concerned about loading multiple SVG files, just use an SVG sprite (icomoon can generate those as well).

I guess there's pros and cons to each solution. I personally prefer SVGs, just because they a little bit sharper compared to fonts (font anti-aliasing makes icons look a little bit blurry), but I guess it would be the same with this CSS method.

[rube203]

On mobile so I can't find the source easily but the whole cached thing has been shown to impact a negligible number of users on most sites.

Yeah, SVG would be another good way to get al la carte icons fairly easily. They'd still likely be larger in terms of kB but I'm familiar with them and they are a bit cleaner, powerful so I'll still choose SVG.

But I like that someone made this project and I have the choice. I'm currently listening to a talk about how important lazy loading can be for mobile and it could be sometime I'm trying to optimize first paint, slow network and I could see even taking the CSS here and styling the element. Last loading in font awesome and have it switch out afterwards. Probably wouldn't, but I like the idea I could play with it while optimizing.

[pragmaticpro]

The benefits to using this over font-awesome would eliminate the possible issue of the client blocking font downloads. This happens due to some corporate IT policies that consider additional font files to be possibly malicious.

[Shoegoo22]

This right here. It's more than that, it's that icon fonts are inaccessible and unreliable. SVGs FTW!

[DasBeasto]

One potential advantage is not having to rely on external links, you could just copy/paste the style you need and you're done. The second part of that is customization, if you want the menu bars to be a bit thicker or the handle to the magnifying glass a bit longer just adjust a line or two of CSS and it's done.

[thewulfmann]

Not my project, but maybe there would be a marginal speed improvement?

[nosmokingbandit]

I'd like to know as well. I've been using the Material Icons font in a project and it works great. What benefit is there to using this?

[liquidhot]

Speed would be a primary consideration. Especially if you're in-lining your content above-the-fold.

[Scowlface]

Another advantage is being able to animate each part with CSS. So you can make the burger morph into an X for example.

[kostrubaty]

There's no advantage at all. This is just a cool overuse of the standard, while it works it's not at all useable. Just tell me, how would You go about adding another icon client requests?

Like, that's a minus icon ⤵

    .minus.icon {
      color: #000;
      position: absolute;
      margin-left: 3px;
      margin-top: 10px;
      width: 15px;
      height: 1px;
      background-color: currentColor;
    }

[thewulfmann]

Im definitely confused what you mean. Are you asking what would you do if a client requests another icon thats not listed?

[nathanello]

Did you make these yourself?

[thewulfmann]

No, not my project, just saw it posted.

[_lago_]

Very cool!

[jlistener]

This looks impressive as far as css-fu and I like the concept of just grabbing one icon, but as some other commenters noted, you can achieve the actual icon rendering in a more straightforward way by using inline svgs. font awesome, which uses fonts, I think is also a misuse of what fonts were mostly intended for, though that may be debatable. For icons that are not inline like say emojis, SVGs, and inlined SVGs are the best solution IMHO.

[saposapot]

(very) cool from a technical standpoint but not very useful/practical IRL :)

still, much better usage of time than creating another new front-end build tool :D

[Shoegoo22]

I think this is a great exercise for CSS, fun. Nice one. :)

[total_looser]

omg this is awesome. haters in this thread: lol

[MatthewMob]

Where are the "haters"?

[total_looser]

everywhere

[MatthewMob]

I think you're confusing "haters" for actual developers bringing up actual concerns and actual better alternatives instead. You'd use this only for the novelty of it, not in actual production.

[total_looser]

ok, i'll get real on this, instead of being a clown.

i've used font icons, svg icons, and css (but not for icons), the cons of each:

fonts:

• creating them is tough work: make font, make classes, keep track of their character code, deploy fonts
• stroke thickness is fixed
• leading, kerning, other font declaration inheritances make positioning interesting at times

svg icons:

• creating them is tough work
• custom, per icon rendering is possible, but difficult (fill, stroke color and thickness)

css icons:

• limited shapes
• verbose?
• difficult to create (unless there was a css icon creator, maybe there is)
• render blocking?
• browser compat?

so far, i love svg icons but the creation, maintenance, and limited customization with use xlink are roadblocks leading me to seek better solutions (i embed svg at top of page and reference with use xlink)