Label and Icon Combo

In general, label and icon combination is helpful in making an action easier to remember and depict.

Take a look at the left menu of this WordPress Dashboard:

And when there are no icons:

Without icons, you would need to read the labels one by one until you see what you’re looking for. The icons beside the labels definitely ease the effort in reading and recognizing the actions.

The Content Structure

How do we design the label and icon combination? First question we have to ask: with only HTML, is it important to represent the icon? For example, should it be contained in img, span, or a special character (think: icon fonts)?

If your answer is the same as mine, which is: only the text label is important enough to be represented in HTML, then we could simply use a to contain the label; the icon would be displayed using background-image.

Let’s use “Settings” for example:

[codepen_embed height=”102″ theme_id=”1820″ slug_hash=”EawKOb” default_tab=”result” user=”BrianSahagun”]See the Pen Label and Icon Combo by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

The icon was attached using the pseudo-element ::after.

[css]
.settings-action-link::after {
content: ”;
position: absolute;
width: 1rem;
height: 1rem;
background-image: url( ‘../img/icon.png’ );
}
[/css]