XenForo Mobile Layout Navigation Icons !

Marks-Man

Marks-Man

Loyal Member
Step 1 :
  • extra.less
CSS: 
/**  Mobile Layout Navigation Icons @ XNFORO.IR **/
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='forums']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f27a";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}


.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='newPosts']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f005";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='findThreads']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f00e";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='yourThreads']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f1ea";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='contributedThreads']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f78a";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='unansweredThreads']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f070";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='watched']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f06e";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='watchedThreads']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f06e";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='watchedForums']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f44a";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='searchForums']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f002";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='markForumsRead']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f070";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}




.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='whatsNew']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f005";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmNewResources']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f849";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='whatsNewProfilePosts']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f22a";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='whatsNewNewsFeed']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f1ea";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='latestActivity']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f5da";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='whatsNewPosts']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f008";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrm']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f091";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmLatestReviews']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f06e";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}




.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmYourResources']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f120";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmNewResources']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f10d";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmWatched']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f2e1";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmSearchResources']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f1ea";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmWatchedResources']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f6db";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='xfrmWatchedCategories']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f6db";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='registeredMembers']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f0ca";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='members']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f0ca";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='currentVisitors']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f643";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='newProfilePosts']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f10d";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu--nav .js-offCanvasNavTarget a[data-nav-id='searchProfilePosts']:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    content: "\f4d8";
    font-size: 14px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
  
}
.offCanvasMenu-header:before {
     font-family: 'Font Awesome 5 Pro';
     content: "\f532";
     font-size: 14px;
     display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
     margin-right: 6px;
    /**  Mobile Layout Navigation Icons @ XNFORO.IR **/

Step 2 :
eedd3703fc6a2.png
 
You must log in or register to reply here.
Back
Top Bottom