31–40 of 69 posts
Isn't that what SVG was supposed to be for?
All other things being equal, pure CSS could be a superior alternative to SVG / font icon if your SVG / font icons are loaded via HTTP (this is usually the case with SVG and always the case with font icons). Reducing the number of requests is associated with better performance and user experience.
What is cheaper CPU and download wise? CSS icons or font icons.
But: I went through a lot of the simpler ones on the codepen (minus, plus, menu, etc.) and learned some awesome techniques that I didn't know, then recreated them from scratch and was able to create some of the more complicated things. tbh I probably learned more css in the last hour than in any other single hour of my life. Nice!
I present: crudely drawn "x" icon with a circle around it:
Earlier quoted context omitted.
All other things being equal, pure CSS could be a superior alternative to SVG / font icon if your SVG / font icons are loaded via HTTP (this is usually the case with SVG and always the case with font icons). Reducing the number of requests is associated with better performance and user experience.
You can avoid the separate request by inlining the SVG or using a data URI
Earlier quoted context omitted.
I was barely awake when just having this problem last night, but SVG sprites(a bunch of icons in 1 s SVG file) have very limited support in CSS. In Chrome, it doesn't even work to specify a sprite symbol ID as a background URL, for example, even though that would be the most straight forward way to use sprites as icons IMO. CSS icons can have the same effect of having the icons being bundled in a single request while…
If you escape the unsafe characters it works everywhere. I've been doing this for ages. Source: https://codepen.io/yoksel/details/JDqvs/
Though the method I wanted to use would work if it weren't for the existing icons symbols inside of sprites, which seems to be only supported in Firefox's CSS.
For example: ``` [... a bunch of paths] [...] ```
``` label:before { background: url('/path/to/my.svg#helloworld') no-repeat; } ```
I could, of course, break the icons out of the symbol tags, as done here: https://css-tricks.com/svg-fragment-identifiers-work/
It's just disappointing that while referencing symbols works just fine with a tag, it doesn't work as a CSS url property value. I'm not sure why that would be.
EDIT: Yes, I'm sorry, I know this isn't Stack Overflow. Though I think the above(without symbol tags of course) may be the best alternative to pure-CSS icons if your graphics are more complicated.
Earlier quoted context omitted.
css icon has less code, the code is more editable and managable, argumentably better performance (because i haven't tested it) in the intro youtube video I said more about that. But to be honest, I just had a lot of fun dealing with the constraints that comes with css and loved the creating process, I spent a few weekends keeping designing and coding those tiny icons and skipped a lot of sleeping and still had fun.
The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engines. Most 2D vector graphics backends go to a lot of effort to cull invisible regions. CSS icons may be slightly slower than an optimized SVG due to the overhead of restyling and layout. Also, the browser-side painting may be a bit slower for CSS icons, becaus…
My concern is the burden this seems to place on hardware. By which I mean that loading the page into my browser (Firefox) and letting it sit for a minute spun up my laptop fan to an audible level and warmed one of my quadriceps.
What is cheaper CPU and download wise? CSS icons or font icons.
RE dowload size, I guess it depends entirely on how many you plan to use. Downloading an entire font to use a single icon would be inefficient compared to a few lines of CSS.
Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples
I was barely awake when just having this problem last night, but SVG sprites(a bunch of icons in 1 s SVG file) have very limited support in CSS. In Chrome, it doesn't even work to specify a sprite symbol ID as a background URL, for example, even though that would be the most straight forward way to use sprites as icons IMO. CSS icons can have the same effect of having the icons being bundled in a single request while…
[1] https://bugs.chromium.org/p/chromium/issues/detail?id=128055