Font Awesome on Menu and Sub Menus

[Dermot]

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]

sorry not working for me
can you put an exemple

 

[Dermot]

Sure, Which skin/theme are you using?

 

[Dnyan]

Not working with UIX2 theme

 

[Dermot]

Not working with UIX2 theme

which part?
error?

 

[Dnyan]

Sub Menu.

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

 

[Dermot]

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]

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

Submenu HTML in source :

 

[arnold]

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]

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]

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]

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

/****************** 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]

Why not do it like this :

.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]

Why not do it like this :

.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]

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.

.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]

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..

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

 

[SyTry]

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..

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

Yes, just add offCanvasMenu to your class

 

[dethfire]

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]

I suppose you could do something like..

.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]

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.

// 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