MyBB Community Forums

Hello everyone,

I have a lot I want to change but I'm not completely sure on how its done!

Mod CP, AdminCP and UserCP Font awesome icons.

I want to replace the top links with font awesome icons and I'm not sure how to. This is what I want to change to font awesome icons http://prntscr.com/brwvv7

UserCP font awesome icons

How do I replace these images with font awesome icons.

http://prntscr.com/brwwwy

You need to modify header templates.
header_member, moderator , admin template to add usercp icons.

For the UserCP, you need to modify usercp templates or you can even use css code in the usercp css file like this

.message_icon {
    position:relative;
}    
.message_icon:before {
    content: "\f003"; 
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

I used f003 for envelope from here
http://fontawesome.io/icon/envelope-o/

Hope it helps.

Regards
WallBB

(2016-07-12, 12:33 PM)WallBB Wrote: [ -> ]You need to modify header templates.
header_member, moderator , admin template to add usercp icons.

For the UserCP, you need to modify usercp templates or you can even use css code in the usercp css file like this
.message_icon {
    position:relative;
}    
.message_icon:before {
    content: "\f003"; 
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }
I used f003 for envelope from here
http://fontawesome.io/icon/envelope-o/

Hope it helps.

Regards
WallBB

I do not have good knowledge of CSS.

(2016-07-12, 12:37 PM)Dizzygaming Wrote: [ -> ]
(2016-07-12, 12:33 PM)WallBB Wrote: [ -> ]You need to modify header templates.
header_member, moderator , admin template to add usercp icons.

For the UserCP, you need to modify usercp templates or you can even use css code in the usercp css file like this
.message_icon {
    position:relative;
}    
.message_icon:before {
    content: "\f003"; 
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }
I used f003 for envelope from here
http://fontawesome.io/icon/envelope-o/

Hope it helps.

Regards
WallBB
I do not have good knowledge of CSS.

You just need to use above code and modify all instances of the css present in the usercp.css with your custom icons. Smile

You can even check how to use font awesome icons here
http://fontawesome.io/examples/

(2016-07-12, 12:37 PM)Dizzygaming Wrote: [ -> ]
(2016-07-12, 12:33 PM)WallBB Wrote: [ -> ]You need to modify header templates.
header_member, moderator , admin template to add usercp icons.

For the UserCP, you need to modify usercp templates or you can even use css code in the usercp css file like this
.message_icon {
    position:relative;
}    
.message_icon:before {
    content: "\f003"; 
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }
I used f003 for envelope from here
http://fontawesome.io/icon/envelope-o/

Hope it helps.

Regards
WallBB
I do not have good knowledge of CSS.

For headerlinks see: https://community.mybb.com/thread-205008...pid1248883

If you also meant how to change modcp and usercp pages to fa icons try:

modcp.css

/*
 * MyBB: Theme
 *
 * File: modcp.css
 * 
 * Author: vintagedaddyo
 *
 * MyBB Version: 1.8
 *
 * Theme Version: 1.0
 * 
 */

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

.modcp_nav_home:before{
      content:"\f015";
}

.modcp_nav_announcements:before {
    content:"\f0f3"
}

.modcp_nav_reports:before {
    content: "\f071";
}

.modcp_nav_modqueue:before {
    content:"\f02d"
}

.modcp_nav_modlogs:before {
    content: "\f109";
}

.modcp_nav_editprofile:before {
    content: "\f007";
}

.modcp_nav_banning:before {
    content: "\f023";
}

.modcp_nav_warninglogs:before {
    content: "\f06e";
}

.modcp_nav_ipsearch:before {
    content: "\f002";
}

.modqueue_message {
    overflow: auto;
    max-height: 250px;
}

.modqueue_controls {
    width: 270px;
    float: left;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 6px;
    font-weight: bold;
}

.modqueue_controls label {
    margin-left: 8px;
}

.label_radio_ignore, .label_radio_delete, .label_radio_approve {
    font-weight: bold;
}

.modqueue_meta {
    color: #444;
    font-size: 95%;
    margin-bottom: 8px;
}

.modqueue_mass {
    list-style: none;
    margin: 0;
    width: 150px;
    padding: 0;
}

usercp.css

/*
 * MyBB: Theme
 *
 * File: usercp.css
 * 
 * Author: vintagedaddyo
 *
 * MyBB Version: 1.8
 *
 * Theme Version: 1.0
 * 
 */

.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:#0072BC;
}

.usercp_nav_item:before{
      font-size:16px;
      font-family:'FontAwesome';
      color: #2C2C2C;
      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_notepad{
      width:99%;
}

.usercp_container{
      margin:5px;
      padding:8px;
}

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

Dizzygaming

WallBB

Dizzygaming

WallBB

User 6029