Xucce
UserCP Navigation with Font Awesome Styling - Printable Version

+- Xucce (https://xucce.com)
+-- Forum: Forums (https://xucce.com/forum-1.html)
+--- Forum: MyBB Development (https://xucce.com/forum-4.html)
+---- Forum: Tutorials (https://xucce.com/forum-11.html)
+---- Thread: UserCP Navigation with Font Awesome Styling (/thread-27.html)

UserCP Navigation with Font Awesome Styling - Erik - 05-26-2025

UserCP Navigation with Font Awesome Styling

Quote:
[Image: MXBAgZ6.png]
Preview of the updated User Control Panel navigation.


Step 1: Replace CSS in your theme
Go to:
ACP → Templates & Style → Themes → YOUR THEME → usercp.css

Replace everything with the following:


Locked Content

Guests cannot view hidden content. Please log in.


Step 2: Add Font Awesome (if not already installed)
Go to:
ACP → Templates & Style → Templates → Your Theme → Ungrouped Templates → headerinclude

Add this line anywhere inside the `<head>` section:

Code:
.cp_options td:first-child {
    width: 230px;
}

.usercp_options {
    margin: 0;
    padding: 0;
    list-style: none outside none;
}

.usercp_options > li {
    margin: 0;
    padding: 4px 0px;
}

.usercp_options > li > span {
    display: inline-block;
    text-align: right;
}

.usercp_nav_item {
    display: block;
}

.usercp_nav_item a {
    color: #454545;
}

.usercp_nav_item:before {
    font-size: 16px;
    font-family: 'FontAwesome';
    color: #d2d2d2;
    width: 28px;
    margin-right: 3px;
    text-align: center;
    display: inline-block;
}

.usercp_nav_composepm:before { content: "\f112"; }
.usercp_nav_pmfolder:before { content: "\f07c"; }
.usercp_nav_sub_pmfolder:before { content: "\f07b"; }
.usercp_nav_trash_pmfolder:before { content: "\f014"; }
.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: "\f040"; }
.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: "\f040"; }
.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"; }

.usercp_notepad {
    width: 99%;
}

#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_container {
    margin: 5px;
    padding: 8px;
}

td[class^=trow] {
    border: none;
}

Note: If Font Awesome is already installed in your theme, skip this step.