MyBB Community Forums

Full Version: Different Font Awesome icons per Category?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Used to use MyBB every day.. feel like a noob now..

But has there been an easyer way to add different font awesome icons per category?

This: https://i.gyazo.com/cd9f5b549933d673909d...1e0ab6.png

To This: https://i.gyazo.com/8171f5db8173f705514e...076951.png

A little confused here. I have bought the theme Generic if that helps at all  Huh
there can be different methods to achieve custom forum icons. see MyFontAwesomeIcons plugin
(2019-05-02, 08:05 AM).m. Wrote: [ -> ]there can be different methods to achieve custom forum icons. see MyFontAwesomeIcons plugin

Thank u! Seem to be alot easier Smile

one thing though seems Broken, https://i.gyazo.com/07450ef85d0a048b347d...7255a3.png

I will Pm u my website
(2019-05-02, 08:08 AM)makpaolo Wrote: [ -> ]
(2019-05-02, 08:05 AM).m. Wrote: [ -> ]there can be different methods to achieve custom forum icons. see MyFontAwesomeIcons plugin

Thank u! Seem to be alot easier Smile

one thing though seems Broken, https://i.gyazo.com/07450ef85d0a048b347d...7255a3.png

I will Pm u my website
You need to modify forumbit templates, can you post the website url or template code ?
(2019-05-02, 02:04 PM)WallBB Wrote: [ -> ]You need to modify forumbit templates, can you post the website url or template code ?

(2019-05-02, 08:05 AM).m. Wrote: [ -> ]there can be different methods to achieve custom forum icons. see MyFontAwesomeIcons plugin

Thank you for the help so far. Now they are aligned properly, but icons dont update?
(2019-05-02, 07:06 PM)makpaolo Wrote: [ -> ]
(2019-05-02, 02:04 PM)WallBB Wrote: [ -> ]You need to modify forumbit templates, can you post the website url or template code ?

(2019-05-02, 08:05 AM).m. Wrote: [ -> ]there can be different methods to achieve custom forum icons. see MyFontAwesomeIcons plugin

Thank you for the help so far. Now they are aligned properly, but icons dont update?

Not sure if you are using the suggested plugin but just a tip, if your theme has custom formbit template modifications ie: forumbit_depth2_cat, forumbit_depth2_forum, forumbit_depth3_statusicon you will need to revert those templates to default before installing the plugin and also remove any other font-awesome include say for example in headerinclude if already present in the theme. Note: (if your theme is using fa 4.7 by removing the 4.7 include you may have to edit some other icons in your theme to be 5.0 compliant though you will no longer need the 4.7 include as the plugin includes font-awesome 5 library.)


After that you follow the remaining steps to Install:

1) Upload The Files, And Go to Admin CP And Activate it!

2) Edit Index template:

Home » Template Sets » Default Templates » Edit Template: index

find:


{$boardstats}

<dl class="forum_legend smalltext">
 <dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
 <dd>{$lang->new_posts}</dd>

 <dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
 <dd>{$lang->no_new_posts}</dd>

 <dt><span class="forum_status forum_offclose" title="{$lang->forum_closed}"></span></dt>
 <dd>{$lang->forum_closed}</dd>

 <dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
 <dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />

replace with:

{$boardstats}

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

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

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

    <dt><div class="forum_status forum_offlink" title="{$lang->forum_redirect}"><i class="fas fa-link"></i></div></dt>
    <dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />

- this is required because I removed the old template insertion for index as it was no longer functioning and it is now decided with fa5 that it may be easier for the end user to edit the index template with code provided as then you can specify for fa icon in index legend say for example: fas fa-comments, fas fa-lock, fas fa-link. Or for example: far fa-comments, far fa-lock, far fa-link, etc etc. 


3) Go to forums Management Edit Forum Settings and edit each forum with your specific Font Awesome Icon.

The CSS name for the font awesome icon. For example: fas fa-comments

You can specify a css name to your forum's custom font-awesome icon by going to the ACP => Forum Management => Edit Forum.
(2019-05-02, 07:25 PM)vintagedaddyo Wrote: [ -> ]
(2019-05-02, 07:06 PM)makpaolo Wrote: [ -> ]
(2019-05-02, 02:04 PM)WallBB Wrote: [ -> ]You need to modify forumbit templates, can you post the website url or template code ?

(2019-05-02, 08:05 AM).m. Wrote: [ -> ]there can be different methods to achieve custom forum icons. see MyFontAwesomeIcons plugin

Thank you for the help so far. Now they are aligned properly, but icons dont update?

Not sure if you are using the suggested plugin but just a tip, if your theme has custom formbit template modifications ie: forumbit_depth2_cat, forumbit_depth2_forum, forumbit_depth3_statusicon you will need to revert those templates to default before installing the plugin and also remove any other font-awesome include say for example in headerinclude if already present in the theme.


After that you follow the remaining steps to Install:

1) Upload The Files, And Go to Admin CP And Activate it!

2) Edit Index template:

Home » Template Sets » Default Templates » Edit Template: index

