Cómo ponerle el gorrito de navidad al logo de tu web

¡Buenos días! En este vídeo-tutorial un poco diferente te quiero enseñar cómo poner un gorrito de navidad al logo de tu web sólo con CSS, sin tener que modificar el logo en sí. ¡Vamos allá!

Yo estoy trabajando con WordPress pero como se trata de puro CSS puedes aplicar este método a cualquier CMS o web hecha de cero sin problema.

Repasemos los pasos que hemos seguido para ponerle un gorrito navideño a nuestro logo:

Descargamos y subimos el icono del gorrito

Puedes buscar un icono por tu cuenta en cualquier portal online pero te recomiendo esta web ya que tiene una gran variedad de iconos para descargar: Flaticon. Una vez descargado el icono nos vamos a Medios > Añadir nuevo y subimos este icono como si de una imagen cualquiera se tratase:

Aviso: si vas a subir el logo en SVG por defecto el WordPress no te lo permitirá. Revisa esta entrada de cómo subir archivos con formatos no permitidos en WordPress para ver cómo puedes subir los archivos SVG. O puedes usar este plugin: Safe SVG

Una vez subido el icono nos quedamos con la URL de ese icono para utilizarla luego en el CSS.

Ponemos el gorrito al logo

Ahora nos toca escribir CSS así que podemos irnos a Apariencia > Personalizar > CSS personalizado o utilizar otras formas de insertar CSS en WordPress.

Te recomiendo seguir los pasos del vídeo para poder adaptar el CSS a tu caso pero también te comparto el CSS que he utilizado en el vídeo, para que tengas una referencia:

/*Gorrito de navidad*/

.site-title {
position:relative
}

.site-title a:before {
content:"";
background-image:url(http://empresiona.local/wp-content/uploads/2018/12/hat.svg);
background-size:25px 25px;
background-repeat:no-repeat;
width:25px;
height:25px;
position:absolute;
left:-11px;
top:-7px;
transform:rotate(-33deg)
}

¡Y ya estamos! Con un simple icono y un poco de CSS ya le hemos dado un poco de espíritu navideño a nuestra página web.