Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

Best Practices For Positioning Icons With CSS

August 6th, 2010

In my opinion, icons are one of the small details that help polish an excellent website. However, it can be all-for-not if they aren’t positioned properly in your layout. In this post, I’m going to outline a few best practices for positioning your icons using CSS.

Download The Source Files

Small Icon With Body Copy

This is one of the most commonly messed up use of icons you’ll see out there. The web designer will simply insert the icon image code right before the text. I’d highly recommend against using this technique. Here’s an example of it:

<img src="icon.gif" />My text here

Why does this suck? Because you have no control over the positioning of the icon. A better practice would be to wrap the the text in a <span> tag and set the icon as the background image. Also, this technique works the best when the height of the icon matches the height of the text. Therefore, go with a 16px x 16px icon. We can adjust the vertical positioning of the background image/icon if need be. Here’s what the code looks like:

CSS

.icon {
 background: url(icon.png) 0 0 no-repeat;
 display: block;
 height: 16px;
 line-height: 16px;
 padding-left: 20px;
 margin-right: 10px;
}

HTML

<span class="icon">Icon text goes here</span>

Here’s What It Should Look Like

The Code Explained

• We set the background property to our icon image.
• The position is set 0 0, you shouldn’t have to tweak this, as long as your icon height matches your text height.
• We display it as a block so the whole icon is shown.
• The height is set to the height of our icon.
• line-height forces the text to align vertically with the icon.
• We pad the class left 20px to leave space for the icon.
• Then we add a margin of 10px right to create some space between the icon and the icon text.

That’s it, now your icon will always appear vertically centered to your text. As well, it will have the same spacing between the icon and the icon text.

You can easily apply this same technique to larger icons that are combined with larger icon text. Simply tweak the height, line-height, padding, and margin to match your new icon and text sizes.

Large Icon With Body Copy

Using a larger sized icon with body copy is quite similar to the above technique. We simply need to tweak some of our property values to work with the bigger icon. Let’s assume the size our larger icon is 48px x 48px. Here’s what the code looks like:

CSS

.icon-big {
 background: url(icon-big.png) 0 0 no-repeat;
 display: block;
 height: 48px;
 line-height: 48px;
 padding-left: 50px;
 margin-right: 10px;
}

HTML

<span class="big-icon">Icon text goes here</span>

Here’s What It Looks Like

The Code Explained

• We’ve increased the height of the class to be 48px, so it matches the height of our larger icon.
• We’ve also added a line-height of 48px. This will force the our text to center vertically in the layout.
• I’ve also increased our padding-left to 50px to leave enough room for the width of the new icon.

It’s that easy. But what about links? Read on for an explanation of making the icon and text work as a link.

Adding A Link

There are two ways we can do this. The first would be making the copy a link and leaving the icon an image. The second way would be to make the icon and copy all part of the link. It’s actually quite easy, it simply depends on where you place your link tag. See below for the two examples:

Only The Copy Is A Link

<span class="icon"><a href="#">link copy here</a></span>

The Icon and Copy Are Both A Part Of The Same Link

<a href="#"><span class="icon">link copy here</span></a>

That’s it, that’s all. This is a fairly simple technique, but it gives you way better control of the positioning of your icons. If you have any questions, please leave a comment.

View The Demo

Download The Source Files

Tags: center, CSS, link, position, vertical