CSS – Creating icons for web page using CSS & XHTML

Feeds:: Posts; Comments

CSS – Creating icons for web page using CSS & XHTML

March 7, 2008 by Prashant Pandey

Introduction
Hi guys, here I am with a new and interesting article. This article related to web development, I have used the XHTML and CSS languages to demonstrate example in this article. In this article you’ll find a great and simple technique of CSS and XHTML to make icons in web page. Most of the sites using this trick to create the icons in their site. May be you people already know this but I found this interesting and I think this will help a beginner level web developer a lot, so I am including this in my blog (techAhead).

Concept and implementation of “CSS ICONS”
I think I can explain this more clearly to you by giving you some visual examples. Basically we use this trick to create icons in the website to create the look and feel of the web page more users friendly and attractive. The best example I can give you is Orkut.com a social community site, they are using the icons in their menus like as below:

Imagine orkut without these cool and cute icons, if someone asked me to “remove these icons or not?” Then my personally thought would be NO. They gives a cool look to orkut, these icons are like make up of web page.
Now after this entire explanation lets move on to real question, is it difficult to do create these icons??, few weeks ago someone asked me that can you create some thing like below,

I said yes why not, take and image tag and then your text, just and it’s completed. Like below:

<img src=”myicon.png” /> profile

But this is not so easy, yeah what I said in previous line (with using image and text) its is possible but alignment will be a major issue in that case, your text and image will not be aligned properly and hence it will not achieve the perfection.
So to solve this problem you can make use of CSS with XHTML. Like below I have done:
Here I am making a html page with using CSS. The code is below:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS icon demo</title>

<body>

<!—HTML Code.– >
<span class=”icon_demo”>Information</span>

</body>
</html>

The above code will produce the following output.

In the above code, icon_demo is the CSS icon class which is responsible for setting the icon image in the span or in the div properly and padding done to display the text properly. And the span (HTML Code) in which we’ll set the CSS class and hence it will display the icon and text in properly aligned way, you can make use of div tag also instead of span tag. It all depends on your requirements.
You can use these icons in your menus like orkut done, or in links also or anywhere where you think they’ll look cool and perfect.

That’s it. You people try it by yourself and feel free to contact me in case any problem regarding this topic. I know this is a very small problem and solution but I found this interesting one, so I am including it in my blog. Hope it helps someone.
Give your comments.
Thanks

Reference : Prashant Pandey (TechAhead)

*******

Posted in CSS | 10 Comments

10 Responses

on March 7, 2008 at 7:30 pm | Reply sachinkraj

its simple and its quite obvious, but is needed to know how this kind of simple things happens and how we all developers do, so that new developers can take help from it.

GReat work prashant
on March 8, 2008 at 5:06 pm | Reply rich2912

Good guide. I personally like icons and use them on my site.
on March 10, 2008 at 10:27 am | Reply Ravi Raghav

Really a gr8 tutorial for the beginners. Please write more on this, it can become more popular…….:)
on March 10, 2008 at 10:35 am | Reply vikas kumar

Hi Prashant,

Really it’s too good for biggner. because this problem seems very small but i can produce very attractive result who will use your thought. I think so many people will take benefit from your article. Really you have done a great job, keep it up and be continue……………
on March 10, 2008 at 4:41 pm | Reply Dheeraj Pandey

I think this is good article for website designer it is really cool. It can help us to create cool icons and menu and i am sure it will help to beginers and other programmer who want that but they have no tact. Thanks for this great article.
on March 10, 2008 at 11:31 pm | Reply Some.Net(Guy)

Try to avoid using the “span” tag whenever possible, as it is semantically negligible. Instead, use this trick for labeling your links or list items, ie Homepage. This is much better and more efficient (and less bloated) than using a link with a span tag around it.
on March 10, 2008 at 11:32 pm | Reply Some.Net(Guy)

ehh…on my comment above, that’s supposed to read

<a href=”index.html” class=”link-home” title=”Homepage”>Homepage</a>
on March 11, 2008 at 5:32 am | Reply prashantvictory

Hey Some.Net(Guy),
Thanks for your tip, it really help everybody, thanks.
on May 22, 2008 at 9:14 am | Reply patrik

Nice article, thanks…
on March 8, 2009 at 2:23 am | Reply Spacekraft

Nice clean code. Exactly what I was looking for. Great recommendation by Some.Net. Adding it to the a href helps clean up the text underline for the link on hover. The a href puts the underline only under the text. If you use the span, the underline is both under the text and the space before (or after if the icon is on the right of the text) the icon.