UserCP Navigation with Font Awesome Styling
Quote:Preview of the updated User Control Panel navigation.
![[Image: MXBAgZ6.png]](https://i.imgur.com/MXBAgZ6.png)
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.
Signature
Working on this