René Pacios

/* Overflow My Brain & More */

Font Awesome, como girar iconos basados en fuentes

Font awesome rotate icons

Hoy 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:

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

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

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) -

  1. 라이더 카지노는 SM 카지노와 정식 제휴를 맺고 라이더 카지노 회원들을 소개한다. SM카지노는 블랙 잭, 룰렛 및 포커와 같은 카지노 게임과 관련하여 대부분의 온라인 카지노에서 사용할 수있는 많은 게임이 있음을 알게 될 것입니다. 플레이어는 슬롯, 비디오 포커 및 많은 카드 게임 중에서 선택할 수 우리카지노 있습니다.

    ResponderEliminar