Announcement blog post:
Icons – Google Fonts
81–90 of 190 posts
Re: Icons – Google Fonts
#82Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/
I can't see how these would be bad for accessibility. The markup is a with a human readable word like "home" in it.
Raw icon names (that you cannot influence) often don't make a good replacement for proper alt text. Quite often they should not be read out at all. Furthermore, people forcing websites to use a font like OpenDyslexic will see these non-descriptive icon names instead of the real icons.
Re: Icons – Google Fonts
#83I have Google Fonts blocked in uBlock Origin now, and it's really helped pages load quicker and feel more snappy. I added these lines to uBlock: fonts.gstatic.com fonts.googleapis.com Occasionally some icons break on a few sites, but mostly it's plain sailing.
would something like that also work on a pihole ? that would be perfect for the other devices too that dont have possibility to use ublock thanks
Yes - you can block domains at the network-level with a pihole.
Re: Icons – Google Fonts
#84Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/
The SVGs used to generate the icon fonts are Apache 2.0 licensed: https://github.com/google/material-design-icons/tree/master/....
Re: Icons – Google Fonts
#85Earlier quoted context omitted.
Took me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.
You can also use Boxy SVG to create and edit SVG sprites: https://boxy-svg.com/#tour-symbols
Boxy says "15 day free trial" but there's no information about how much it costs.
Dora anyone know? I'm not going to sign up for something without knowing what I'm getting into.
Re: Icons – Google Fonts
#86Earlier quoted context omitted.
SVGs can do the same thing.
That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element. Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons
Most icons are generally tiny. Millage will vary, but they can speed up your site. Fewer requests for a slightly large page size.
Re: Icons – Google Fonts
#87Regular reminder that icon fonts are bad for accessibility and are technically troublesome also in other ways: https://github.blog/2016-02-22-delivering-octicons-with-svg/
(2016)? How about not using an ancient article to make a claim about a fast changing space like web dev?
Every single reasons for switching away from icon fonts mentioned in that article is still valid. Icon fonts were already a bad idea in 2016, and they still are a bad idea in 2021.
Re: Icons – Google Fonts
#88This looks like it was created for Android app developers. Having a single set of most used icons across different apps improves consistency, which will be welcomed by the users.
Re: Icons – Google Fonts
#89Seems like someone should launch an open-source pro-WCAG icon set ;-)
Re: Icons – Google Fonts
#90Earlier quoted context omitted.
That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element. Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons
1kb is a lot for a simple svg icon. That said, if you have a single page app already, you can render as many icons as you want, since you’ll only download them once anyway.
I wonder how React copes with a whole bunch of inline SVGs. Seems expensive