How to append an image to the end of a text element?

You know, I thought I had done that in my app, but clearly I never…I ended up doing something completely different with my design so problem went away! edited my original response…

1 Like

You guys rock! Thank you so much for the help! @romanmg [awesome as usual =)] @Scott @DaveA

Don’t worry @DaveA im still figuring everything out. Cheers!

One last question: How can i center all text inside the HTML element? I tried align=“center” but it didn’t worked.

Try the “text-align” property.

1 Like

Use the CSS style attributes:

style=“text-align: center;”

(or maybe the old fashioned center /center tags)

1 Like

Awesome! Thank you guys! @Scott @DaveA

I’d go with Gaby’s solution (that checkmark looks the best!); but another way is to use a font-awesome icon in the text element. This way, you can edit the size and color of the checkmark as well. For example:

You can enter this into a text element:

Then you can use the Rich Text editor to adjust the color (and use a custom color code if you prefer). After editing the format in the rich text editor, the text becomes:

And the end result is:

*For this to work, you’ll also need to place a regular ‘icon’ somewhere on the page to allow Bubble to reference the font file.

13 Likes

:point_up: genius :point_up:

2 Likes

Thanks Gaby! :slight_smile: My thoughts exactly when I read your post - never knew how to do that with an image and HTML!

1 Like

@romanmg @fayewatson Thank you for that other option! Im going to use the HTML route as the icon i want to use is part of my branding. But for other types of implementation the font awesome works like a charm too!

2 Likes

For those that stumble on here and don’t know why the icon isn’t showing after following the solution, remove the fa- part in the beginning. For example, this:

[color=#0277BD][size=4][fa]fa-check-circle[/fa][/size][/color]

Becomes this:

[color=#0277BD][size=4][fa]check-circle[/fa][/size][/color]
5 Likes

you can use html

https://www.w3schools.com/html/html_images.asp
https://bubble.io/page?type=page&name=test&id=beaux&tab=tabs-1 ,

1 Like

It doesn’t work as dropdown placeholder. Anyone with an idea?

@dev2 Ah, that’s correct – the font awesome approach only works inside text elements. Another workaround would be to create a custom dropdown, using an icon and text element, placed within a group. When that group is clicked, you could show a groupfocus element which contains a repeating group of your different dropdown choices. This approach would take a little longer to setup but would allow you to have a more custom design. :slight_smile:

2 Likes

Hello, could you please show us what you put inside the HTML element, i would like to do that too.
Thank you

This saved me on many occasions! Thx.
For some fa icons, it does not work though. For instance: fa-sort-amount-de.
Removing “fa-” does not make it appear.
Any idea how to fix that?

1 Like

Hi @gyangting :slight_smile: I think that the full icon name sometimes gets cut off. For the sort-amount-descending icon, I think that the embed is:
[fa] fa-sort-amount-desc [/fa]

Thanks Faye… I also realized that an instance of the icon element needs to be on the page (hidden if not used) in order to have access to all fontawsome icons in a text box.

I cannot seem to make this work, I see the part about putting the icon somewhere on the page.
For me, it just shows [fa]fa-check-circle[/fa] in the text when I preview. what am I missing?

try removing the fa- prefix
[fa]check-circle[/fa]