Títulos de la sidebar personalizados II: imágenes e íconos

Hace un tiempo vimos cómo personalizar los títulos de la sidebar con colores, bordes, diferentes tipos de fuente, etc. Ahora, personalizaremos los títulos con imágenes. Empezamos?

IMAGEN DE FONDO

Una forma de personalizar el título de la sidebar con imágenes sería añadiendo una de fondo ,para ello trabajaremos con el código base que les di en la entrada anterior (ver detalles) que era este.

.sidebar h2{
background:#FFF;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}

Para añadir la imagen de fondo deberemos de cambiar #FFF; por url(url-de-la-imagen); de manera que el código quede así:

.sidebar h2{
background:url(url-de-la-imagen);
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}

Y el resultado será el siguiente:



ÍCONO AL COSTADO DEL TÍTULO

Otra forma de personalizar un título de sidebar con imágenes sería añadir algún ícono al costado del título, algo parecido a agregar un ícono a los títulos del post.

Para ello, en nuestro código base, deberemos de cambiar background: #FFF; por background: url(url-de-la-imagen) no-repeat;

El resultado será el siguiente, que pueden apreciar en mi blog de pruebas:



En fin, hay muchas formas de usar las imágenes para obtener un título bonito, personalizado y original. Ahora toca que personalicen sus títulos, ya sea con colores y borde, con imágenes e íconos o con una combinación.Hay que dejar volar la imaginación