adding custom bbcode fontawesome icon ?

eva2000

Registered
I have a custom bbcode = codeb and was wondering how to add the fontawesome icon to xf 1.5 editor for flatawesome+ style ?

9207
 
I saw you liked my post about my editor icons, did that inspect and edit not work for you?

You can't place a FA icon in the screenshot you're showing there.
 
Just use extra.css:

Code:
html .redactor_toolbar li a.redactor_btn_custom_sub:before {
content: "\f0c1";
}

Replace redactor_btn_custom_sub with the class shown in the same area as my screenshot. Also with XF1 and FA4 make sure you're using: https://fontawesome.com/v4.7.0/cheatsheet/

I'll be back in a few hours and can take a look while logged in to get the exact code for you. Each button is different.
 
thanks not sure if i got it right as nothing shows up
CSS:
html .redactor_toolbar li a.redactor_btn_codeb:before {
    content: "\f1c9"
}
 
Do you see the spot in the editor for the button? Even without the CSS in there the button should still show and you should be able to click it. I'm not seeing that spot at all.
 
Yeah there never has been a button in editor after adding this custom bbcode which I added years back. The code settings itself and advanced options in above 1st post

9221
 
Looks like the only way to get it added would be to actually attempt to load an image, if you look at the description in the advanced tab:

Editor Icon URL:
If provided, an icon to insert this BB code will appear in the editor.

I suppose you could put a dummy name, see if the button will load so you can then just use CSS to get the FA icon to show.

I'm not sure if there's an add-on that exists to overcome this.
 
thanks Russ getting some where, dummy name allows the blank icon show up at least..

9227


9228


those changing css to below still shows up blank for me

CSS:
html .redactor_toolbar li a.redactor_btn_container_custom_codeb:before {
content: "\f1c9";
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back