find:


{$boardstats}

<dl class="forum_legend smalltext">
 <dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
 <dd>{$lang->new_posts}</dd>

 <dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
 <dd>{$lang->no_new_posts}</dd>

 <dt><span class="forum_status forum_offclose" title="{$lang->forum_closed}"></span></dt>
 <dd>{$lang->forum_closed}</dd>

 <dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
 <dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />

replace with:

{$boardstats}

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

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

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

    <dt><div class="forum_status forum_offlink" title="{$lang->forum_redirect}"><i class="fas fa-link"></i></div></dt>
    <dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />

- this is required because I removed the old template insertion for index as it was no longer functioning and it is now decided with fa5 that it may be easier for the end user to edit the index template with code provided as then you can specify for fa icon in index legend say for example: fas fa-comments, fas fa-lock, fas fa-link. Or for example: far fa-comments, far fa-lock, far fa-link, etc etc. 


3) Go to forums Management Edit Forum Settings and edit each forum with your specific Font Awesome Icon.

The CSS name for the font awesome icon. For example: fas fa-comments

You can specify a css name to your forum's custom font-awesome icon by going to the ACP => Forum Management => Edit Forum.



Thank you. I did that with default template, but still didn't work. I have not tried forumbit templates. I will place them here now:

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

<div class="container-fluid">
<!-- BEGIN left Content -->
<div id="forum_index" class="col-xs-12 col-sm-9 index_forum"> 
{$dvz_shoutbox}
{$forums}
{$boardstats}
</div>
<!-- END left Content -->

<!-- BEGIN Right Sidebar -->
<div class="sidebar_index col-xs-6 col-sm-3 latestthreads">
<script type="text/javascript">
 jQuery(function(){
 jQuery(".latestthreads_portal").load("{$mybb->settings['bburl']}/portal.php .latestthreads_portal");
 });
</script>
<!-- BEGIN Recommended -->
<div class="panel">
 <div class="panel-heading">
 <span class="panel-title"><strong>Official Tournaments</strong></span>
        <a class="accordion-toggle" data-toggle="collapse" href="#recommended"></a> 
 </div>
 <div id="recommended" class="panel-collapse collapse in">
<div class="banners">

<a target="_blank" href="http://brchamps.com"><img src="https://smashgg.imgix.net/images/tournament/48366/image-88445518e4da5268a6095d182b441d43.png?auto=compress,format&w=280&h=280&fit=crop"></a>

</div>
 </div>
</div>
<!-- END Recommended -->
 
<!-- BEGIN Latest Threads -->
<div class="panel">
 <div class="panel-heading">
 <span class="panel-title"><strong>Latest Threads</strong></span>
        <a class="accordion-toggle" data-toggle="collapse" href="#latest"></a> 
 </div>
 <div id="latest" class="panel-collapse collapse in padding-8px">
        <table class="table table-responsive"> 
            <tbody id="latestthreads_e" class="latestthreads_portal">       
  
            </tbody>
        </table> 
 </div>
</div>
<!-- END Latest Threads -->
 
 <!-- BEGIN Statistics -->
<div class="panel">
 <div class="panel-heading">
 <span class="panel-title"><strong>Statistics</strong></span>
        <a class="accordion-toggle" data-toggle="collapse" href="#statistics"></a> 
 </div>
 <div id="statistics" class="panel-collapse collapse in">
<div class="istatwrap">
<span><strong><i class="fa fa-comments"></i> {$stats['numposts']}</strong> Total posts</span> <br />
<span><strong><i class="fa fa-commenting"></i> {$stats['numthreads']}</strong> Total Threads</span> <br />
<span><strong><i class="fa fa-users"></i> {$stats['numusers']}</strong><a href="{$mybb->settings['bburl']}/memberlist.php"> Members</a></span> <br />
<span><strong><i class="fa fa-tachometer"></i> {$mostonline['numusers']}</strong> Most Online</span>
</div>
 </div>
</div>
<!-- END Statistics -->

</div>
</div>
{$footer}
</body>
</html>


forumbit_depth2_cat

<div class="row bottom-border">
 <div class="col-lg-1 text-center padding-8px"><div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></div></div>
 <div class="col-lg-5 padding-8px"><strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="small"><span class="help-block">{$forum['description']}</span>{$subforums}</div></div>
 <div class="col-lg-2 text-center small white-space-nowrap padding-8px">{$lang->forumbit_threads}:&nbsp;{$threads}{$unapproved['unapproved_threads']}<br>{$lang->forumbit_posts}:&nbsp;{$posts}{$unapproved['unapproved_posts']}</div>
 <div class="col-lg-4 text-center small white-space-nowrap padding-8px">{$lastpost}</div>
</div>



 forumbit_depth2_forum

