[For 1.8] Font-Awesome Forum Icons
#11
(2018-01-24, 07:57 PM)MrTeaBiscuit Wrote: 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?

Same here, and whenever I place the code somewhere other than the index it only shows an empty box. Any clue why?
[Image: logo.png]
Reply
#12
No idea pal, I love the theme so much and have made so many edits to it but yet I still can't find a way to change the board icons to Font Awesome icons. Whoever developed this theme seriously needs to release an update.
Reply
#13
Is there any way that we could set custom subforum icons? Instead of the comment icon change it to something we want?
Reply
#14
(2017-09-13, 01:45 AM)Livewire Wrote: 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


I found my error and solved it.

My apologies.



I tried this but all the icons are the same color. Whether the forum has a new post or not. And the lock didn't show up when I closed a thread.

I took the opacity up to .9 to see what would happen and all the forums with no new posts went dark, and the forums with something new in them stayed light (.4) opacity.

I looked through everything I did and the changes I made look correct. But maybe I'm overlooking something.

If you want to look it over it is

Testing theme


Thank you
Damn you, lower panel. You are the bane of my existence!
Reply
#15
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>


Any update for the latest version of fontawesome?
Reply
#16
(2020-03-02, 12:45 AM)hamburgers Wrote: <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>


Any update for the latest version of fontawesome?

I'll update this thread soon with the latest version.
Do NOT PM me for support unless I ask you on your support thread.
Reply
#17
Does anyone know how can I make those icons appear in subforum on the main forum page? Everything is working and when I click on the forum and see list of subforums all my set icons are there, but not in the main page..

Here is what I mean: http://prntscr.com/sysxv4
Reply
#18
@Kieria

I added them by editing hte depth3_statisicon to include the "{$forum['fid']}" that the other depths used. Came up as this;

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

And a pic:

[Image: 9d04edb3f7b6c87aa3cf1d400ed3faf2.png]
[Image: Zcz1gZM.png]
Reply
#19
This is exactly what i was looking! Thank you.
Reply
#20
how to replace the <i class="fa fa-comment"> with my own choosed icon on dived style on forumbit depth templates? should be better pharse it to var and add a hook to forum admincp page to choose icon?
blackunix team,  -sec forum at blackunix.com
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)