Zmiana ikon zwijania działów na ikony typu Font-Awesome

1 Instalacja Font Awesome

Import - wykonujemy o ile nie mamy jeszcze zaimportowanych arkuszy Font Awesome.
Najnowsza wersja zawsze jest widoczna tutaj

Do szablonu headerinclude dodajemy:

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

2 Załączenie skryptu do szablonu

W szablonie headerinclude zaraz pod linijką:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1806"></script>

Dodajemy:

<script type="text/javascript">
$(document).ready(function()
{
    $(".expcolimage .expander").each(function()
    {
        if($(this).data('src'))
        {
            $(this).addClass($(this).data('src').replace('.png', ''));
        }
    });
    
    expandables.expandCollapse = function(e, controls)
    {
        element = $(e);

        if(!element || controls == false)
        {
            return false;
        }
        var expandedItem = $("#"+controls+"_e");
        var collapsedItem = $("#"+controls+"_c");

        if(expandedItem.length && collapsedItem.length)
        {
            if(expandedItem.is(":hidden"))
            {
                expandedItem.toggle("fast");
                collapsedItem.toggle("fast");
                this.saveCollapsed(controls);
            }
            else
            {
                expandedItem.toggle("fast");
                collapsedItem.toggle("fast");
                this.saveCollapsed(controls, 1);
            }
        }
        else if(expandedItem.length && !collapsedItem.length)
        {
            if(expandedItem.is(":hidden"))
            {
                expandedItem.toggle("fast");
                element.removeClass("collapse_collapsed").addClass("collapse")
                                    .attr("alt", "[-]")
                                    .attr("title", "[-]");
                element.parent().parent('td').removeClass('tcat_collapse_collapsed');
                element.parent().parent('.thead').removeClass('thead_collapsed');
                this.saveCollapsed(controls);
            }
            else
            {
                expandedItem.toggle("fast");
                element.removeClass("collapse").addClass("collapse_collapsed")
                                    .attr("alt", "[+]")
                                    .attr("title", "[+]");
                element.parent().parent('td').addClass('tcat_collapse_collapsed');
                element.parent().parent('.thead').addClass('thead_collapsed');
                this.saveCollapsed(controls, 1);
            }
        }
        return true;
    };
});
</script>

3 Edycja stylów .css

Otwieramy arkusz global.css i na samym końcu dodajemy:

.expander.fa.collapse:before {
    content: '\f062';
}

.expander.fa.collapse_collapsed:before {
    content: '\f063';
}

4 Edycja szablonów

W szablonie forumbit_depth1_cat zamieniamy fragment:

<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>

Na:

<div class="expcolimage">
    <span data-src="{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander fa" alt="{$expaltext}" title="{$expaltext}"> </span>
</div>

W szablonie index_boardstats podmieniamy linię:

<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['boardstats']}.png" id="boardstats_img" class="expander" alt="[-]" title="[-]" /></div>

Na następujący fragment:

<div class="expcolimage">
    <span data-src="collapse{$collapsedimg['boardstats']}.png" id="boardstats_img" class="expander fa" alt="[-]" title="[-]"> </span>
</div>

Kolejno edytujemy szablon showthread_quickreply podmieniając:

<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>

Na:

<div class="expcolimage">
    <span data-src="collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander fa" alt="[-]" title="[-]"> </span>
</div>

Ostatnim szablonem do edycji jest private_quickreply gdzie zamieniamy:

<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>

Na:

<div class="expcolimage">
    <span data-src="collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander fa" alt="[-]" title="[-]"> </span>
</div>

5 Efekt

  
Metoda napisana przez ATofighi, lekko zmodyfikowałem i udostępniam za jego pozwoleniem.