Back to Top
The nuts and bolts for
Creative web development

Building Icons With a Single HTML Element

“Learn how you can make icons through the CSS in a single HTML element”

With the arrival of ultra high definition screens (think Retina) new design challenges have arisen; you need to find ways to accommodate all devices. Take displaying icons for example. You could lean on serving images at 200%, or using SVG, but it’s also possible to build a surprising amount of graphics with CSS alone. Let’s build an elaborate icon with just one HTML element.


The main problem with single elements resides in the fact that you’re limited to the number of “building blocks” you can use. Luckily, there are some tricks.
Pseudo Elements
Pseudo elements (also referred to as generated content) don’t exist in the document markup itself (the DOM) but are created by the CSS. They offer you the possibility to add to your default element two others which can (more or less) use the same properties. For example, take this markup <div class="square"></div> and apply the following style rules. For the purpose of this exercise Vincent Durand will use pixel values, though it’s often advisable to use flexible units of measurement such as ems. Note: The double colon (::), as opposed to a single colon, is CSS3 syntax. It differentiates pseudo elements from pseudo selectors, such as :hover.

Read the full article

Share this Article