CSS Sprite

By:    Updated: January 24,2017

Using CSS, it is possible to create a link or menu button with a small icon in front of them. If you have a long menu list, you will have many separate image files which will increase web requests.

How to optimize ?

You can put all small icons on a single image, then background-image and background-position to several different parts of the menu, it is known as a css sprite.

The advantage of using sprites is that the web browser only needs to request one image rather than many images, which can make the web page load faster.

html code:

<ul>
	<li>
		<div>
			<span class="icon icon_auth_list"></span>
			<a fs_link="auth_list.php" href="javascript:void(0);">Auth List</a>
 		</div>
	</li> 
	<li>
		<div>
			<span class="icon icon_member_list"></span>
			<a fs_link="member_list.php" href="javascript:void(0);">Member List</a>
		</div>
	</li> 
	<li>
		<div>
			<span class="icon icon_edit_profile"></span>
			<a fs_link="edit_profile.php" href="javascript:void(0);">Edit Profile</a>
		</div>
	</li>
 </ul>

css:

.icon              { background: url(tabicons.png) no-repeat; padding: 2px 9px; }
.icon_auth_list    { background-position: -100px -18px;  }
.icon_member_list  { background-position: -360px -200px; }
.icon_edit_profile { background-position: -380px -200px; }

tabicons.png:

menu list:

More in Development Center
New on Valinv
Related Articles
Sponsored Links