Juglar

Lacónico. 10+3.   Menú

Usar iconos en el blog

Categoría: Diseño Web  -   4 Septiembre 2007  -  

Primero quisimos que apareciera un icono que enlazara a nuestro feed:
<a href="URL_FEED"><img src="URL_ICONO" alt="RSS" /></a>
rss

Después, pretendimos que al principio del título de cada post apareciera un icono muy mono que hemos robado por alguna página:

.titulopost {
background: transparent url(URL_ICONO) no-repeat 0 50%; /**** el icono aparece como fondo del titulo, a la izquierda, y se repite solo una vez ****/
padding-left: 2em; /**** mover un poco a la derecha el titulo para q no pise el icono ****/
}

<h2 class="titulopost"><a href="URL_POST" title="Enlace permanente: TITULO_POST">TITULO_POST</a></h2>

TITULO_POST

Por último, para practicar opciones poco habituales, probamos texto como icono (por ejemplo, quise que los elementos de las listas del menú comenzarán con dos exclamaciones rojas, y acabaran con puntos suspensivos grises)

#menu ul li:before{
content:"!! ";
color: red;
}
#menu ul li:after{
content:" ...";
color:grey;
}

<div id="menu">
<h4>Categorías</h4>
<ul>
<li><a href="URL_CATEGORIA_BLOGS" title="TITULO_CATEGORIA">Blogs</a></li>
<li><a href="URL_CATEGORIA_RSS" title="TITULO_CATEGORIA">RSS</a></li>
</ul>
</div>

Categorías
!! Blogs
!! RSS

Artículos relacionados

Opciones de discusión

Hay 3 Comentarios

  • Gravatar Image

    horriblemente explicado.
    y el script o embed ese..

    No funciona.

    Mauricio 6 Septiembre 2007 17:04 Enlace
  • Gravatar Image

    Así tal cual no puede funcionar. Has probado a pensar que las mayúsculas no hay que tomarlas literalmente?

    juglar103 6 Septiembre 2007 18:20 Enlace
  • Gravatar Image

    Tiene buena pinta el script, habra que probarlo.

    China 14 Marzo 2009 16:31 Enlace

Deja un comentario

Todos los comentarios serán moderados antes de su publicación.

Disculpen las molestias.