English Português

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

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Fernando / Hace 10 años /

      No entendi muy bien la explicación.
      En que parte pongo el codigo?
      Que codigo reemplazo? ¿entre que y que lo pongo?.
      Una duda más:
      Para que me sirve tener estos iconos? ¿En que me ayuda?
      Saludos.

      Responder a Fernando →
    2. Francisco / Hace 10 años /

      Que tal Fernando!

      Este artículo es una explicación de forma general, valido para blogs y web, es probable que quieras saber la aplicación en Blogger y aqui te mostramos de forma práctica lo explicado en esta entrada:

      http://blogyweb.blogspot.com/2007/05/poner-iconos-en-blogger.html

      Saludos!

      Responder a Francisco →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad