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
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:
- They don’t require any additional HTTP requests
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 …
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>