Some New Icon Sets
I’ve bookmarked some icon sets lately, partly because I can never find a nice set when I need to. I figured I’d even go the extra mile here and blog them so I can definitely find them later. Aside from …
I’ve bookmarked some icon sets lately, partly because I can never find a nice set when I need to. I figured I’d even go the extra mile here and blog them so I can definitely find them later. Aside from …
This is a great collection of icons by Corey Ginnivan that’s both free and with no attribution required when you use them. The style is super simple. Each icon looks like older versions of the icons from macOS to me …
You know the title
attribute? I can do this:
<div title="The Title"I'm a div with a `title`
</div
And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get……
A pleasant little romp through iconography and culture from Sophia Lucero. The “hamburger” menu icon we’re familiar with now is really a sign from Taoist cosmology.
…Besides ☰, which represents heaven 天, we have ☱ for lake/marsh 澤, ☲ for fire
I’m not sure what to call these icons from Astrit Malsija. The title is “500+ CSS Icons, Customizable, Retina Ready & API” and the URL is “css.gg” but they aren’t really named anything.
Anyway, their shtick is:
…The 🌎’s first
One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after
) in my CSS. This technique offers several advantages:
The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple’s latest blunder). But if you need to …
Here’s a nifty trick from Andy Bell that now seems a little obvious in hindsight: if you set an SVG to have a width and height of 1em then you can change the size of it with the font-size
property.…
This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here’s the ideal example:
<button type="button">
Menu
<svg class="svg-icon"
role="img"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
<path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
</svg>
</button>
… There are lots of unicode symbols that make pretty good icons already, like arrows (←), marks (✘), and objects (✂︎).You can already colorize these like a normal font glyph. Then, there are emojis, those full-color suckers we all know about. …
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.