X Icons spin class

[dhunink]

Hi,

I know X Theme uses the amazing Font Awesome icons.
These icons usually can be animated by adding the CSS class fa-spin, which essentially applies this CSS:
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;

On X Theme this class is not available. I could off course create my own x-spin class, but I was wondering if I’m missing something out. Is there a class or another way already built-in to animate the default X Icons?

[lely]

Hi There,

There’s no animation available for Icon. On some element like feature box or feature lists that uses icon there animations available but nothing on just Icon element. You may proceed with custom x-spin class.

Check samples from here: http://fontawesome.io/examples/

[dhunink]

Hi,

I can’t imagine I’m the only one looking for this. Wouldn’t it be something for the developers to look into as a feature request? It’s rather easy to implement I guess…

For anyone browsing this topic in the future, here’s my shot at spinning icons:

Give your icon an additional CSS class called x-icon-spin, resulting in html like this:

<i class="x-icon x-icon-spinner x-icon-spin" data-x-icon="&#xf110;" aria-hidden="true"></I>

Add to your global CSS:

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

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

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

[jade]

Hi there,

We appreciate your feedback and thanks for sharing your solution.

I have added this in our Feature Request list so that it will be considered in the future development.

Thank you.