Poner iconos con CSS

Los iconos se están volviendo cada vez más parte importante de blogs y webs. Son demostrativos y ayudan visualmente en el diseño nuestro sitio. Una forma de ponerlos automaticamente en ciertas partes es por medio de estilos (CSS), adjudicandole ciertas propiedades a clases o selectores. Veamos estas propiedades.

Por ejemplo, sí quiero colocar un icono a cada elemento de una lista del tipo:

<div id="links">
<ul>
  <li>Google</li>
  <li>Yahoo!</li>
  <li>Altavista</li>
</ul>
</div>

Hacemos uso de las etiquetas que envuelven a cada elemento, en este caso <li> y entonces a esta etiqueta habrá que adjudicarle el icono de este modo:

li {
padding-left: 20px;
padding-top: 5px;
background: url(http://bp3.blogger.com/_Zuzii37VUO4/RkqWoZyax5I/AAAAAAAABQI/iZGqR034T-U/s1600/link.png) center left no-repeat;
}

El padding izquierdo es cuando deseamos que el icono se coloque a la izquierda del texto y 20px porque el icono que usaremos en el ejemplo tiene 16x16px y así dejar un margen de 4 px, entre el icono y el texto. El padding arriba es porque muchas veces el tamaño del texto es inferior al tamaño del icono y habrá que cubrir esa holgura para que no se corte el icono.

El background o fondo es en sí, la propiedad que muestra el icono, la ruta del icono se especifica entre los parentesis, center es la alineación vertical, left es de acuerdo a la ubicación deseada (la misma que el padding) y especificamos que el icono no se repita con un “no-repeat”.

Con esto, todos los elementos entre las etiquetas <li> traeran con sigo el icono en su lado izquierdo.

Cuando se trabaja con listas, también es necesario eliminar la viñeta que se trae por defecto editando la etiqueta <ul> de este modo:

ul {
list-style-type:none;
}

Resultado del ejemplo:

• Google
• Yahoo!
• Altavista