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:
{
font-weight:bold;
width:1.5em;
height:1.5em;
line-height:1.5;
border-radius:1.5em;
text-align:center;
}
span.circled
{
display:inline-block;
}
.green
{
color: #393;
background-color: #cfc;
border: solid 1px #393;
}
.yellow
{
color: #993;
background-color: #ff9;
border: solid 1px #993;
}
.brown
{
color: #963;
background-color: #fc9;
border: solid 1px #963;
}
And HTML:
<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:
