Can we modify a Font Awesome spin speed?

Question

I have a spinning gear on my website displayed with this code:

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

Personally, I think that the speed of the gear is too fast. Can I modify it with CSS?

Answer 1

Short answer

Yes, you can. Replace the .fa-spin class on the icon with a new class using your own animation rule:

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

Longer answer

If you look at the Font Awesome CSS file, you'll see this rule for spinning animation:

.fa-spin {   -webkit-animation: fa-spin 2s infinite linear;   animation: fa-spin 2s infinite linear; } 

The rule for the .fa-spin class refers to the fa-spin keyframes:

@keyframes fa-spin {   0% {     -webkit-transform: rotate(0deg);     transform: rotate(0deg);   }   100% {     -webkit-transform: rotate(359deg);     transform: rotate(359deg);   } } 

You can use the same keyframes in a different class. For example, you can write the following rule for a class called .slow-spin:

.slow-spin {   -webkit-animation: fa-spin 6s infinite linear;   animation: fa-spin 6s infinite linear; } 

Now you can rotate HTML elements at the speed of your choosing. Instead of applying the class .fa-spin to an element, apply the .slow-spin class:

<i class = "fa fa-cog fa-5x slow-spin"></i> 

Answer 2

Not necessary to use an own animation or class definition. The speed of any css animation can control by the animation-duration css property. Simply use:

.fa-spin {   animation-duration: 3s; // or something else } 

As higher the value the lower the animation speed.