René Pacios

/* Overflow My Brain & More */

Font Awesome, como girar iconos basados en fuentes

fontawesome_0Hoy toca hablar un poco de CSS. Los que me conocéis, o me leéis sabéis que el tema de CSS no es mi fuerte, pero también me gusta cacharrear con todo y hacer las cosas lo más optimas posibles, así que  si un efecto se puede hacer con CSS3 porque voy a tener que incluir un script?

El caso es que me encontraba maquetando mi nueva web en la que estoy usando font-awesome como fuente de iconos. Si no sabes que es una fuente de iconos te aconsejo que eches un ojo por internet de sus múltiples ventajas y la cantidad de repositorios de este tipo de fuentes que hay, uno de los que más me gusta es http://icomoon.io/#icons, con 450 iconos en su versión gratuita, en serio necesitas más?

Una fuente de iconos básicamente sustituye los clásicos sprites de iconos, que debíamos hacer con todos sus diferentes tamaños, sus hojas de estilo asociadas, andar jugando con los background position, todas esas cosillas en las que al final invertimos demasiado tiempo.

La gran ventaja de este tipo de artefactos es que aunque nosotros veamos un icono en la web, en realidad es una "letra" de la fuente, y podemos tratarla como tal, cambiar su tamaño, color, ponerlo en negrilla, rotarlo… ¿rotarlo? pues sí con css3 rotar texto, incluso atándolos a algún evento del tipo :hover, :focus, sin embargo con font-awesome no es tan intuitivo para aplicar los estilos.

Vayamos al problema, el caso es que estaba tratando de rotar unos iconos para dar un efectillo al pasar el ratón por encima y el icono hacía caso omiso a mi orden, me tuvo un buen rato dándole vueltas hasta dar con la solución.

Veamos un poco de código:

<div class='mi-clase'>
    <i class="icon-suitcase icon-5x"></i>
</div>

 

Y el código CSS3 que estaba utilizando, para que rotase era el siguiente:

.mi-clase:hover i {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
color:red;
}

 

Lo curioso de la situación es que con el código CSS anterior no gira el icono sin embargo si que aplica el color rojo, al ver esto la verdad que pensé que no se podía aplicar rotate, a este tipo de fuentes, sin embargo no encontraba mucha lógica al asunto así que comencé a buscar el motivo o una solución sin mucha suerte, y de repente recordé que font-awesome cuenta con una serie de clases que permiten poner los iconos rotados 90/180/270 grados, o hacerles un mirror vertical / horizontal así que si se podía pintar un icono a 90º también podría aplicar ese estilo tras un :hover, así que busqué el ejemplo, examiné el estilo y ahí estaba, la solución era tan simple como añadir el modificador  "before" en el selector de la clase, así nuestro código quedaría de la siguiente forma

div:hover i::before {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  color:red;
}

Ya tenemos el efecto esperado, en este caso ocurre que cuando pasamos el ratón sobre el div contenedor el icono, en este caso una maleta, hará un efecto de flip, rotando 360º. De esta forma tan sencilla podemos dar efectos a los iconos de font-awesome sin utilizar JavaScript para ello.

Puedes ver este ejemplo y hacer tus pruebas en http://codepen.io/rene15009/pen/cLDau

Nos leemos!!!

Acerca de René

René Pacios es un apasionado de la tecnología, autodidacta, emprendedor, le encanta el desarrollo web, para moviles, aplicaciones, todo aquello que automatice tareas y haga que las máquinas trabajen para él. Es un gran fan de las tecnologías Microsoft, y le encanta estar a la última siempre que el tiempo se lo permite. Siempre quiso ser cantante, pero creo que en esta vida se va a quedar sólo en canta-mañanas

               

Comentarios (1) -

  • Pedriño

    01/10/2013 9:49:52 | Responder

    Siempre es bueno leer a este hombre Smile

Agregar comentario

Loading