Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690
↧

[Tutorial] - Font-Awesome 5 Forum Icons

October 1, 2018, 8:05 pm
$
0
0
* Original "Eric J" Tutorial for earlier versions of FA: https://community.mybb.com/thread-156711.html

^^ Liverwire didn't know what happened to that post <snip> so re-made the older Font Awesome version tutorial for all those newbies. The tutorial is found at: https://community.mybb.com/thread-212919.html

This here is a continuation Tutorial For 1.8.19 lock to close changes and updating the tutorial to use Font Awesome 5:

Font-Awesome 5 Forum Icons on MyBB 1.8.19 Software


Today, we will be giving you a tutorial on how to replace forum icons with Font-Awesome 5 icons. The software of board being used in this tutorial is MyBB 1.8.19. 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 posts will most likely will be created regarding MyBB for owners and theme developers.

1. Loading Font Awesome 5

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


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


2. Adding Your Icon

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

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

With:

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

Now find the following in your global.css:

Code:
.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_offclose {
background-position: 0 -60px;
}

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

Replace it with:

Code:
/** Forums **/

.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_offclose, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offclose 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:

Code:
<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="fas fa-comments"></i></div></dt>
<dd>{$lang->new_posts}</dd>

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

<dt><div class="forum_status forum_offclose"><i class="fas fa-comments"></i></div></dt>
<dd>{$lang->forum_closed}</dd>

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


In global.css find:

Code:
.forum_legend,
.forum_legend dt,
.forum_legend dd {
    margin: 0;
    padding: 0;
}

.forum_legend dd {
    float: left;
    margin-right: 10px;
    margin-top: 7px;
}

.forum_legend dt {
    margin-right: 10px;
    float: left;
}

Replace with:

Code:
.forum_legend, .forum_legend dt, .forum_legend dd {
    margin: 0;
    padding: 0;
}
.forum_legend dd {
    float: left;
    margin-right: 10px;
    margin-top: 17px;
}
.forum_legend dt {
    float: left;
    margin-right: 5px;
}


4. Adding Font-Awesome Subforum Icons

Find this in Forum Bit Templates -> forumbit_depth3_statusicon:

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

Replace it with:

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

Then in global.css find this:

Code:
.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_minioffclose {
background-position: 0 -20px;
}

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

Replace it with:

Code:
/** Subforums **/

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

.subforum_minion {
color: #333;
}

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

.subforum_minioff {
opacity: .4;
}

.subforum_minioffclose 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:

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

With:

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

Find the following in global.css:

Code:
/** Forums **/

.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_offclose, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

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

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

After it, add this:


Code:
/** Ficons **/

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

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

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

.ficons_5 i:before {
content: "\f3fd";
}

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

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

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

.ficons_9 i:before {
content: "\f2e7";
}

.ficons_10 i:before {
content: "\f3fd";
}

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

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

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

.ficons_14 i:before {
content: "\f2e7";
}

.ficons_15 i:before {
content: "\f3fd";
}

.ficons_16 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 past and current tutorial credits go to

Eric J., Livewire, Vintagedaddyo
Font-Awesome 5 ModCP Forum Icons on MyBB 1.8.19 Software


Replace modcp.css with:


Code:
.modcp_nav_item:before{
     font-size:16px;
     font-family:"Font Awesome 5 Free";
      font-weight: 900;
     color: #2C2C2C;
     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: right;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 6px;
    font-weight: bold;
}

.modqueue_controls label {
    margin-right: 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;
}



Font-Awesome 5 UserCP Forum Icons on MyBB 1.8.19 Software


Replace usercp.css with:

Code:
.usercp_nav_item {
     display:block;
}

.usercp_nav_item a {
    color:#0072BC;
}

.usercp_nav_item:before  {
     font-size:16px;
     font-family: "Font Awesome 5 Free";  
     font-weight: 900;
     color: #2C2C2C;
     width:28px;
     margin-right:3px;
     text-align:center;
     display:inline-block;
}

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

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

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

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

.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:"\f303";
}

.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:"\f303";
}

.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";
}

#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;
}

.pmspace {
    float: right;
    margin: -3px 5px;
}

.pmspace_container {
    background: #fff;
    border: 1px solid #ccc;
    width: 100px;
    display: inline-block;
}

.pmspace_used {
    display: inline-block;
    color: #fff;
    margin: -1px;
}

.pmspace_used.low {
    border: 1px solid #0c5a01;
    background: #167203;
}

.pmspace_used.medium {
    background: #ff862b;
    border: 1px solid #d7611e;
}

.pmspace_used.high {
    background: #e73c3c;
    border: 1px solid #c00;
}

.pmspace_unused {
    display: inline-block;
}

.pmspace_text {
    padding: 1px 5px;
    display: inline-block;
}

.new_pm {
    font-weight: bold;
}


.png   Screenshot_20181001-211315.png (Size: 42.88 KB / Downloads: 2)

.png   Screenshot_20181001-211326.png (Size: 56.54 KB / Downloads: 2)

.png   Screenshot_20181001-230204.png (Size: 82.95 KB / Downloads: 3)

.png   Screenshot_20181001-230247.png (Size: 199.54 KB / Downloads: 3)
↧
Search
Viewing all articles
Browse latest Browse all 690

Trending Articles

RAMAYAMPET Mandal Sarpanch | Upa-Sarpanch | Ward member Mobile Numbers Medak...

May 24, 2017, 2:00 am

लड़कियां सेक्स के दौरान क्यों करती है उह! आह!लड़कियां सेक्स के दौरान क्यों करती...

May 19, 2016, 1:54 am

Neem Baba Extra Questions Answer Class 6 English Poorvi

February 1, 2025, 5:19 am

Throw Back: 4×4 — Sikilitele (Ft Castro) Prod by JQ

March 5, 2015, 8:24 am

Rajasthan Board 10th Result 2016 Roll No wise & Name Wise

August 20, 2016, 5:13 pm

Lowe faces four theft charges

November 14, 2017, 6:52 pm

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Mafia, Murder & Mayhem In The Motor City: Detroit Mob Hit Timeline (1937-2007)

December 7, 2016, 3:57 pm

The 10 Tennessee Cities With The Largest Black Population For 2021

December 21, 2020, 10:12 am

Materials Around Us Class 6 Worksheet Science Chapter 6

October 3, 2024, 5:20 am

デスクトップ ヒープの枯渇

January 18, 2018, 8:31 pm

Best Suvichar in Hindi |बेस्ट सुविचार |शुभ विचार हिंदी में

March 7, 2020, 11:19 pm

Kanulanu Thaake Lyrics and translation | Manam (2014)

May 9, 2014, 5:45 am

Korean Sex Porn Videos: XXX Videos & Free Porn Movies

May 30, 2025, 9:29 pm

Teen Shot In Miami Drive-By Dies From Injuries

August 8, 2011, 1:16 pm

Download: IQ Muzatasha feat Shy D & Pmj – Ulesi NiFertilizer Yamavuto

March 22, 2018, 7:23 pm

Mahakal Attitude Status

February 29, 2020, 9:52 am

Property developer set up cannabis factory to help pay off debts...

August 3, 2015, 2:29 am

♡

July 11, 2015, 6:15 am

KB: How to troubleshoot issues when adding a Hyper-V host in System Center...

August 14, 2012, 10:05 am
Search