[For 1.8] Replace PM icons with Font Awesome

[For 1.8] Replace PM icons with Font Awesome - 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] Replace PM icons with Font Awesome (/thread-206180.html)

Replace PM icons with Font Awesome - Ashley1 - 2016-11-26

Ignore step 1 if you are already linking to Font Awesome CSS, although you need to make sure that it's the latest version (4.7.0 at this time) as these icons are new.

Step 1:

In headerinclude add above {$stylesheets}:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 2:

Add to usercp.css

.x_new_pm:before {font-family:FontAwesome; content: "\f003"; font-size:16px}
.x_old_pm:before {font-family:FontAwesome; content: "\f2b7"; font-size:16px}
.x_fw_pm:before {font-family:FontAwesome; content: "\f2b7"; position:absolute; font-size:16px}
.x_fw_pm:after {font-family:FontAwesome; content: "\f178"; position:relative; top:11px; left:5px; color:#5b94c5; font-size:16px}
.x_re_pm:before {font-family:FontAwesome; content: "\f2b7"; position:absolute; font-size:16px}
.x_re_pm:after {font-family:FontAwesome; content: "\f177"; position:relative; top:11px; right:5px; color:#663096; font-size:16px}

Step 3:

In private_messagebit and private_search_messagebit templates:

Find

<img src="{$theme['imgdir']}/{$msgstatus}.png" alt="{$msgalt}" title="{$msgalt}" />

and replace with:



Before:

[Image: before.png]

After:

RE: Replace PM icons with Font Awesome - Donald_Duck - 2016-11-26

Nice , provide same for postbit buttons and thread create close buttons

RE: Replace PM icons with Font Awesome - day-day - 2016-11-26

Looks AWESOME! Hope to see some more as Donald Duck stated

RE: Replace PM icons with Font Awesome - Ashley1 - 2016-11-27

For the thread buttons:

forumdisplay_newthread

Replace with:

<a href="newthread.php?fid={$fid}" class="button" style="text-decoration:none">  {$lang->post_thread}</a>

showthread_newreply

Replace with:

<a href="newreply.php?tid={$tid}" class="button" style="text-decoration:none">  {$lang->new_reply}</a> 

showthread_newreply_closed

Replace with:

<a href="newreply.php?tid={$tid}" class="button" style="text-decoration:none">  {$lang->thread_closed}</a> 

showthread_newthread

Replace with:

<a href="newthread.php?fid={$fid}" class="button" style="text-decoration:none">  {$lang->post_thread}</a> 

[Image: buttons1.png]

RE: Replace PM icons with Font Awesome - beautes - 2017-01-30

Great stuff, thanks

RE: Replace PM icons with Font Awesome - Eldenroot - 2017-02-04

What about PM tracking and the legend shown below the thread/forum (print, subscribe, etc.) Wink

RE: Replace PM icons with Font Awesome - User 6029 - 2018-11-02

(2016-11-26, 07:53 AM)Ashley1 Wrote: -- SNIP --

Replace PM icons with Font Awesome - Font Awesome 5

Original tutorial credit to Ashley1 @ https://community.mybb.com/thread-206180.html

Here I have simply updated it for Font Awesome 5 usage:

Example:

For Font Awesome 5:

In headerinclude add:

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

NOTE: You can skip the header include if you already have the font awesome included in your headerinclude say from other tutorials.

In private_messagebit and private_search_messagebit templates:

Find:

<img src="{$theme['imgdir']}/{$msgstatus}.png" alt="{$msgalt}" title="{$msgalt}" />

and replace with:

<span class="x_{$msgstatus}" title="{$msgalt}"></span>

Add to usercp.css:

/** FA PM Icons **/

.x_new_pm:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0e0";
    font-size: 16px;
}

.x_old_pm:before {
    font-family: "Font Awesome 5 Free";
    content: "\f2b6";
    font-size: 16px;
}

.x_fw_pm:before {
    font-family: "Font Awesome 5 Free";
    content: "\f2b6";
    position: absolute;
    font-size: 16px;
}

.x_fw_pm:after {
    font-family: "Font Awesome 5 Free";
    content: "\f30b";
    position: relative;
    top: 11px;
    left: 5px;
    color: #5b94c5;
    font-size: 16px;
    font-weight: 900;
}

.x_re_pm:before {
    font-family: "Font Awesome 5 Free";
    content: "\f2b6";
    position: absolute;
    font-size: 16px;
}

.x_re_pm:after {
    font-family: "Font Awesome 5 Free";
    content: "\f30a";
    position: relative;
    top: 11px;
    right: 5px;
    color: #663096;
    font-size: 16px;
    font-weight: 900;
}

*Simply updated for FA5 usage while compiling, creating and updating all FA5 related tuts here: https://community.mybb.com/thread-220017-post-1315632.html

Update: This tutorial so far has not touched the icons in pm tracking so we need to account for that like so:

Example:

in private_tracking_unreadmessage:

Find:

<img src="{$theme['imgdir']}/new_pm.png" alt="" />

Replace with:

<span class="x_new_pm"></span>

in private_tracking_readmessage:

Find:

<img src="{$theme['imgdir']}/old_pm.png" alt="" />

Replace with:

<span class="x_old_pm"></span>