PrivateAlps.net - Offshore Cloud Services | VPS/RDP/VPN - Dedicated Servers - Webhosting - TOR Services - Auto Deploy
MyBB Tutorials

[For 1.8] Replace PM icons with Font Awesome

Submitted by e8iw2f3, , Thread ID: 24371

Thread Closed
26-11-2016, 11:09 AM
Working Not Working Link Down
#1
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


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

Inprivate_messagebit andprivate_search_messagebit templates:

Find

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

and replace with:

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


Before:

[Image: before.png]

After:

[Image: after.png]

RE: [For 1.8] Replace PM icons with Font Awesome

#2
I will definately try but the default one is pretty nice already

RE: [For 1.8] Replace PM icons with Font Awesome

#3
This made the Pm page look so much nicer. Thank you!

RE: [For 1.8] Replace PM icons with Font Awesome

#4
Nice tutorial thanks for this.

Users browsing this thread: 1 Guest(s)