Wrap both Icon & Text in a single SPAN

I cannot find a way to wrap both an Icon and Text in a single SPAN. Why do this? So one can apply a single LINK to both.

Right now, I must put a link on the icon and then separately put the same link on the text which sites right next to the icon. That is silly because both should be able to fit into a single SPAN; but again, I don’t see how this can be done in Blocs.

Is there a trick to accomplish this?

Thanks,

James

Not sure but I think this is not possible.
May be you can use a button with icon and link that.

1 Like

Hey @JDW

@pixelwork is correct.

Simply use a button with the icon option checked and no-style.

Further style the text and icon as wished and add the interaction below to navigate where you desire.

Now no matter if the person clicks on the icon or the text both will navigate to where you specified.

MDS

1 Like

A wonderful solution!

Thank you, @MDS and @pixelwork!

@MDS & @pixelwork

I have a follow-up question if you don’t mind.

There are times when I want to have an icon next to text but NOT have my pointer change in the browser when I mouseover those “no-style” buttons. There’s no link on the “button” and yet it still is a button, so when you Preview (in Blocs or the browser) your arrow pointer becomes a little white gloved hand with a pointing index finger. What’s the best way to keep the black arrow pointer a black arrow pointer?

Thanks.

A button will always show this behavior (link).
Having an icon close to text you can use - “Icon Heading” and adjust the text value via a class.
I have done this a lot on a v2 project here:
https://www.bluecruise.org/cabin-charter-cruises/index.html
Works the same in v3

2 Likes