Single-Element Level Icon in LESS/CSS

Ratings, signals, and all manner of variable iconography is Hard for web. Webfont solutions require serious markup and are a pain to style, image icons aren’t customizable to the same extend, and SVG — oh poor SVG — is still a pain to work with.

As part of my work at Udacity, I was tasked with a three-level icon to show relative difficulty of our various courses. In the end, I went with a purely CSS (LESS) solution that I like for a couple reasons:

  • Single HTML element – no crazy nested html elements.
  • Allows fallback to plaintext when CSS is disabled.
  • Customizable like you would not believe.

Gist here.

Is it the end-all be-all of iconography? Not at all, but it does do the job in ~550 Bytes of CSS, and was a fun challenge along the way. Who doesn’t like that?

Leave a Reply

Your email address will not be published. Required fields are marked *