Issue with Icons Not Displaying in Button with is-icon Class

·Jun 07, 2024 11:01 AM

When I add the is-icon combo class to buttons on my site, no icon appears, and when I try to paste an icon into the button it doesn't appear within the button, but beside it.

5 comments

· Sorted by Oldest

Emily M.
·
https://preview.webflow.com/preview/africa-golf-safari?utm_medium=preview_link&utm_sou[…]&itemId=665ccffc3ab288aedd408281&locale=en&workflow=preview
Matt J.
·
Emily M. yeah unfortunately its not like figma components where there is already an icon stored there - its just for helping with positioning - you'd have to go to the style guide page or icons.relume.io and grab an icon and place it within the button and then use is-icon to get the spacing and positioning correct.
Emily M.
·
I wasn’t actually able to paste an icon in when I tried that, but I’ll give it another go
Matt J.
·
Emily M. if that is the case, make sure that its not a button element (hand cursor) but a link block (link icon). In order to nest elements in a button, it'll need to be a link block.
Emily M.
·
Ah okay thank you!

Emily M.
·
https://preview.webflow.com/preview/africa-golf-safari?utm_medium=preview_link&utm_sou[…]&itemId=665ccffc3ab288aedd408281&locale=en&workflow=preview
Matt J.
·
Emily M. yeah unfortunately its not like figma components where there is already an icon stored there - its just for helping with positioning - you'd have to go to the style guide page or icons.relume.io and grab an icon and place it within the button and then use is-icon to get the spacing and positioning correct.
Emily M.
·
I wasn’t actually able to paste an icon in when I tried that, but I’ll give it another go
Matt J.
·
Emily M. if that is the case, make sure that its not a button element (hand cursor) but a link block (link icon). In order to nest elements in a button, it'll need to be a link block.
Emily M.
·
Ah okay thank you!