Creating simple character icons in CSS using ems

Here’s a quick way of bringing headings and otherwise dull content to life by using simple CSS to create simple single-character icons. Firstly, a quick example:

Circle Icons

And here’s the code, CSS first:



color: #393;
background-color: #cfc;
border: solid 1px #393;

color: #993;
background-color: #ff9;
border: solid 1px #993;

color: #963;
background-color: #fc9;
border: solid 1px #963;


<div class=”circled yellow”>Y</div>
<div class=”circled green”>G</div>
<div class=”circled brown”>B</div>

Obviously you can use any colour schemes you like but using the same text and border colour with a lighter background colour seems to work quite nicely.

It’s worth noting the ‘.circled’ CSS class uses ’ems’ for all its properties – width, height, line-height and border-radius. By using ’ems’ we make all of these values relative to the size of the original text so they always resize around it.¬†Using line-height is by far the easiest way of vertically aligning the text.

The element needs to have its ‘display’ property set to ‘block’ or ‘inline-block’ in order to handle the width correctly. Therefore, I’ve set ‘span.circled’ with ‘display:inline-block’ so that it can be used inline.

These single-character icons could be used with number characters for denoting sections or a document, letters A-E for grades or index values. You could even leave them blank to just show a circle at the appropriate text size.

If using a single letter, which is an abbreviation for a word or phrase, remember to use the <abbr> tag too, like this:

<div class=”circled brown”><abbr title=”Brown”>B</abbr></div>

About Chris Smith

Web developer specialising in frontend UI design @chris22smith
This entry was posted in border-radius, css, display, line-height and tagged , , , , , , , , , , , . Bookmark the permalink.