Font Awesome - Making Icon Spin In Reverse Direction Not Working

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?

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:

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:

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>

1 Like

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

1 Like