Hover variant change breaks icons

Ask the community
1

I have the following:

  1. Standard icon component that loads font awesome icons
  2. Card component that displays a card (mix of things, including icon component above) with several variants

The idea is that I use that card component in various places, with a Hover interaction to change the card’s variant. This ‘flips’ the card to a graphic and back again. This works fine for me (both in Figma and in a browser).

Everyone that I share the prototype with gets the following issue:

When coming off the hover, the icon renders the name of the icon, not the icon graphic.

2

Hi there,

It sounds strange. Would you be able to share the screen recording or file link so that we can investigate?

Thanks,
Toku

3

This is what I see:

This is what everyone else sees:

4

Thanks for sharing the recordings! It looks odd. I’ll check with our internal team and get back to you when I have anything I can share with you.

Toku

5

Hi @Thomas_Barrett1

Thank you for your patience. I’ve checked back with our team and it’s been confirmed that the issue you’re experiencing is due to a feature limitation when using local fonts in interactive components with text overrides. A possible workaround would be to use icon SVGs or the FontAwesome version available in Figma.

For more details, you can refer to this Help Center article: https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants#custom-fonts.

I apologize for not mentioning this in my initial response, but I hope this information is helpful to you!

Thanks,
Toku

6

Hi @y_toku, I’m having the same issue with the hover variant with FontAwesome 6 icons and the interactive component. Font is enabled for the entire organization, but it is not working for prototype users within the organization. Any guidance to fix the issue is appreciated.