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:
And here’s the code, CSS first:
border: solid 1px #393;
border: solid 1px #993;
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: