Can we modify a Font Awesome spin speed?

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

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

Solution 3:

Similar to the Michael Laszlo's answer. This is what I use to make it faster for fa-refresh as the fa-spin by default is very slow.

.fa-spin {
 -webkit-animation: fa-spin 0.75s infinite linear !important;
 animation: fa-spin 0.75s infinite linear !important;
}

I use !important so that I control the specificity :)