Font Awesome on Menu and Sub Menus

Dermot · Jan 1, 2018

Dermot submitted a new resource:

Font Awesome on Menu and Sub Menus - Add font awesome to Menu and Submenus

Add font awesome icons to menu and submenu drop downs.

More unicode font awesome codes can be found at Font Awesome Icon List

When you click single icon it will have unicode under the icon shown.

You can add colour anytime using the CSS color attribute.

To find missing menu items, just use F12/developer tools to find missing data navigation id.

Any questions, feel free to ask...

Read more about this resource...

AbuGhaith · Jan 8, 2018

sorry not working for me
can you put an exemple

Dermot · Jan 9, 2018

Sure, Which skin/theme are you using?

Dnyan · Mar 7, 2018

Not working with UIX2 theme

Dermot · Mar 8, 2018

Dnyan Deshmukh said:
Not working with UIX2 theme

which part?
error?

Dnyan · Mar 8, 2018

Sub Menu.

Now i had installed another addong, which is working and gives same functionality which have name something like this [SC] Submenu

Dermot · Mar 8, 2018

Dnyan Deshmukh said:
Sub Menu.

Now i had installed another addong, which is working and gives same functionality which have name something like this [SC] Submenu

It could be UIX2 interfering with the class but i doubt it, will have to get the skin and test it.

kankan · Apr 6, 2018

Hello all,
With UIX2 main category icon change > ok
but submenu icon not displayed > ko

Submenu HTML in source :

2018-04-06 12_41_47-Le Forum des Portables Asus.webp

arnold · Jun 10, 2018

why is my fa not displayed ?
i get a open square and not the free symbol i picked.

i try to use f54e, if i use f27b it is displaying fine.
do i need to install a'n extra font ?

Brad Padgett · Jun 10, 2018

arnold said:
why is my fa not displayed ?
i get a open square and not the free symbol i picked.

i try to use f54e, if i use f27b it is displaying fine.
do i need to install a'n extra font ?

It's likely due to Font Awesome 5 not being supported yet on Xenforo 2. You'll need to use only the Font Awesome 4 cheatsheet here:

https://fontawesome.com/v4.7.0/cheatsheet/

Font Awesome 5 came out recently after Xenforo released and according to the devs would take a lot of work in order to upgrade the icon font but they plan to have it supported in XF 2.1

Dermot · Jun 13, 2018

arnold said:
why is my fa not displayed ?
i get a open square and not the free symbol i picked.

i try to use f54e, if i use f27b it is displaying fine.
do i need to install a'n extra font ?

As brad stated, font awesome 5 has done things a lot different with breaking up the number of font classes, like FAB , FAS, FAR etc

Not to mention Pro versions of several icons.

In 4, it was just all FA which made it easy to implement, So as was mentioned, stick to version 4 icons for now available at https://fontawesome.com/v4.7.0/icons/

* Will update resource to show this.

Dermot · Dec 18, 2018

just a lil addition to make it work with 2.1 ..

also added in icons to staff bar and login and register buttons and action bar

CSS:

/****************** Menu/Sub Menu icons ****************************/

.p-navEl [data-nav-id="home"]:before{font-family:'Font Awesome 5 Pro';content:"\f015";padding-right:5px}
.p-navEl [data-nav-id="forums"]:before{font-family:'Font Awesome 5 Pro';content:"\f27a";padding-right:5px}

.p-navEl [data-nav-id="whatsNew"]:before{font-family:'Font Awesome 5 Pro';content:"\f0f3";padding-right:5px}

/***************** Sub menu whatsnew ****************************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewPosts"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f067";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewProfilePosts"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f007";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewNewsFeed"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f1ea";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="latestActivity"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f043";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewNewMedia"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f03e";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewMediaComments"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmNewResources"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f019";
    padding-right: 5px;
}

/**************************************************/

.p-navEl [data-nav-id="members"]:before{font-family:'Font Awesome 5 Pro';content:"\f0c0";padding-right:5px}

