As you may already know, I’m a big fan of CSS. I have done my fair share of CSS experiments, and I have learnt an incredible amount by doing so. One of the most important things I have learnt is this: it’s not okay to use non-semantic markup for styling. Style is not content, and they are kept separate for a reason. I have seen many experiments in which entire images are made only using HTML and CSS, and I have to ask why? While it is often challenging to complete such experiments, aren’t they teaching others that it is okay to use markup for styling purposes?
With my latest experiment, pure CSS icons, I had two strict guidelines in place:
- No extra markup just for styling
- No need for a solid background colour for the icons to work
This made it incredibly difficult to produce high calibre icons, especially as I was working with a single anchor element for each icon. However, it was quite the accomplishment when I was able to do so. The most difficult aspects were creating the triangular shapes (due to my use of borders), and producing certain icons without using a solid background colour.
This experiment, as always, was a lesson. Firstly, pseudo-elements are incredibly powerful, and secondly, if you are using non-semantic markup, then you are probably doing it wrong. My advice to you would be that next time you are undertaking a challenging CSS experiment, introduce some limiting guidelines, you might be surprised with the result.
These icons are just an experiment; they degrade terribly in older browsers. Feel free to poke around the source code, play with, replicate, and learn from them, but I wouldn’t recommend using them on a website. If you want to fork the code on GitHub, you can do so here.