Hello!
I want to be able to add an icon to the end of text like Facebook does for verified accounts. Example:
I have a RG and inside i have an image element and a text element. I want to know if its possible to add an icon like on the example. Right know if a put the icon on top of the text element, it doesn’t print well on the live page because each text has different length and it doesn’t put the icon at the end of the last character.
Any help?
EDIT: ignore this answer as it was wrong! I thought I had done what i suggested in my app, but clearly I was mistaken!
/hangs head in shame…
I suggest trying to do that in an HTML element, as image elements don’t horizontally float next to adjacent elements.
This might not work for his needs, as the width of the text element does not change for various text lengths.
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…
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.
Use the CSS style attributes:
style=“text-align: center;”
(or maybe the old fashioned center /center tags)
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.
genius
Thanks Gaby! 
My thoughts exactly when I read your post - never knew how to do that with an image and HTML!
@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!
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]
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 ,
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.
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?