XF 2.2 How do you specify a Font Awesome icon for a custom BB code?


in memoriam 1947-2022
Trying to add a FA icon to the editor toolbar for a custom BB code.

How do I specify the FA code? None of these work:

custom bbcode icon1.webp

custom bbcode icon2.webp

custom bbcode icon3.webp

custom bbcode icon4.webp
I had the same issue, but only had partial success.

The Font Awesome icons appear in the toolbar editor:


Yet don't display in the editor itself--I only get blank buttons in both the default XF theme (shown, with color changes, hovering over one of the two new buttons, underlined with yellow) or the third-party theme I use. Other Font Awesome icons appear throughout the site properly.

ACP >> Content >> BB code >> BB code button manager

Increase the number of items displayed so nothing is grayed out, or move some down to the second row:

toolbar 1.webp

toolbar 2.webp
Which FA codes are you using?
I'm using fa-superscript and fa-subscript, which displays them in the button editor, but not the editor itself.


But I found the problem:


Just figured it out, though--the information above was incorrect. If I change this to:


...without the fa- prefix, it then works in the editor:


It also appears in the toolbar editor properly. Which is odd, since I would think the incorrect code would prevent the icon from appearing in both places. But regardless, this entry only needs the name of the icon without the fa- prefix.

(Side note--I wish that there were help tooltips throughout the admin side, as I had to find this thread to figure out what to enter in this field.)
So then, it seems we only need the full name like fas fa-acorn if we want to change from the regular style.

I'm using some duotone icons on one of my sites as node icons and it looks cool, but it's a lot more work since color and opacity can be changed for each of the two layers.
Top Bottom