Just take the normal code and remove the “fa”.
So, in this case it should be “user-shield”
This is scheduled of an upcoming release of the Toolit plug-in. Plane is to support fontawsome then others going forward
This option will add an icon with just one line of code (text!)
Review here: https://icons8.com/line-awesome
Just wanted to ask, is this font awesome 5+ pro? I’m currently using HTML to get this working, which is fine, but base functionality of this type would be great. I’m also using conditions to switch html for effects such as fa colours which would be needed.
Also, stacking icons for use with things such as notifications would be great!
Sorry for the late reply missed your message! This is for the FAv4 that is currently supported natively in bubble. I am working on a plugin that supports v5 and other icons that allows you to use it any where. I have made some great progress and its almost ready.
3 Likes
Good to hear!
This doesn’t seem to work for me anymore, at least when I’m using something like [fa] fa-check [/fa] in a button text. Anyone else have this problem?
@jonas.bergert It’s [fa]check[/fa], not [fa] fa-check [/fa] sometimes spaces inside the [fa] tags break it. Try removing them as well.
Also button or text? Text supports font awesome, button doesn’t.
1 Like
Thanks! I tried using it in a button but if you say that doesn’t work in buttons then I guess I’ll have to find a work-around. The reason it stopped working for me is probably that I replaced a clickable text with a button element 
I’m having all sorts of weirdness with font awesome as bbcode. I paste a text field with [fa]external-link[/fa] and it works. I add a space and some dynamic text and it stops working. In order places in my app I’ve got it working alongside dynamic text.
I’m puzzled.
one thing I witnessed was that it needs spaces before and after the brackets, e.g. [fa] fa-check [/fa] instead of [fa]fa-check[/fa] 
What is meant by one “font awesome element” I dont have this as an option. Do you mean a regular icon? I am able to get most font awesome icons to load, but some dont work. For example the arrows work, but the clocks dont. Where can I see a list of only the ones that work?
Also interested in any updates to adding icons to buttons!
Hey @sarabethjaffe 
What I do is just make a text element look like a button and then you can add an icon by putting in this type of text [fa] fa-home [/fa] Home. Just need to change ‘home’ with whatever icon you want to display.
Hope that helps! 
For All Your No-Code Education Needs:
- One-on-One Tutoring
- eLearning Hub
- Video Tutorials
1 Like
Is there a way to use the light version of font awesome? for example, I want to use a light version of a chevron. This is the code on font awesome website: “fa-light fa-chevron-right”
Not that I know off
Does anyone knows how to change the font size of the icon only?
For example, I have a text element with the following text:
Test [fa]angle-down[/fa]
And I get the following:
As you can notice, the down-arrow next to “Test” is slightly smaller than the down-arrow next to “Settings”. This happened because the text style of “Test…” has a font size of 16px, while the icon next to “Settings” has a size of (20x20)px.
So, I should use a font size of 20px in “Test…” to perfectly match the 2 down-arrows.
So, is there is a way to use 2 font size within the same text element (16px for “Test” and of 20px for “[fa]angle-down[/fa]”)?
I have used the size function in Rich Editor but it worked terrible because I could not give the 20px size but only make the down-arrow smaller or bigger by a fixed scale.
Thanks to anyone who knows the answer to this issue.
In the Appearance tab of the text, clock on Rich Text Editor and wrap the the FA code with [size=]
[size=10][fa]angle-down[/fa][/size]
Thanks Jeffb for your reply.
However, this workaround doesn’t solve my issue.
See image below:
I would like the arrow next to Test to be the exact same size of the arrow below it. The arrow below it as a size of 40px as per image below:
The text [size=X] has not any relation with the size in px. So, it is impossible for me to pixel match the 2 arrows in this example.
Let’s try a few sizes to test it out:
SIZE=5 (too small)
SIZE=6 (close but not the same)
SIZE=7 (too big)
