how to position an icon in front of text

Often, I had the problem to have really nice icons but I didn’t use them, because it looked bad in front of the text. It was a little bit more upside than the text and I tried to position it with a lot of plus and unnecessary code, until one day I decided to do a little research about this little but annoying issue.

Introduction

We’ll build a little vertical menu and place in front of each text a little icon related to its menu. There are more possibilities to implement this, I’m going to use the <div> and <span> tags. Let’s look at our actual HTML code:

	<div id="menu">
 
		<span class="home">
			<img src="images/home.png" alt="Home">
				<a href="#">Home</a><br />
		</span>
 
		<spanclass="about">
			<img src="images/about.png" alt="About">
				<a href="#">About</a><br />
		</span>
 
		<span class="contact">
 
			<img src="images/contact.png" alt="Contact">
				<a href="#">Contact</a><br />
		</span>
 
		<span class="articles">
			<img src="images/articles.png" alt="Articles">
				<a href="#">Articles</a><br />
		</span>
 
		<span class="search">
			<img src="images/search.png" alt="Search">
				<a href="#">Search</a><br />
		</span>
 
	</div>

And this will look like this:

Right now, we haven’t included any styles or formatting and we have to put after each link a line-break <br />.

HTML and CSS code

After a little formatting and styling and of course rewriting of the HTML, it will look similar to this:

Well, it’s a little bit better than the first one, isn’t it?

The HTML code looks like this:

	<div id="menu">
		<span class="home"><a href="#">Home</a></span>
		<span class="about"><a href="#">About</a></span>
		<span class="contact"><a href="#">Contact</a></span>
		<span class="articles"><a href="#">Articles</a></span>
		<span class="search"><a href="#">Search</a></span>
	</div>

and our cascading stylesheet file:

#menu span {
	display: block;
	font: bold 11px/16px Tahoma, Arial, sans-serif;
	padding: 0px 0px 2px 20px; /* top right bottom left */
}
 
#menu span.home {
	background: url(images/home.png) no-repeat;
}
 
#menu span.about {
	background: url(images/about.png) no-repeat;
}
 
#menu span.contact {
	background: url(images/contact.png) no-repeat;
}
 
#menu span.articles {
	background: url(images/articles.png) no-repeat;
}
 
#menu span.search {
	background: url(images/search.png) no-repeat;
}

I’m using icons of a 16×16 pixels dimension, that’s why I have in my CSS a left padding of 20 pixels. So if you do the math, it has to be a space of 4 pixels between the text and the icon. If you look at the HTML, you can see, that I removed the line-breaks, instead I put into my CSS a display: block; line, which will do the line-breaks.

What about making a list?

It’s almost the same thing, we have to change a little the HTML and the CSS, but it’s really easy. Here’s what it will look like with a list:

The HTML code:

	<div id="menu">
		<ul>
			<li class="home"><a href="#">Home</a></li>
			<li class="about"><a href="#">About</a></li>
			<li class="contact"><a href="#">Contact</a></li>
			<li class="articles"><a href="#">Articles</a></li>
			<li class="search"><a href="#">Search</a></li>
		</ul>
	</div>

and the CSS:

#menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
 
#menu li a {
	display: block;
	font: bold 11px/16px Tahoma, Arial, sans-serif;
	padding: 0px 0px 2px 20px; /* top right bottom left */
}
 
#menu li.home {
	background: url(images/home.png) no-repeat;
}
 
#menu li.about {
	background: url(images/about.png) no-repeat;
}
 
#menu li.contact {
	background: url(images/contact.png) no-repeat;
}
 
#menu li.articles {
	background: url(images/articles.png) no-repeat;
}
 
#menu li.search {
	background: url(images/search.png) no-repeat;
}

You see, it’s really simple, now it’s your thing to decide whether you’ll use the <span> or <ul> and <li> tags.

These beautiful icons are made by famfamfam.

Any comments or reports are welcome.

(3 votes, average: 4.33 out of 5)

Loading ...

One Response

Hiya, I’m doing the same thing too not my link list but to my post title. I am using a slightly bigger icon and I would like to align the text with the middle of the icon, NOT the bottom of the icon. If I were to align the bottom of icon with bottom of text, it’ll be awkward as the icon’s big.
Any idea on how I can align the test with the middle of the icon to balance it off? Thanks.

sylvesteR on April 29, 2008 at 10:45

chains.ch weblog