/*********************members sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="currentVisitors"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f1e5";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="newProfilePosts"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="searchProfilePosts"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

.p-navEl [data-nav-id="xfmg"]:before{font-family:'Font Awesome 5 Pro';content:"\f03e";padding-right:5px}

/*********************media sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewMedia"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f196";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewComments"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgSearchMedia"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

.p-navEl [data-nav-id="xfrm"]:before{font-family:'Font Awesome 5 Pro';content:"\f115";padding-right:5px}

/******************* resources sub menu ***********/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmLatestReviews"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmSearchResources"]:before{
    font-family:'Font Awesome 5 Pro';
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

/******************* LOGIN REGISTER icons ***************/
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
    font-family:'Font Awesome 5 Pro';
    content: "\f023";
    padding-right: 5px;
}

.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before {
    font-family:'Font Awesome 5 Pro';
    content: "\f234";
    padding-right: 5px;
}
/*********************************************************/

.p-staffBar-link:before {
    font-family:'Font Awesome 5 Pro';
    content: "\f0e3";
    padding-right: 5px;   
}

.actionBar-action:before {
    margin-right: 5px;
}
.actionBar-action--edit:before {.m-faContent("\f040");}
.actionBar-action--report:before {.m-faContent("\f071");}
.actionBar-action--ip:before {.m-faContent("\f002");}
.actionBar-action--delete:before {.m-faContent("\f00d");}
.actionBar-action--spam:before {.m-faContent("\f024");}
.actionBar-action--warn:before {.m-faContent("\f12a");}
.actionBar-action--history:before {.m-faContent("\f1da");}

SyTry · Dec 18, 2018

Why not do it like this :

Code:

.p-navEl {
    &:before {
        font-family: "Font Awesome 5 Pro" ;
        padding-right: 5px;
    }

    &[data-nav-id="home"]:before { content:"\f015"; }
    &[data-nav-id="forums"]:before{ content:"\f27a"; }
}

It is shorter and less repetitive !

Dermot · Dec 18, 2018

SyTry said:
Why not do it like this :

Code:

.p-navEl { &:before { font-family: "Font Awesome 5 Pro" ; padding-right: 5px; } &[data-nav-id="home"]:before { content:"\f015"; } &[data-nav-id="forums"]:before{ content:"\f27a"; } }

It is shorter and less repetitive !

true, i was been lazy n just did a string replace in notepad++ of original post

update .. tried this way and it doesn't seem to work

Dermot · Dec 19, 2018

installed 2.1 so tested it and added another way to do it.

added the missing forum sub menu icons and added two icons to staff bar moderator drop down menu also.

CSS:

.p-navEl a:before,
.menu-content a:before{
    font-family: 'Font Awesome 5 Pro';
    padding-right: 10px;
}

.p-navEl a[data-nav-id="home"]:before {content:"\f015";}
.p-navEl a[data-nav-id="forums"]:before{content:"\f27a";}
    .menu-content a[data-nav-id="newPosts"]:before{content:"\f067"; }
    .menu-content a[data-nav-id="findThreads"]:before{content:"\f002"; }
    .menu-content a[data-nav-id="yourThreads"]:before{content:"\f498"; }
    .menu-content a[data-nav-id="contributedThreads"]:before{content:"\f5d2"; }
    .menu-content a[data-nav-id="unansweredThreads"]:before{content:"\f05e"; }
    .menu-content a[data-nav-id="watched"]:before{content:"\f1e5"; }
    .menu-content a[data-nav-id="watchedThreads"]:before{content:"\f5da"; }
    .menu-content a[data-nav-id="watchedForums"]:before{content:"\f5da"; }
    .menu-content a[data-nav-id="searchForums"]:before{content:"\f002"; }
    .menu-content a[data-nav-id="markForumsRead"]:before{content:"\f058"; }
.p-navEl a[data-nav-id="whatsNew"]:before{content:"\f0f3"; }
    .menu-content a[data-nav-id="whatsNewPosts"]:before{content:"\f067"; }
    .menu-content a[data-nav-id="whatsNewProfilePosts"]:before{content:"\f007"; }
    .menu-content a[data-nav-id="whatsNewNewsFeed"]:before{content:"\f1ea"; }
    .menu-content a[data-nav-id="latestActivity"]:before{content:"\f043"; }
    .menu-content a[data-nav-id="xfmgWhatsNewNewMedia"]:before {content:"\f03e"; }
    .menu-content a[data-nav-id="xfmgWhatsNewMediaComments"]:before{content:"\f0e6"; }
    .menu-content a[data-nav-id="xfrmNewResources"]:before{content:"\f019"; }   
