Thread Rating:
  • 6 Vote(s) - 4.33 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Font-Awesome Forum Icons & Unique Ficons

Attached Files Thumbnail(s)
The forums are being marked read, however the icon does not change till the page is refreshed.

Assuming we don't want to modify core files (/jscripts/general.js that changes on.png to off.png), the first replacement would be:
<div class="forum_icon"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.png" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /><i class="fa fa-comments"></i></div>
I have removed the status class from the <div> as it won't be needed anymore - the status will be recognized basing on the image src attribute; the <i> tag placed after the image (so CSS can catch it as a sibling of <img>); also inserted dynamic theme path.

The CSS:
.forum_icon { position: relative; height: 50px; width: 50px; text-align: center; font-size: 30px; display: inline-block; }
.forum_icon i { display: inline-block; line-height: 50px; }
.forum_icon img { position: absolute; top: 0; left: 0; width: 50px; height: 50px; }
img[src*="/on.png"] ~ i { color: #0094d1; }
img[src*="/off.png"] ~ i, img[src*="/offlink.png"] ~ i, img[src*="/offlock.png"] ~ i { color: #333; }
img[src*="/off.png"] ~ i { opacity: .4; }
img[src*="/offlock.png"] ~ i:before { content: "\f023"; }
img[src*="/offlink.png"] ~ i:before { content: "\f0c1"; }
Instead of depending on the <div> class (which remains static) the icon styling will change dynamically as the icon URL is being replaced by JavaScript. You can also notice that I have set width and height attributes for the status images, as in my version the default image files are being used, however they are nothing more than transparent 1x1px images in order to save bandwidth (since they are not used anyway; you could also use mod_rewrite to redirect all the status images to images/pixel.gif, included in the default style). (DF3A 34D9 A627 42E5 BC6A 6750 1F2F B8AA 28FF E1BC) ▪
Thanks for the tip Devilshakerz, I've always wanted a sure-fire fix for the icons since I don't like to write extra JS for something like this. It's unfortunately not that sure-fire fix but it's closer than I got, I'll update the first post. Big Grin
Great tut buddy.
Newbies would be much benefited.
I already used my own version for my previous themes like Tesladark, just like you did.
I would love to share the rest of icon changes i have made, and once 1.8 rolls out, i would extend your tut to all other icons, including spinner being replaced by FA.
[Image: mnvhXxj.png]
Yeah I've wanted to do a tutorial on all of MyBB essentially (Or at least all the parts I've messed with), but all my time seems to be taken up lately and I figured I'd do something like this since it's simpler. After UI.M I'd like to do a tut for more sections.

Thanks for the feedback envira! Smile
This user has been denied support. This user has been denied support.
Its nice to finally see people using Iconic fonts.

Its far more better than using images. (Though, still, not much better due to limited icons.)

And very nice tutorial indeed. Hmm. This has certainly given me an idea of a plugin Big Grin
And if you are using jquery in your theme and want to merge ajax mark as read function with fontawesome icons use:

<i class="fa fa-comments forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></i>

(in forumbit_depth2_cat, forumbit_depth2_forum and usercp_subscription_forums)

in headerinclude (at the bottom of that template):

<script type="text/javascript" src=""></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $('.ajax_mark_read').click(function () {
   var fid = $(this).attr("id").match(/[\d]+$/);
   var no_new_posts = 'Forum Contains No New Posts';
   if ($(this).hasClass('forum_on')) {
    $.get('misc.php?action=markread&fid=' + fid + '&my_post_key=' + my_post_key, function () {
    $('#mark_read_' + fid).removeClass('forum_on').addClass('forum_off').attr('title', no_new_posts);

and in global.css add

.forum_on {

.forum_off {

.forum_offlock {
Excellent tutorial.
I don't give support on PM.
Clear.png puts a big grey border around the icon messing up the forum

Also where would i find the icons for the new redirect and Locked forum on the index?
[Image: sig2.jpg]
(08-10-2014, 09:41 PM)iAndrew Wrote: Clear.png puts a big grey border around the icon messing up the forum

Also where would i find the icons for the new redirect and Locked forum on the index?

No idea why you're getting a border, but I'm guessing it's related to a custom theme you're using.

And the icons are decided here:

.forum_offlock i:before { content: "\f023"; }
.forum_offlink i:before { content: "\f0c1"; }

Also the reason I'm avoiding updating this tutorial right now is because if I can get THIS finished up, the tutorial will be a lot different.

Forum Jump:

Users browsing this thread: 1 Guest(s)