MyBB

Livewire · (This post was last modified: 2017-10-06, 06:51 PM by Livewire.)

https://community.mybb.com/thread-156711.html
^^ Don't know what happened to that post <snip> so here's the tutorial for all those newbies. Big Grin

Font-Awesome Forum Icons on MyBB 1.8 Software

Today, I will be giving you a tutorial on how to replace forum icons with Font-Awesome icons. The software of board being used in this tutorial is MyBB 1.8, however, any versions from 1.4 to 1.8 would be fine. Most of you have seen these type of additions on bulletin board's across the globe, and very much sure some of you would like to have one of these pages of your own. All others are also welcome to help other individuals on this thread who may be having issues, problems, and, errors after or before reading this tutorial. Many threads will be created regarding MyBB for owners and theme developers.

1. Loading Font Awesome
In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after {$stylesheets}:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

2. Adding Your Icon
Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:

<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>

With:

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

Now find the following in your global.css:

.forum_status {
height: 30px;
width: 30px;
background: url(images/forum_icon_sprite.png) no-repeat 0 0;
}

.forum_on {
background-position: 0 0;
}

.forum_off {
background-position: 0 -30px;
}

.forum_offlock {
background-position: 0 -60px;
}

.forum_offlink {
background-position: 0 -90px;
}

Replace it with:

.forum_status {
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

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

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

3. Fix Your Legend
If you wish to keep your forum icon legend, find your Index Page Templates -> index template and replace the contents with this:

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$forums}
{$boardstats}

<dl class="forum_legend smalltext">
<dt><div class="forum_status forum_on"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->new_posts}</dd>

<dt><div class="forum_status forum_off"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->no_new_posts}</dd>

<dt><div class="forum_status forum_offlock"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_locked}</dd>

<dt><div class="forum_status forum_offlink"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>

4. Adding Font-Awesome Subforum Icons
Find this in Forum Bit Templates -> forumbit_depth3_statusicon:

<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"></div>

Replace it with:

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

Then in global.css find this:

.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
background-position: 0 0;
}

.subforum_minioff {
 background-position: 0 -10px;
}

.subforum_miniofflock {
background-position: 0 -20px;
}

.subforum_miniofflink {
background-position: 0 -30px;
}

Replace it with:

.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
}

.subforum_minion {
color: #333;
}

.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
color: #333;
}

.subforum_minioff {
opacity: .4;
}

.subforum_miniofflock i:before {
content: "\f023";
}

.subforum_miniofflink i:before {
content: "\f0c1";
}

5. Adding Font-Awesome Forum Icons
Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:

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

With:

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

Find the following in global.css:

.forum_status {
height: 50px;
width: 50px; 
font-size: 30px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

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

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

After it, add this:

.ficons_2 i:before {
content: "\f000";
}

.ficons_3 i:before {
content: "\f1ba";
}

.ficons_4 i:before {
content: "\f0f5";
}

.ficons_6 i:before {
content: "\f0e4";
}

.ficons_7 i:before {
content: "\f03e";
}

Quote:ficons_1,2,3 etc are your forums ID, if you don't know your forum ID just hover to one of the forums and underneath left hand corner of your screen you'll see something like forumdisplay.php?fid=9 or go inside your forum and on the search bar you will see fid ID.

All credits go to
Eric J.

Previews:
http://i.imgur.com/qhS0HWt.png
http://i.imgur.com/5gpXDz4.png
http://i.imgur.com/QoHmvQ0.png
http://i.imgur.com/INysr98.png

For User CP & Mod CP look here!
https://community.mybb.com/thread-212919...pid1285812

Eric · 2017-09-13, 02:31 PM

I plan to rework the content and republish it soon. Thanks for keeping credit.

Starnova · 2017-09-14, 04:46 PM

Thank you both ... I needed some of the reference that appears here for my new site

Livewire · 2017-09-14, 09:18 PM

(2017-09-13, 02:31 PM)Eric J. Wrote: I plan to rework the content and republish it soon. Thanks for keeping credit.

Welcome.

(2017-09-14, 04:46 PM)Starnova Wrote: Thank you both ... I needed some of the reference that appears here for my new site

No worries glad to help.

Livewire · (This post was last modified: 2017-10-07, 04:44 AM by Livewire.)

Here's how you can do User CP & Mod CP Fa Icons.

If you want to change all your icons in modcp/usercp to Font Awesome, then use these codes.

Navigate to AdminCP > Templates & Style > Your Yheme > usercp.css, delete everything, and then add the following:

.cp_options td:first-child{
      width:230px;
}

.usercp_options{
      margin:0;
      padding:0;
      list-style:none outside none;
}

.usercp_options>li{
      margin:0;
      padding:4px 0px;
}

.usercp_options>li>span{
      display:inline-block;
      text-align:right;
}

.usercp_nav_item{
      display:block;
}

.usercp_nav_item a {color:#454545}

.usercp_nav_item:before{
      font-size:16px;
      font-family:'FontAwesome';
      color:#454545;
      width:28px;
      margin-right:3px;
      text-align:center;
      display:inline-block;
}

.usercp_nav_composepm:before{
      content:"\f112";
}

.usercp_nav_pmfolder:before{
      content:"\f07c";
}

.usercp_nav_sub_pmfolder:before{
      content:"\f07b";
}

.usercp_nav_trash_pmfolder:before{
      content:"\f014";
}

.usercp_nav_pmtracking:before{
      content:"\f024";
}

.usercp_nav_pmfolders:before{
      content:"\f07b";
}

.usercp_nav_profile:before{
      content:"\f007";
}

.usercp_nav_email:before{
      content:"\f0e0";
}

.usercp_nav_password:before{
      content:"\f084";
}

.usercp_nav_username:before{
      content:"\f111";
}

.usercp_nav_editsig:before{
      content:"\f040";
}

.usercp_nav_avatar:before{
      content:"\f03e";
}

.usercp_nav_options:before{
      content:"\f085";
}

.usercp_nav_usergroups:before{
      content:"\f0c0";
}

.usercp_nav_editlists:before{
      content:"\f004";
}

.usercp_nav_attachments:before{
      content:"\f0c6";
}

.usercp_nav_drafts:before{
      content:"\f040";
}

.usercp_nav_subscriptions:before{
      content:"\f02e";
}

.usercp_nav_fsubscriptions:before{
      content:"\f03a";
}

.usercp_nav_notepad:before{
      content:"\f02d";
}

.usercp_nav_viewprofile:before{
      content:"\f007";
}

.usercp_nav_home:before{
      content:"\f015";
}

.usercp_nav_status:before{
      content:"\f118";
}

.usercp_nav_myalerts:before{
      content:"\f0f3";
}

.usercp_nav_myalerts_delete_all:before{
      content:"\f058";
}

.usercp_nav_myalerts_delete_read:before{
      content:"\f05c";
}

.usercp_nav_award:before{
      content:"\f091";
}

.usercp_notepad{
      width:99%;
}

#usercpalerts_e td[class^="trow"],#usercppms_e td[class^="trow"],#usercpprofile_e td[class^="trow"],#usercpmisc_e td[class^="trow"]{
      border:none;
      padding:0px;
}

.pagination{
      padding:3px 0px;
}

.usercp_notepad{
      width:99%;
}

.usercp_container{
      margin:5px;
      padding:8px;
}

td[class^=trow]{
      border:none;
}

Now go back and add this code into modcp.css:

.modcp_nav_item:before{
      font-size:16px;
      font-family:'FontAwesome';
      color:#454545;
      width:28px;
      margin-right:3px;
      text-align:center;
      display:inline-block;
}

.modcp_nav_home:before{
      content:"\f015";
}

.modcp_nav_announcements:before {
    content:"\f0f3"
}

.modcp_nav_reports:before {
    content: "\f071";
}

.modcp_nav_modqueue:before {
    content:"\f02d"
}

.modcp_nav_modlogs:before {
    content: "\f109";
}

.modcp_nav_editprofile:before {
    content: "\f007";
}

.modcp_nav_banning:before {
    content: "\f023";
}

.modcp_nav_warninglogs:before {
    content: "\f06e";
}

.modcp_nav_ipsearch:before {
    content: "\f002";
}

.modqueue_message {
    overflow: auto;
    max-height: 250px;
}

.modqueue_controls {
    width: 270px;
    float: left;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 6px;
    font-weight: bold;
}

.modqueue_controls label {
    margin-left: 8px;
}

.label_radio_ignore, .label_radio_delete, .label_radio_approve {
    font-weight: bold;
}

.modqueue_meta {
    color: #444;
    font-size: 95%;
    margin-bottom: 8px;
}

.modqueue_mass {
    list-style: none;
    margin: 0;
    width: 150px;
    padding: 0;
}

.modqueue_mass li {
    margin-bottom: 4px;
    padding: 0;
}

.modqueue_mass li a {
    display: block;
    padding: 4px;
    border: 1px solid transparent;
}

.modqueue_mass li a:hover {
    background: #efefef;
    border: 1px solid #ccc;
    text-decoration: none;
}

If done correctly, your icons will look like this.
[Image: iIwsdtk.png]

Mixlight · 2017-11-28, 06:48 AM

why it looks like that :

Livewire · 2017-11-30, 01:50 AM

(2017-11-28, 06:48 AM)Mixlight Wrote: why it looks like that :

Provide me with your forum URL including a test account.

MonsteR_X · 2017-11-30, 02:38 PM

TFS..!

Livewire · 2017-12-17, 09:18 PM

(2017-11-30, 02:38 PM)MonsteR_X Wrote: TFS..!

?

MrTeaBiscuit · 2018-01-24, 07:57 PM

I was wondering how to do this for the Osmium theme, whenever I follow this guide the icons don't appear to change and i don't understand why?

Login
Username:
Password:	Lost Password?
	Remember me