.p-navEl a[data-nav-id="members"]:before {content:"\f0c0"; }
    .menu-content a[data-nav-id="currentVisitors"]:before{content:"\f1e5"; }
    .menu-content a[data-nav-id="newProfilePosts"]:before{content:"\f086"; }
    .menu-content a[data-nav-id="searchProfilePosts"]:before{content:"\f002"; }
.p-navEl a[data-nav-id="xfmg"]:before {content:"\f03e"; }
    .menu-content a[data-nav-id="xfmgNewMedia"]:before{content:"\f196"; }
    .menu-content a[data-nav-id="xfmgNewComments"]:before{content:"\f0e6"; }
    .menu-content a[data-nav-id="xfmgSearchMedia"]:before{content:"\f002"; }
.p-navEl a[data-nav-id="xfrm"]:before {content:"\f115"; }
    .menu-content a[data-nav-id="xfrmLatestReviews"]:before{content:"\f0e6"; }
    .menu-content a[data-nav-id="xfrmSearchResources"]:before{content:"\f002"; }

.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn {
    &:before { font-family: "Font Awesome 5 Pro"; padding-right: 5px; content: "\f023";}}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register {
    &:before { font-family: "Font Awesome 5 Pro"; padding-right: 5px; content: "\f234";}}
    
.actionBar-action:before { margin-right: 5px;}
.actionBar-action--edit:before {.m-faContent("\f040");}
.actionBar-action--report:before {.m-faContent("\f071");}
.actionBar-action--ip:before {.m-faContent("\f002");}
.actionBar-action--delete:before {.m-faContent("\f00d");}
.actionBar-action--spam:before {.m-faContent("\f024");}
.actionBar-action--warn:before {.m-faContent("\f12a");}
.actionBar-action--history:before {.m-faContent("\f1da");}
    
.p-staffBar-link:before {
    font-family:'Font Awesome 5 Pro';
    content: "\f502";
    padding-right: 10px;   
}

a[href$="/approval-queue/"]:before {
    font-family:'Font Awesome 5 Pro' !important;
    content: "\f05b";
    padding-right: 10px !important;   
}

a[href$="/reports/"]:before {
    font-family:'Font Awesome 5 Pro' !important;
    content: "\f648";
    padding-right: 10px !important;   
}

upnet · Feb 15, 2019

2.1: Is it possible to implement them into the mobile menu? Also what about the case of navigation items that don't have a nav-id, but are children of the nav-id so they do display in the menu? I've been able to get something to display in the right spot, but it's not actually a FA-icon, just the FA is missing box..

Code:

.offCanvasMenu a[href*="/forums/Australia"]:before {.m-faContent(@fa-var-comments);}

SyTry · Feb 16, 2019

upnet said:
2.1: Is it possible to implement them into the mobile menu? Also what about the case of navigation items that don't have a nav-id, but are children of the nav-id so they do display in the menu? I've been able to get something to display in the right spot, but it's not actually a FA-icon, just the FA is missing box..

Code:

.offCanvasMenu a[href*="/forums/Australia"]:before {.m-faContent(@fa-var-comments);}

Yes, just add offCanvasMenu to your class

dethfire · Mar 26, 2019

upnet said:
I've been able to get something to display in the right spot, but it's not actually a FA-icon, just the FA is missing box..

Did you figure it out? I get the same thing.

Dermot · Mar 27, 2019

I suppose you could do something like..

CSS:

.offCanvasMenu a { font-family:'Font Awesome 5 Pro' !important;  }
.offCanvasMenu a[href$="/whats-new/posts/"]:before { content: "\f05b"; padding-right: 5px; }
.offCanvasMenu a[href$="/find-threads/started"]:before { content: "\f002"; padding-right: 5px; }

Dermot · Mar 27, 2019

This is the whole code from above with mobile menu added...the code in last post is how you would do it without an ID.

CSS:

// Navigation Font awesome 5 pro icons

a:before {
    font-family: 'Font Awesome 5 Pro';
padding-right: 10px;
}

