UL LI custom icons

unordered List with custom icons

by voodoomonkey

HTML

<div id="sidebar">
<ul>
    <li class="panel" id="selected">Display Panel</li>
    <li class="list">Display List</li>
    <li class="profile">Edit Profile</li>
    <li class="settings">Settings</li>
    <li class="new">Add new Jump</li>
</ul>
</div>

CSS

@font-face {
	font-family: 'HelveticaNeueMed';
	src: url('https://dl.dropboxusercontent.com/u/97182346/HelveticaNeueMed.eot');
	src: url('https://dl.dropboxusercontent.com/u/97182346/HelveticaNeueMed.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
#sidebar
{
    width:200px;
    font-family: 'HelveticaNeueMed';
}
#sidebar ul
{
    list-style:none;
    background-color: #123141;
    padding:0;
}
#selected
{
    background-color:#ccc;
    color:#123141 !important;
}
#sidebar li
{
    padding:16px;
    color:#fff;
    text-indent:10px;
}

.panel:before{
    background-image:url("https://dl.dropboxusercontent.com/u/97182346/sidebariconssprite.png");   
    background-position: 0px -416px;
    display:block; 
    width:16px;
    height:16px;
    content:'';
    float:left;
}
.list:before{
    background-image:url("https://dl.dropboxusercontent.com/u/97182346/sidebariconssprite.png");   
   background-position: 0px -160px;
    display:block; 
    width:16px;
    height:16px;
    content:'';
    float:left;
}

.profile:before{
    background-image:url("https://dl.dropboxusercontent.com/u/97182346/sidebariconssprite.png");   
   background-position: 0px -672px;
    display:block; 
    width:16px;
    height:16px;
    content:'';
    float:left;
}
.settings:before{
    background-image:url("https://dl.dropboxusercontent.com/u/97182346/sidebariconssprite.png");   
   background-position: 0px -544px;
    display:block; 
    width:16px;
    height:16px;
    content:'';
    float:left;
}

.new:before{
    background-image:url("https://dl.dropboxusercontent.com/u/97182346/sidebariconssprite.png");   
   background-position: 0px -352px;
    display:block; 
    width:16px;
    height:16px;
    content:'';
    float:left;
}