MyBB Community Forums

Full Version: Use an Icon Font for Custom Forum Icons?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
If you've heard of that forum icons plugin by labrocca, I'm wondering if there would be a way to use a template edit which utilizes this symbol/icon font:

http://fortawesome.github.io/Font-Awesome/icons/

as forum icons, a custom one for each forum. It would turn different colors depending on new posts, locked forum, etc.

Any suggesions? Huh
Just an idea:
Bind icon area in a class (say: "uniqicon"). Use jQuery with conditions and define the icons with changing inner html.

Rough example:

jQuery.noConflict();
var forumid = {$fid};

jQuery(function () {
if (forumid == "1") { jQuery(".uniqicon").html("<i class="icon-comment"></i>"); }
else if (forumid == "1") { jQuery(".uniqicon").html("<i class="icon-desktop"></i>"); }
else if (forumid == "2") { jQuery(".uniqicon").html("<i class="icon-fire"></i>"); }
else if (forumid == "5") { jQuery(".uniqicon").html("<i class="icon-remove-sign"></i>"); }
)};

Remember to add bootstrap cdn library in header include, if you are not linking locally:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
(2013-07-29, 04:55 AM)effone Wrote: [ -> ]Just an idea:
Bind icon area in a class (say: "uniqicon"). Use jQuery with conditions and define the icons with changing inner html.

Rough example:

jQuery.noConflict();
var forumid = {$fid};

jQuery(function () {
if (forumid == "1") { jQuery(".uniqicon").html("<i class="icon-comment"></i>"); }
else if (forumid == "1") { jQuery(".uniqicon").html("<i class="icon-desktop"></i>"); }
else if (forumid == "2") { jQuery(".uniqicon").html("<i class="icon-fire"></i>"); }
else if (forumid == "5") { jQuery(".uniqicon").html("<i class="icon-remove-sign"></i>"); }
)};

Remember to add bootstrap cdn library in header include, if you are not linking locally:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Would that make load time slower, or would the difference not be noticeable? Because I have like 40 forums.
If you have finally decided to use 'font-awesome' then go ahead, because the load time which required is most for loading font-awesome ( though its very small, 200KB+ ). Once it is loaded the rest is fast, I guess.
The jQuery solution doesn't work. Isn't there some way of modifying Labrocca's Ficons plugin or coding your own plugin/template variable to attach an icon to a forum ID?