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

[djbaxter]

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:

 

[Miri]

Hello. Have you tried "fa fa-name-icon" too? Without fas

 

[djbaxter]

Hello. Have you tried "fa fa-name-icon" too? Without fas

Ah... thank you. Yes that worked.

 

[Wildcat Media]

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.

 

[Paul B]

Which FA codes are you using?

 

[djbaxter]

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:

 

[Wildcat Media]

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.)

 

[Paul B]

I posted a guide here: https://xenforo.com/community/resources/editor-toolbar-button-icon-styling.8248/updates

 

[Wildcat Media]

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.

 

[Paul B]

So then, it seems we only need the full name like fas fa-acorn if we want to change from the regular style.

Correct.