Using CSS to create a site navigation menu with icons

In every Internet application I've created, I've tried to avoid creating a menu that consists entirely of pictures. In my opinion, text should be used in the Web Menu system. This also makes the menu cleaner, clearer and easier to read, regardless of how the application reads it, and when the page is zoomed in, it will not distort. Maybe that's just my idea? But can't we create a good-looking and useful menu?

Here is the code and style for creating the following navigation menus with icons supported.

Basic label

<!--navigation.html--><ul class= "nav" > <li class= "Home" ><a href= "#link" >home</a>< /li> <li class= "about" ><a href= "#link" >about</a></li> <li class= "work" ><a href= " #link ">work</a></li></ul>

The CSS

/* style.css */.nav {width:550px; height:50px; padding:0px 25px; margin:0px; Background:url (img/bg.gif) repeat-x; b　order:1px solid #efefef;} . nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;} li.home {background:　　URL (img/nav-home.gif) top left no-repeat;} Li.home:hover {background:url (img/nav-homehover.gif) top left no-repeat;} li.about {Background:url (img/nav-about.gif　　) top left No-repeat;} Li.about:hover {background:url (img/nav-abouthover.gif) top left no-repeat;} li.work {Background:url (img/nav-work.gif　　) top left No-repeat;}　　Li.work:hover {background:url (img/nav-workhover.gif) top left no-repeat;} . Nav Li a {display:block; padding:15px 0px 0px 50px; color: #000; font-size:18px; font-family:arial; height:35px; Text-deco　　Ration:none;} . Nav li a:hover {color: #C00;} 

In a more granular Web site design , menus change to support more styles. To be fair, if you want to use a specific font--there are few sites that are actually allowed to do so--then you need to use pictures, flash, or some magic. Finally, it is important to keep the ease of use as easy as possible.

The best way to learn is to practice, try to move the icon to the back of the text, or create a vertical navigation menu system with icons.

God Fly thinks, actually this is a very simple tutorial, belongs to the entry level, there is no advanced technology, just provides a way to make a horizontal navigation menu with icons. From the performance of the site, this is not very good, and now the most recommended method is the CSS Sprite, is the use of those images in a picture file, and then by Background-position to separate calls. In addition, for the use of special text, the situation now has a little change, that is, CSS3 has started to support the site's embedded fonts.

Using CSS to create a site navigation menu with icons