MyBB Community Forums
[For 1.8] Separate Font Awesome 5 icons for each category - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] Separate Font Awesome 5 icons for each category (/thread-221498.html)



Separate Font Awesome 5 icons for each category - Anka06 - 2019-01-13

Themes - Add Css forumicons.css


.forums-icon {
    display: inline;
    color: #fff;
    text-align: center;
}

.forums-icon i {
    display: inline;
    font-size:13px;
    font-family:"Font Awesome 5 Free";
    font-weight: 900;
    margin-left:-4px;
}

.forums-icon_1 i:before {
    content: "\f188";
} 

.forums-icon_2 i:before {
    content: "\f559";
}

.forums-icon_3 i:before {
    content: "\f0f3";
}

.forums-icon_4 i:before {
    content: "\f0e3";
}

.forums-icon_5 i:before {
    content: "\f005";
}

.forums-icon_6 i:before {
    content: "\f598";
}

.forums-icon_7 i:before {
    content: "\f0f3";
}

.forums-icon_8 i:before {
    content: "\f58b";
}

.forums-icon_9 i:before {
    content: "\f557";
}

.forums-icon_10 i:before {
    content: "\f004";
}	

forumbit_depth1_cat - Find

{$forum['name']}

replace with 

<div class="forums-icon forums-icon_{$forum['fid']}"><i class="fas fa-"></i></div> {$forum['name']}

icons are not shown  add fid tag in link bar

.forums-icon_fid i:before {
    content: "\f004";
}	



Headerinclude Add


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



for a better mybb


RE: Separate Font Awesome 5 icons for each category - blongso - 2020-03-08

Thank you for sharing!
Greets,
blongso


RE: Separate Font Awesome 5 icons for each category - lkop - 2021-07-01

thank you for the tutorial