Forum Academy Marketplace Showcase Pricing Features

Combining icons and text -- getting the underline right?

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).

You could add the condition to change the text instead of the entire element (avoiding the Underline property and using the Text property instead.

That should give you a result like this:

CleanShot 2021-08-16 at 11.52.02@2x

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.