Changing Font Awesome Icon On Hover

Design help Custom code
1

My custom code for the embed next to the Log In link doesn’t seem to be working. The shopping cart icon is supposed to turn red when the mouse is hovering over it. Could you check my could and tell me why the icon does not change to red?

https://preview.webflow.com/preview/spyder-re-create?preview=be1e0e1c092df554560d99e94499dbfd
http://spyder-re-create.webflow.io/

3

Your <style> tag is placed inside your <body> because you have it in your embedded item. Can you check what happens if you place it in your <head> instead?

And is there a reason for even using that embed? You can easily just upload and use Font Awesome-hover inside Webflow without embedding anything.

4

Really? How do I upload it and use it without embedding?

5

Also, placing the code in the didn’t make it work…

6

Also, I just realized why the way I had it didn’t turn read. I was using style=“color:white” in the html, and for some reason this interferes with the hover action…But I would still like to know how to do this without embedding and put it up in the black navbar next to Log In and make it turn red on hover :slight_smile:

7

Hello! Sorry for the late reply. In order to embed Font Awesome, just head over to http://fontawesome.io and download the font files. Then you upload them (preferably all of them) in your Site Settings. Then just change your font in the Designer to Font Awesome, and paste in the desired icon from Cheatsheet | Font Awesome (you need to copy the actual icon from this site). This way you can easily change color, size, etc on any icon. Hope this was understandable.

8

Awesome! Ok, so my other question then is how would animate them this way? For example, I can make the cog font awesome icon rotate by putting the icon into an embed and then adding a custom code to make it spin…how could this be done with the way you suggested?

9

Try this:

For the Shopping Cart Embed hover state go down to Transforms and give it a Rotate, maybe Z 360degrees.
Go back to the Shopping Cart Embed’s ‘none’ state and add a transition for All Properties.

Now when you hover over and off, it should spin.