Skip to main content
Question

Hover variant change breaks icons

T

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.

5 replies

y_toku
Figmate
  • y_toku
  • Community Support
  • 2320 replies
  • February 7, 2024

Hi there,

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

Thanks,
Toku

T

This is what I see:

This is what everyone else sees:

2 Attachments
y_toku
Figmate
  • y_toku
  • Community Support
  • 2320 replies
  • February 13, 2024

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

y_toku
Figmate
  • y_toku
  • Community Support
  • 2320 replies
  • February 13, 2024

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

P

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.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings