Changing Font Awesome icon colors

Studio

Colors

Screen Actions

Problem

I'm using a couple of Font Awesome icons in my Screens. I want to make them change color on mouseover. How can I do that?

Solution

The Font Awesome icon component can be made to change color according to user interaction. One easy way of changing the color on mouseover is by using some simple code. In this recipe, we'll make our blue icon change to red on mouseover.

Step 1
On the properties panel of the Font Awesome icon, set the icon color in the "Color" field. This will be the base color of the icon.

Step 2
Set a specific HTML ID for the component. For this example, we'll call it "myicon".

Step 3
Set the color of the icon on mouseover:

Add a JavaScript action to the “onmouseover” event.
Paste the following into the code field:
1document.getElementById('myicon').getElementsByTagName("i")[0].style.color = "red"
Replace "red" with your choice of color.

Step 4
Set the base color of the icon:

Add a JavaScript action to the “onmouseout” event.
Paste the following into the code field:
1document.getElementById('myicon').getElementsByTagName("i")[0].style.color = "blue"
Replace "blue" with whatever color you originally set in the Color field in Step 1.

Download an example file: TextIconChangecolor.awexport

For more information, see the Font Awesome Icon documentation.

Could this article be better?Yes, let me send feedback

Back to Cookbook

Comments (0)

Developer is transitioning to Appway Community

All material for Appway 6 is still available here on developer.appway.com during the transition to Appway Community.

Material for Appway 6.3 and Appway 7 is available in the Knowledge Base on community.appway.com.

Note: The Community Blog, our Forum, and the Support system are available exclusively on Appway Community.

Any questions or feedback? Please contact community@appway.com

Cookbook

Changing Font Awesome icon colors

How Could This Recipe be Improved?

Developer is transitioning to Appway Community

See Also

COOKBOOK