MyBB Community Forums

Full Version: I want create mybb code for font awesome icons
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello, i want make mybb code for adding font awesome icons so i add this.


Regular:
[fa]{SIMPLETEXT}[/fa]


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

I try this add in to Bam announcement manager, but icon not show.

I try add [fa]calendar[/fa]   - same method works on phpbb but there no.

Can you help ?

Thanks
You need to change the regular expression and the replacement to what mybb "understands": 


Regular:

\[fa\](.*?)\[/fa\]



Html: replacement  

<i class="fas fa-$1"></i>


try to get that working, then you can add style and so on later

P.s.: I am not sure how safe from any kind of injection that code is!
I test it, but not work. I add this and then i in text add

\[fa\]calendar\[/fa\] is that good ?
(2018-07-11, 07:57 AM)PT82 Wrote: [ -> ]I test it, but not work. I add this and then i in text add

\[fa\]calendar\[/fa\]   is that good ?

You text should be:
[fa]calendar[/fa] is that good ?
linguist has the font awesome code wrong for you its 'fa fa-tag' not 'fas fa-tag' where tag is the value.
Here is the code sheet for font awesome 4.7.0

I have added the info I used in creating this post for myself here, so you can see it on my board as well as other mycodes I have done.

Firstly you need font awesome in your ungrouped headerinclude template.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

In BAM you can also use html code directly.
So you could call the function directly,
Also you can do multiline in bam using <br /> after you need a space else bam won't do multiline.

<i class="fa fa-calendar"></i> Title<br /> 
Your description 

If you want to use it as forum code you would use this code:
This will replace any value inside the fa tags with your value.

Usage: Where value is the end name of the font awesome icon calendar, car etc
[fa]value[/fa]

Expression:
\[fa\](.*?)\[/fa\]

A smaller inline alternative could be just,
[fa-value]

Expression:
\[fa-(.*?)\]

The replacement for both is still the same,
Replacement:
<i class="fa fa-$1"></i>

A static tag still needs regular expression and would be achieved with this code:
This is a easier tag to use for static than one that has a start and end tag which is usually used for a middle variable.
But it's better to use the variable tag as its roughly the same amount of bb code the user would need to input and use in the end either way, that way you can use any font awesome image you want when you need it on your board rather than having a single static tag.

Usage: fa-calendar becomes the icon
[fa-calendar]

Expression:
\[fa-calendar\]

Replacement:
<i class="fa fa-calendar"></i>

For styling you will need to add inline styling to the code.
You can use a span or other inline styles by adjusting the replacement code as needed.
Here is a example of that

Replacement:
<i class="fa fa-$1" style="Your Inline Styles separated by a ;"></i>

If you need to add inline styles per user input you could adjust the expression and replacement to use the $2 value as the second value becomes the styles but one should try to keep uniformity unless needed for adjustments.
Thanks, i must add this 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


in index.

And i use  this code in forum  


<i class="fa fa-calendar" style="#fff ;"></i>
(2018-07-11, 10:23 AM)PT82 Wrote: [ -> ]Thanks, i must add this 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


in index.

And i use  this code in forum  


<i class="fa fa-calendar" style="#fff ;"></i>

Yea thats all you need.
You don't need a space to the ; if you don't want it.
The ; is there for multiple styles some people put a space after the ; to break up the tags for reading, I do this but its not required and people don't put a space before the ;
If you are going to make mycode use the tag that allows you to input a name so it can be adjusted as later you may want to use other codes.