Como poner un icono con css en el titulo

Esta es una forma de añadir un detalle simpático y bonito al blog, de una manera muy sencilla usando el css y una imagen que tengas creada para ello, ten en cuenta que no sea muy grande y los colores que va a usar para no desentonar con el blog.

Primero crea el icono con una imagen que te guste, puede ser un lunar, un corazón, tu logo...

Yo siempre digo que un blog debe de estar lleno de detalles.

Podéis crear el icon en cualquier editor de imágenes pero debe de ser png de fondo transparente, podéis ver algunos editores para imágenes en este post: Editores de imagen gratuitos en el que vas a encontrar algunos sorprendentes y muy fáciles de usar.

Este tutorial es muy sencillo se puede realizar en blogger, wordpress.org y wordpress.com (si has contratado el extra de editar tu css).

Muy importante que comiences a trabajar con algún editor de texto plano para web,

Voy a explicar como poner el icono en blogger porque en realidad es mas complejo de realizar, aunque CSS es el mismo para todas las plataformas y en el caso de este tutorial para añadir dibujos al título cambia la clase que tiene asignada el título del post.

Como poner iconos en el título de un post de blogger o wordpress

1# Averiguar como se llama la clase de nuestro título del post.

El blogger es: .post-title, .title, y en wordpress suele ser casi siempre: .post-title es raro que cambie pero....

En wordpress depende de la plantilla que tengas instalada por lo que tenemos que cotillear con el inspector de propiedades aunque suele ser siempre post-title o entry-title.

2# Alojar el icono y apuntar la ruta

En blogger, puedes subirlo entre las imágenes de una entrada antigua porque no se va a notar y así no hay posibilidad de que se pierda esto es una pequeña picardia que puede resultarte interesante, en el caso de que prefieras alojar el icono de manera externa puede usar, picassa, dropbox, flickr... con tal de que conozcas la url completa sirve.

Si temes por que tienes muchas imágenes alojadas y quieres aligerar un poco tu blog deberías echar un ojo a este post sobre los CDN que te va a venir de perlas: que es un CDN y porqué puede salvarle la vida a mi blog.

En wordpress lo puedes subir a la carpeta de imágenes y listo!.

3# Vamos a añadir el css de nuestro icono.

Vamos a añadir el css correspondiente en la plantilla para que luego aparezca el icono en el título de los post.

En blogger tienes para cambiar el CSS necesitas ir a Plantilla>Personalizar>Avanzado>Editar CSS

En wordpress la localización del CSS puede variar ya que incluso hay temas que tienen un apartado para que añadas estilos e incluso el plugin Jetpack tiene en la sección de Apariencia el editar CSS de manera muy sencilla

Vamos a crear una clase que se llamara .post-title es muy importante que lleve el punto delante porque es la manera de que ese nombre sea una clase y dentro de esa clase entre llaves vamos a colocar el css entre el cuál pondremos la dirección de dónde esta alojado nuestro icono.

Cuidado mira si existe ya la clase .post-title puede tener otro nombre en mi caso es .title

Aquí es dónde viene declaradas todas las clases de tu plantilla de blogger, conviene aprenderlo de memoria, es broma pero si viene bien que sepas mas o menos como están divididas algunas clases por si quieres lanzarte a modificar el CSS por tu cuenta.

#4 Vamos a ver que código CSS necesitamos para adornar nuestros títulos

  .post-title:before {
    background: url( url de dónde tienes guardado tu icono) no-repeat left transparent;
    padding-left: 10px;
    }

Es importante que mantengas la propiedad transparent y que el icono lo guardes en png sin fondo png24

Yo he puesto un padding a la izquierda de 10 px puedes poner el que quieras o quitarlo, simplemente es para recordarte que puedes añadir a la clase las propiedades que quieras.

Si quieres que el icono esté colocado antes del título debes poner después de la clase :before y si quieres que aparezca después del título cambia :before por :after.

Una vez hecho esto puedes poner el icono de diferentes formas:

# Icono delante y detrás del título de la entrada

Icono en css delante y detrás del título gracias a los atributos :before y :after

.post-title:before,
.post-title:after {
content: url(url de dónde tienes guardado tu icono); }

# Imagen arriba sobre el título

También tiene el atributo :before y al clocar el display block queda arriba, he añadido un atributo que es el ancho de la imagen para que recuerdes que puedes añadir mas cosas a los estilos de esta clase.

.post-title:before{ 
content: url(url de dónde tienes guardado tu icono); 
display: block; 
width: 60px; 
margin: 0 auto; }

# Imagen la izquierda arriba del título:

.post-title:before {
content: url(url de dónde tienes guardado tu icono); }

Dependiendo de la plantilla o la plataforma puedes tener que cambiar el nombre de la clase, lo importante es saber cuál es la del título

Te recomiendo que elijas imágenes con el tamaño exacto o muy aproximado al que quieres que se vea para no cargar la página, es preferible el fondo transparente por lo que la imagen es mejor que sea png.

Puedes en lugar de iconos colocar imágenes normales.

Espero que os haya gustado!