BBCode for Font Awesome icons (simple, kinda')

[DerGolgo]

I wanted to use Font Awesome icons in posts on my board, so that I could avoid misunderstandings when explaining to my users what the new buttons do. I googled, duck-duck-went, and searched around here.
I'm quite sure someone must have made that before me, and it's just my google-fu letting me down/me deciding that coding it myself is quicker than searching further.
Still, in case someone else finds themselves let down by their *-fu, here goes.

What does it do?
It puts a single icon from Font Awesome 4.7 in the text-body of your post. It will appear like any other character, right where you put the appropriate code. Font colours can be applied via the "color" tags. Just as there don't appear to be bold or italic alternates to individual FA characters, those tags do nothing (in my testing, anyways).

What do you need?
Your board must have Font Awesome 4.7 installed and running. Like it comes with phpBB 3.2.8. It may work with other Font Awesome 4 versions, but I cannot test that, so no promises.
If you have Font Awesome 5, you will have to change the HTML replacement, as FA5 has a different syntax (to my knowledge).

How to use it
Get the code for the desired icon from this list of Font Awesome 4.7 icons.
As an example: After installing this in your BBCodes, you could get the Bluetooth icon with this code: [fa]fa-bluetooth[/fa]

The stuff you actually install:

BBCode usage

Code: Select all

[fa]{SIMPLETEXT}[/fa]

HTML replacement

Code: Select all

<i class="fa {SIMPLETEXT}" aria-hidden="true"></i>

I used SIMPLETEXT because that was what was in the code I copy/pasted to have a place to start from, and when I tried changing it to TEXT, I got a big red warning message. So I left it like that.

My helpline (in case you can't come up with your own):

Code: Select all

Font-Awesome 4 icon. [fa]icon-code[/fa]

And that's all there is to it. I've been using it all day, the icons desired appear where desired, and as desired, just like any other character.

[3Di]

I'm quite sure someone must have made that before me, and it's just my google-fu letting me down/me deciding that coding it myself is quicker than searching further.

Yes, our implementation is here: https://phpbbstudio.com/kb/bbcodes/icon

[DerGolgo]

I'm quite sure someone must have made that before me, and it's just my google-fu letting me down/me deciding that coding it myself is quicker than searching further.

Yes, our implementation is here: https://phpbbstudio.com/kb/bbcodes/icon

Yeah... I don't even understand most of that. Kudos!

I shall edit the OP to reflect the simplistic nature of my own implementation.

[mwaraitch]

Yes, our implementation is here: https://phpbbstudio.com/kb/bbcodes/icon

Awesome indeed.
How to add ability to change colors in the code

[eeji]

I had to tweak your replacement HTML slightly to get it to work:
<i class="icon fa-{SIMPLETEXT}" aria-hidden="true"></i>
Adding the icon class instead of fa sets the correct font, whereas adding fa- before the simple text token negates the need for it to be added by the user, so they can grab and use the icon code from the FontAwesome4 cheat sheet here: https://fontawesome.com/v4/icons/

How to add ability to change colors in the code

Wrap your fa bbcode with a regular colour bbcode

[mwaraitch]

Wrap your fa bbcode with a regular colour bbcode

Thanks it works

[Spartan1]

Most of these fa icons do not work on my forum.

Using the latest 3.3.12

Using header link extension