Resource icon

Font Awesome on Menu and Sub Menus

Dermot

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

Dnyan Deshmukh

Well-known member
Sub Menu.

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

kankan

Well-known member
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.png
 

arnold

Member
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

Well-known member
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

Active member
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

Active member
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

Well-known member
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 ! :D
 

Dermot

Active member
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 ! :D
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
 
Last edited:

Dermot

Active member
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;   
}
 
Top