How to add icons to custom BBCodes?

11 Apr 2024, 05:55

When you add a custom BBcode to your phpBB forum, it will appear in the editor with text, not with an icon like the others. In this topic, I will tell you how you can add the icon you want to the BBcodes you have added.

First, select a BBCode and find its tag. For example, for [hashtag][/hashtag] it is hashtag. Then find an icon for your BBcode from Font Awesome 4.

The code that will display your BBcode as an icon instead of text in editor is as follows.

Code: Select all

$(document).ready(function(){
    $('.bbcode-hashtag').html("<i class='icon fa-hashtag fa-fw'></i>");
});

Notice the .bbcode-hashtag. It should be .bbcode-BBcodeTag. Change <i class='icon fa-hashtag fa-fw'></i> or even just fa-hashtag depending on the icon you choose.

Then open the /template/ajax.js file of the style you are using. Find the following line at the bottom of the file:

Code: Select all

})(jQuery); // Avoid conflicts with other libraries

Add your code before this line. Save changes and clear the phpBB cache.

Now your BBcode is shown with an icon.