Does anyone know how to not have a space underlined when text is underlined (either a text element or a link within a text element)?
The reason I’m asking is because for various links and actions I like to put an icon within the text and underline on hover (either underline on hover as a condition, or if the text has a link embedded, this underlines automatically). Looks like this when hovered:
Visually that underlined space isn’t very clean. I can fix it somewhat by using “fa-fw” within the BBcode which adds a little space around the icon, but for already wide icons it doesn’t help much.
(PS: shoutout to @petter for this very helpful article on combining text and icons, which alerted me to the fa-fw code and also the larger lists of icons available beyond what Bubble lists in the editor).
I’ll be the first to admit it’s not a terribly sexy solution (or efficient), but may work if you’re only doing this on a few elements. Applying the condition all over the place kind of defeats the purpose of combining elements in the first place though.
Would love to see a better solution here if anyone’s got one.
Thank you for taking a look. I had wondered about the performance impact of this vs. what I was doing previously, which was combining 3 elements (icon, text and a group to hold them and reference for the workflow).
I had also thought about just avoiding underlining and instead changing the color on hover, but the issue is that I also use this setup for a link. Bubble’s link element doesn’t recognized the BBcode to embed the icon, so instead I use a text element and create a link within it. The link automatically underlines on hover, so how it behaves needs to be consistent with actions or links that I handle via worfklows.
For now the fa-fw code has fixed or improved things (again, thank you for that), so I’ll probably just live with it for now unless there’s any easy fix out there.
