Replace expcolimage [ Expand/Collapse ] with Font Awesome

xdahelpers · 15-08-2021, 05:42 PM

Go to Theme templates

edit >forumbit_depth1_cat
Find

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

Replace with

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

and index_boardstats

Find

Code:
<div class="expcolimage"><img src="{$theme['imgdir']}/" id="boardstats_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>

Replace with

Code:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="boardstats_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>

Save

Go to Global.css

Add

Code:
.thead.thead_collapsed .expander:before{
 transform: rotate(-180deg);
 }
 .thead .expander:before{
 display:inline-block;
 font-size:16px;
   font-family: 'Font Awesome 5 Free';
   content: "\f106";
   font-weight:900;
   transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
 }

Preview :

Note: if you never use fontawesome before then add below mention code to headerinclude template

PHP Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> 

Replace expcolimage [ Expand/Collapse ] with Font Awesome

Submitted by xdahelpers, 15-08-2021, 05:42 PM, Thread ID: 216362