Streaming live at 10am (PST)

Font Awesome - Making Icon Spin In Reverse Direction Not Working


#1

Ok, so I am using font awesome icons. I was able to embed a spinning cog into my website. The code works fine. However when I try to make it spin counter-clockwise, it does not work. It stops spinning. Then, I found on the Font Awesome website some CSS code that should allow me to make it spin in reverse. I put that into the body custom code, and then used the correct function to make it spin in reverse, but it just stops spinning. Here is my code:

Once I saved this in the custom code, then I added the suggested code to the embed:

But, the cog stops spinning. If I remove the -reverse in the embed code, the cog spins clockwise again. Does anyone see what's wrong here? Can Webflow handle this kind of CSS?


#3

Does anyone have any idea how to get a font awesome icon to spin in reverse? I tried putting CSS code in the page body custom code, I put CSS code in the HTML embed itself, I tried HTML code in the HTML embed...It just won't spin in the opposite direction...I know the code works, because if I put the code in this website to test the code, it works great:

http://jsfiddle.net/tagliala/em2ztqsz/3/

In this site they are using the fa-spinner icon, but if you change fa-spinner with fa-cog on the html side, in the fa-spin-reverse html code, then the cog appears and spins in reverse...why doesn't this work in Webflow?

Here is my share link:

https://preview.webflow.com/preview/stylus-web-designs?preview=4adb04642c5d353b88b104b3515de96d

Some pics:


#4

I think it doesn't work because you wrap CSS code with the SCRIPT, which is syntaxis for javaScript or jQuery.

Try to wrap it with <style> </style>


#5

That worked! You are awesome, thanks! I am new to coding, there are so many languages, it's hard to tell the difference lol.


#6