Page 1 of 1

Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 8:07 am
by TT90
Hi, i want to ask if is possible add fontawesome icon in to Board Announcements extension ?

I try this code:

Code: Select all

 <i class="icon fa-calendar fa-fw" aria-hidden="true"></i>
but this extension dont support html

It is possible add this via bbcode ? Can anyone make for this bbcode ?

Thanks

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 8:29 am
by Ger
Should be as simple as this:
Usage
[fa]{SIMPLETEXT}[/fa]

HTML Replacement

Code: Select all

<i class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i>
Example
Check this [fa]calendar[/fa] fancy icon

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 9:04 am
by TT90
Wow thanks, works perfect.

So if i want change color of this or size, how i do it ?
It possible add this in this bbcode ?

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 9:33 am
by Ger
You can simply change the HTML replacement to something like

Code: Select all

<i class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true" style="color: #FF0000; font-size 20px;"></i>
Or set it as a class;

Code: Select all

<i class="fa-bbcode icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true"></i>
And define that class in your stylesheet like so:

Code: Select all

.fa-bbcode {
	color: #FF0000;
	font-size: 20px;
}
First approach is simpler, second approach is a bit more optimized for the browser when you use it multiple times.

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 9:43 am
by TT90
Perfect, thank you so much ! Works great.

I use this:

Code: Select all

<i class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true" style="color: #FF0000; font-size 20px;"></i>
Maybe it will be good add this like inscrution in bbcode instructions. ;)

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 9:55 am
by Ger
You're welcome :)
TT90 wrote:
Tue Jul 10, 2018 9:43 am
Maybe it will be good add this like inscrution in bbcode instructions. ;)
I'm not sure what you mean by this?

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 12:13 pm
by Mick
You can create a New Contribution to the Custom BBCode db for validation.

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 12:20 pm
by TT90

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 12:38 pm
by Ger
I see, submitted it just now.

Edit: TT90 was just a bit faster. Well than, leave it up to the team to drop either one of them. :)

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 12:48 pm
by TT90
Ah sorry ;) :( So you are author, maybe it would be better if yours be approved and my deleted.

Re: Font awesome icon in to bbcode

Posted: Tue Jul 10, 2018 12:49 pm
by Mick
Thanks guys 👍

Re: Font awesome icon in to bbcode

Posted: Sat Aug 25, 2018 10:43 pm
by orynider
Ger wrote:
Tue Jul 10, 2018 9:33 am
You can simply change the HTML replacement to something like

Code: Select all

<i class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true" style="color: #FF0000; font-size 20px;"></i>
You need:

Code: Select all

<i class="icon fa-{SIMPLETEXT} fa-fw" aria-hidden="true" style="color: #FF0000; font-size: 20px;"></i>

Re: Font awesome icon in to bbcode

Posted: Sat Feb 23, 2019 8:15 pm
by orynider
You can not include font-size=5 or font-size=8.5 or font-size=15 or font-size=20 etc in Your [fa=10]{SIMPLETEXT}[/fa] code ?