a[data-nav-id="home"]:before {content:"\f015";color: #808000;}
a[data-nav-id="forums"]:before{content:"\f27a";color: #FFFF00;}
a[data-nav-id="newPosts"]:before{content:"\f067";}
a[data-nav-id="newPosts"]:before{content:"\f067";}
a[data-nav-id="findThreads"]:before{content:"\f002"; }
a[data-nav-id="yourThreads"]:before{content:"\f498"; }
a[data-nav-id="contributedThreads"]:before{content:"\f5d2"; }
a[data-nav-id="unansweredThreads"]:before{content:"\f05e"; }
a[data-nav-id="watched"]:before{content:"\f1e5"; }
a[data-nav-id="watchedThreads"]:before{content:"\f5da"; }
a[data-nav-id="watchedForums"]:before{content:"\f5da"; }
a[data-nav-id="searchForums"]:before{content:"\f002"; }
a[data-nav-id="markForumsRead"]:before{content:"\f058"; }
a[data-nav-id="whatsNew"]:before{content:"\f0e7" !important; color: #E6BB5C;}
a[data-nav-id="whatsNewPosts"]:before{content:"\f067"; }
a[data-nav-id="whatsNewProfilePosts"]:before{content:"\f007"; }
a[data-nav-id="whatsNewNewsFeed"]:before{content:"\f1ea"; }
a[data-nav-id="latestActivity"]:before{content:"\f043"; }
a[data-nav-id="xfmgWhatsNewNewMedia"]:before {content:"\f03e"; }
a[data-nav-id="xfmgWhatsNewMediaComments"]:before{content:"\f0e6"; }
a[data-nav-id="xfrmNewResources"]:before{content:"\f019"; }
a[data-nav-id="members"]:before {content:"\f0c0" !important; color: #2E8E2B;}
a[data-nav-id="currentVisitors"]:before{content:"\f1e5"; }
a[data-nav-id="newProfilePosts"]:before{content:"\f086"; }
a[data-nav-id="searchProfilePosts"]:before{content:"\f002"; }
a[data-nav-id="xfmg"]:before {content:"\f03e"; }
a[data-nav-id="xfmgNewMedia"]:before{content:"\f196"; }
a[data-nav-id="xfmgNewComments"]:before{content:"\f0e6"; }
a[data-nav-id="xfmgSearchMedia"]:before{content:"\f002"; }
a[data-nav-id="xfrm"]:before {content:"\f115"; }
a[data-nav-id="xfrmLatestReviews"]:before{content:"\f0e6"; }
a[data-nav-id="xfrmSearchResources"]:before{content:"\f002"; }

.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn {
    &:before { font-family: "Font Awesome 5 Pro"; padding-right: 5px; content: "\f023";}}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register {
    &:before { font-family: "Font Awesome 5 Pro"; padding-right: 5px; content: "\f234";}}
   
.actionBar-action:before { margin-right: 5px;}
.actionBar-action--edit:before {.m-faContent("\f040");}
.actionBar-action--report:before {.m-faContent("\f071");}
.actionBar-action--ip:before {.m-faContent("\f002");}
.actionBar-action--delete:before {.m-faContent("\f00d");}
.actionBar-action--spam:before {.m-faContent("\f024");}
.actionBar-action--warn:before {.m-faContent("\f12a");}
.actionBar-action--history:before {.m-faContent("\f1da");}
   
.p-staffBar-link:before {
   font-family:'Font Awesome 5 Pro';
   content: "\f502";
   padding-right: 10px;  
}

a[href$="/approval-queue/"]:before {
    font-family:'Font Awesome 5 Pro' !important;
    content: "\f05b";
    padding-right: 10px !important;  
}

a[href$="/reports/"]:before {
    font-family:'Font Awesome 5 Pro' !important;
    content: "\f648";
    padding-right: 10px !important;  
}

// End font awesome icons

Font Awesome on Menu and Sub Menus

Active member

Well-known member

Active member

Well-known member

Active member

Well-known member

Active member

Well-known member

Member

Well-known member

Active member

Active member

Well-known member

Active member

Active member

Active member

Well-known member

Well-known member

Active member

Active member

We value your privacy