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…
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:
(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.
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:
you can use html
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.
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?
Hi @gyangting 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