Anteponer icono a <li>

[ferxxel]

Estoy diseñando el menu de una web para mi centro de estudiantes y el problemas es que el texto no se alinea con mi texto

aqui el código

Código HTML:

<div  id="navlist" style="height:1000px;">
        <ul>
            <li><a href="#" ><img src="IMG/PNG/essencial/137b.png" id="ico"/>Directorio</a></li>
            <li><a href="#"class="active" ><img src="IMG/PNG/essencial/040b.png" id="ico"/>Fechas de Examenes</a></li>
            <li><a href="#"><img src="IMG/PNG/essencial/036b.png" id="ico"/>Horarios de Clase</a></li>
            <li><a href="#"><img src="IMG/PNG/essencial/055b.png" id="ico"/>Centro de Software</a></li>
            </ul>
</div>
 

y el CSS

Código CSS:

body{
    background-image:url(IMG/background.png);
    padding:0px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    margin: 0px;
}
 
html {
    border: 0px;
overflow: hidden;
}
a{
    text-decoration:none;
    margin-top:auto;
    margin-bottom:auto;
    }
#encabezado {
    border: 0px;
    height: 108px ;
    width: 100%;
    background-image:url(IMG/backback2.png);
    float:left;
    top:0%;
    margin-left:0 px ;
    margin-right: 0px;
    margin-top:0px;
    margin: 0px;
    
} 
#sombra {
    background-image: url (IMG/sombra.png);
    height:4px;
    width: 100%;
    float:left;
    top:0%;
    margin: 0px;
}
    
    
#Contenedor {
    margin:0px;
    width:610px;
    height:100%;
    position:relative;
    top:0px;
    bottom:0px;
}
#pie {
    float:left;
    bottom:0px;
    position:relative;
    height:100%;
    margin:auto;
}
#ico {
    width:32px;
    height:32px;
    left: 50%;
    top:50% ;
    margin-top: -5%;
        margin-left: -5%;
    margin-right: 5px;
        border: 0;
    }
#center {
    top:50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}   
#ID {
    vertical-align:middle;
}
#navlist {
    background-color:#222;
    float: left;
    width: 220px;
    margin-top: 0px;
    margin-left:0px;
    hight: 1000px;
    margin: 0px;
    margin-top:auto;
    margin-bottom:auto;
   }
#navlist ul {
    list-style: none;
    
}
 
#navlist li a{
    display: block;
    height: 15px;
    float:right;
    width: 100%;
    padding:15px;
    margin: 5px;
    border-right: 4px solid #444;
    color: #999;
    text-transform: lowercase;
    font-size: 0.9em;
    }
 
#navlist li a:hover {
    color: #f4f4f4;
    background: #333;
    border-right: 4px solid #00B3FF;
    
    
    
}
 
#navlist li .active {
    color: #999;
    background: #333;
    border-right: 0 px solid #444;
    
}
 

como lo soluciono?, o como puedo hacer para lograr que quede como yo quiero?
GRACIAS DE ANTEMANO

[pzin]

En principio sólo tendrías que alinear la imagen al texto, especificando un alineamiento vertical a la imagen:

Código CSS:

vertical-align: middle;
 

No puedes el mismo identificador para los iconos, tendrás que cambiar #ico por .ico.

[chabri]

Siempre puedes usar :before / :after

Por ejemplo:

Código CSS:

li {
padding:20px 10px;
}
li:before {
background: url () scroll 0 0 rgba();
}
 

Juega con eso. Un saludo.

[pzin]

Iniciado por chabri

Siempre puedes usar :before / :after

Para eso le pones la imagen de fondo directamente a li. No veo yo mucho sentido en usar un pseudo-elemento ahí.

[chabri]

Iniciado por pzin

Para eso le pones la imagen de fondo directamente a li. No veo yo mucho sentido en usar un pseudo-elemento ahí.

Tienes razon, pero utilizando los after o before no estas trabajando directamente sobre el li, puedes jugar mucho mas.