So WingDings but by Google. GoogDings? Did anyone convert them to SVG yet?
When you click on an icon you can choose to download it as SVG or PNG.
Icons – Google Fonts
41–50 of 190 posts
Re: Icons – Google Fonts
#42Not a fan of how the entire page is squished when clicking on an icon. All the icons get displaced and it's a pain to find where you were in the list...
Re: Icons – Google Fonts
#43The provided usage example is bad for accessibility: the name of the icon, e.g. ”check_circle”, will be announced by screen readers. If there is other contextual information that explains the icon, the icon can be hidden from screen readers using aria-hidden=”true”. However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Also, never use Google’s…
>However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Why? It's the screen reader's job to inform users of what's on their screens. It's not my job to give descriptions to things. >The CDNs are used to track your users. Do you have any evidence to support this claim?
As a web developer, it literally is your only job to make a website that is usable by people.
Re: Icons – Google Fonts
#44Earlier quoted context omitted.
Oh? I have to look that up
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
Re: Icons – Google Fonts
#45Earlier 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.
But how do you actually apply the styling? Just add a class to the tag which contains “color:red;” ?
This should work as long as the SVG shapes have the "fill" and/or "stroke" set to "currentColor".
Re: Icons – Google Fonts
#46I 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.
Is it supposed to be added to "My filters" tab in settings?
Re: Icons – Google Fonts
#47Earlier quoted context omitted.
>However, in cases where the icon appears stand-alone, it needs to contain a human-understandable text that explains its meaning. Why? It's the screen reader's job to inform users of what's on their screens. It's not my job to give descriptions to things. >The CDNs are used to track your users. Do you have any evidence to support this claim?
As a web developer, it literally is your only job to make a website that is usable by people.
By which people? I think thats up to the developer to decide.
Re: Icons – Google Fonts
#48Earlier 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
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.
Re: Icons – Google Fonts
#49I 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
Re: Icons – Google Fonts
#50Earlier 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.
But how do you actually apply the styling? Just add a class to the tag which contains “color:red;” ?
You can export your SVGs with fill="currentColor" and your color attribute onto the SVG tag or its container would work.
Since at $JOB i'm using SVG icons with more than one color, i use fill="var(--svg-color-base)" or fill="var(--svg-color-accent)" so i can precisely set which color i want, in a perfectly scope-able manner.
The greatest advantage is that you can reference externally your svg with xlink.href on top of your website: you have to make one more request, but it's cacheable. Pick your tradeoff :)