Iconify Links with CSS

Using icons is a must for all Web 2.0 apps. I have used this principle liberally in Nexty. When I was creating Nexty, I learned a simple trick that made using icons with CSS much easier.

Go to Nexty to see the icons

3 Types of Icons

I used 3 different classes for showing icons. They are..

icon

This class removes the text of the link and put the icon in its place. The icon is clickable.

You can see this technique used in the Projects page. See that ‘Edit'(Pencil) and ‘Delete’ icons? They use this class.

XHTML code

<a class="icon edit" href="edit.php?project=6">Rename<a>

CSS Code

.icon {
	font-size:0px; /*Hides the text*/
	padding:6px 8px;
}
.edit {
	background:url(edit.png) no-repeat left center;
}

with-icon

This class shows the icon left of the link text. Both the icon and the text are clickable.

The ‘Create new task’ link in the home page is an example of this.

XHTML code

<a class="with-icon tasks" href="tasks/new.php">Create New Task...</a>

CSS Code

.with-icon {
	padding-left:18px;
}
.tasks {
	background:url(tasks.png) no-repeat left center;
}

list-with-icon

This will insert the icon in every item for the given list.

The drop down menus – Sections, Projects and Contexts are created using this technique.

XHTML code

<ul class="menu-with-icon projects">
<li>...</li>
<li>...</li>
</ul>

CSS Code

.list-with-icon li,.list-with-icon dt {
	padding-left:18px;
}
.projects li {
	background:url(projects.png) no-repeat left center;
}

Icon Size

My icons were 16×16 pixels – if you are using icons with a different size, you will have to change the amount accordingly.