html - pro - ¿Podemos modificar una velocidad de giro Font Awesome?
font awesome pro download (2)
Respuesta corta
Sí tu puedes. Reemplaza la clase .fa-spin en el ícono con una nueva clase usando tu propia regla de animación:
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x slow-spin"></i>
Respuesta más larga
Si miras el Font Awesome CSS file , verás esta regla para hacer girar la animación:
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
La regla para la clase .fa-spin refiere a los keyframes fa-spin :
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Puede usar los mismos fotogramas clave en una clase diferente. Por ejemplo, puede escribir la siguiente regla para una clase llamada .slow-spin :
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
Ahora puede rotar elementos HTML a la velocidad que elija. En lugar de aplicar la clase .fa-spin a un elemento, aplique la clase .slow-spin :
<i class = "fa fa-cog fa-5x slow-spin"></i>
Tengo un engranaje giratorio en mi sitio web que se muestra con este código:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<i class = "fa fa-cog fa-5x fa-spin"></i>
Personalmente, creo que la velocidad del engranaje es demasiado rápida. ¿Puedo modificarlo con CSS?
Similar a la respuesta de Michael Laszlo. Esto es lo que uso para hacer que sea más rápido para fa-refresh ya que el fa-spin por defecto es muy lento.
.fa-spin {
-webkit-animation: fa-spin 0.75s infinite linear !important;
animation: fa-spin 0.75s infinite linear !important;
}
Uso! Importante para que pueda controlar la especificidad :)