<div class="row-bit bottom-border">
<div class="tt col-lg-1 fstat no-padding padding-8px forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></div>
 <div class="col-lg-6 padding-top line-height-1">
 <strong><a href="{$forum_url}">{$forum['name']}</a></strong>
 {$forum_viewers_text}
 <div class="small padding-bottom-8px">
 <span class="help-block">{$forum['description']}<br />
 {$subforums}</span>
 {$modlist}
 </div>
 </div>
 <div class="col-lg-2 posts-bit text-center small white-space-nowrap padding-8px">{$lang->forumbit_threads}:&nbsp;{$threads}{$unapproved['unapproved_threads']}<br>{$lang->forumbit_posts}:&nbsp;{$posts}{$unapproved['unapproved_posts']}</div>
 <div class="col-lg-3 pull-right lastp small padding-8px white-space-nowrap text-right">{$lastpost}</div>
</div>


 forumbit_depth3_statusicon


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


Should I still go ahead and revert the templates? Thank u very much for support. Great community in mybb  Wink
(2019-05-02, 08:22 PM)makpaolo Wrote: [ -> ]Should I still go ahead and revert the templates? Thank u very much for support. Great community in mybb  Wink


Well if you don't revert them we would have to manually insert the plugin calls..., which is fairly easy but without viewing the theme css I don't want to guide you incorrectly as there may be some styling conflictions that I cannot forsee without seeing completely what I am working with.

mainly what you need to find is where to add the plugin calls for example:

In forumbit_depth2_forum & forumbit_depth2_cat & forumbit_depth3_statusicon you would find:


id="mark_read_{$forum['fid']}">


And add this after:


<i class="{$forum['myfontawesomeicon']}"></i>


Now as for the index edits, it appears that your index does not use the legend so you would not need to add those index edits.


In headerinclude template you would also need to make sure that after:


{$stylesheets}

There is the following include:

<link href="{$mybb->asset_url}/inc/plugins/myfontawesomeicons/font-awesome-5/css/all.css" rel="stylesheet" type="text/css">

And that your font awesome 4.7 include in that template or wherever it is included is commented
<!-- -->
out so as to avoid version conflicts.

Then anywhere in the theme that icons don't display correctly you would need to simply edit the icons to the respective font awesome 5 icon call as it appears that your theme is using font-awesome 4 based on the fa rather than "fas, far" etc, etc. Hopefully that makes sense.

In forum management you would add the icon name for each forum in input for Font Awesome Icon: "The CSS name for the font awesome icon. For example: fas fa-comments"


If that is too complicated you could always download an earlier version of the plugin 1.1  https://community.mybb.com/mods.php?acti...9&bid=2993 that used font-awesome 4.7 library and the only major change would be one uploading the different plugin files and also how the library as it is a different library is called in headerinclude:


First you would deactivate the 1.2 version of the plugin, install the 1.1 version of the plugin

Before installing the older 1.1 version please consider this..., depending on your php version you may run into an error notice if you opted on using the 1.1 version of the plugin as the default icon is not defined by default in that version.

you can correct that by

In the myfontawesomeicons.php plugin file you would need to find:  (line #55)

 function myfontawesomeicons_install()
 {
 global $db;
 $db->add_column('forums', 'myfontawesomeicons_icon', 'TEXT NOT NULL');
 }

And change to:

    function myfontawesomeicons_install()
    {
        global $db;
        
  //    $db->add_column('forums', 'myfontawesomeicons_icon', 'TEXT NOT NULL');

        // Define an initial default icon

        $db->add_column('forums', 'myfontawesomeicons_icon', 'varchar(25) DEFAULT "fa-comments"');
    }



still due to your custom template that modified these templates you need to find where to add the plugin calls for example:

In forumbit_depth2_forum & forumbit_depth2_cat & forumbit_depth3_statusicon you would find:


id="mark_read_{$forum['fid']}">


And add this after:


<i class="{$forum['myfontawesomeicon']}"></i>


Now as for the index edits, it appears that your index does not use the legend so you would not need to add those index edits.



so instead you would in headerinclude template you would need to make sure that after:


{$stylesheets}

There is the following include:

<link href="{$mybb->asset_url}/inc/plugins/myfontawesomeicons/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Also note in the older version of the plugin..., the adding icon name is slightly different in forum management: ie: In forum management you would add the icon name for each forum in input for Font Awesome Icon: "The CSS name for the font awesome icon. For example: fa-comments"


Hopefully that all makes sense. Smile
I did the second part, but think it may need a few more theme edits as it doesn't seem to be working well! Thank u for your help so far I appreciate it a lot
(2019-05-02, 10:09 PM)makpaolo Wrote: [ -> ]I did the second part, but think it may need a few more theme edits as it doesn't seem to be working well! Thank u for your help so far I appreciate it a lot

Yeah, no worries..., got a few moments of free time on the computer so hopefully we can get this sorted for you and well, since you sent me the link to your site, I viewed the page source just to confirm what I already knew by the few templates you shared using "fa fa-*" icon calls.., and yep your theme is using font-awesome 4.7, so you would need to use the 1.1 plugin and instructions provided above for that unless you wanted to update your theme to use the font-awesome 5 version of the plugin as removing the 4.7 call will break some 4.7 icons in the rest of the theme unless you manually edit them to the new calls for fa5
Pages: 1 2