Can we modify a Font Awesome spin speed?

Question

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

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>