Entry Post

Entry Module
Entry
Main Post Title

Label and Icon Combo

Post Content

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:

WordPress - Add New Post
WordPress menu labels with icons

And when there are no icons:

WordPress - Add New Post - Menu without Icons
WordPress menu labels without 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:

See the Pen Label and Icon Combo by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820

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]

Comment Module
Comments
Comments

There are no comments.

Comment Creation
Compose Comment