It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
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 icon library designed by code.
The idea is that they don't use clip-path, they aren't icon fonts, they aren't even SVG. They are just <i> tags essentially using the shapes of CSS and pseudo elements as necessary to draw … Read article
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:
background-size property, you can set your pseudo-element to any size you need without worrying that they will overflow the boundaries (or get chopped off).
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 (and I get it, sometimes you need to), Sara Soueidan and Scott O'Hara have a pair of articles that nicely lay out all the options and present actual research on this topic.
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.
Try and change the font-size on the body element below to see the icon scale with the text:
See the Pen
Font size controlled icon by Andy Bell (@andybelldesign)
on CodePen.
You pretty much always want your … Read article
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. What if you could take just the shape of an emoji and use it like a normal glyph? You can!
Preethi Sam shows how:
.icon {
color: transparent;
text-shadow: 0 0 #ec2930;
}Plus, an alternate technique using background-clip. … Read article
I've been watching a lot of nature documentaries lately. I like how you can either pay super close attention to them, or use them as background TV. I was a massive fan of the original Blue Planet, so it's been cool watching the Blue Planet II episodes drop recently, as one example. A typical nature documentary will always have a little look how bad we're screwing up the environment twist, which is the perfect time and place for such … Read article
Here's a question I got the other day?
… Read articleWould you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up an icon system.
Etsy moves away from an icon font in production to using SVG. It's going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use.
Two cents:
<use> available, like: <svg use="icons.svg#cart" />