XenForo Tutorials
Font Awesome on Menu and Sub Menus
Submitted by zbimz, 02-01-2018, 02:48 AM, Thread ID: 67775
Thread Closed
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.
![[Image: cj6E3Fh.jpg]](https://i.imgur.com/cj6E3Fh.jpg)
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.
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.
Code:
/****************** Menu/Sub Menu icons ****************************/
.p-navEl [data-nav-id="home"]:before{font-family:FontAwesome;content:"\f015";padding-right:5px}
.p-navEl [data-nav-id="forums"]:before{font-family:FontAwesome;content:"\f27b";padding-right:5px}
.p-navEl [data-nav-id="whatsNew"]:before{font-family:FontAwesome;content:"\f0a2";padding-right:5px}
/***************** Sub menu whatsnew ****************************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewPosts"]:before{
font-family: FontAwesome;
content: "\f067";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewProfilePosts"]:before{
font-family: FontAwesome;
content: "\f007";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewNewsFeed"]:before{
font-family: FontAwesome;
content: "\f1ea";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="latestActivity"]:before{
font-family: FontAwesome;
content: "\f043";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewNewMedia"]:before{
font-family: FontAwesome;
content: "\f03e";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewMediaComments"]:before{
font-family: FontAwesome;
content: "\f0e6";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmNewResources"]:before{
font-family: FontAwesome;
content: "\f019";
padding-right: 5px;
}
/**************************************************/
.p-navEl [data-nav-id="members"]:before{font-family:FontAwesome;content:"\f2be";padding-right:5px}
/*********************members sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="currentVisitors"]:before{
font-family: FontAwesome;
content: "\f1e5";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="newProfilePosts"]:before{
font-family: FontAwesome;
content: "\f0e6";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="searchProfilePosts"]:before{
font-family: FontAwesome;
content: "\f002";
padding-right: 5px;
}
/**************************************************/
.p-navEl [data-nav-id="xfmg"]:before{font-family:FontAwesome;content:"\f03e";padding-right:5px}
/*********************media sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewMedia"]:before{
font-family: FontAwesome;
content: "\f196";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewComments"]:before{
font-family: FontAwesome;
content: "\f0e6";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgSearchMedia"]:before{
font-family: FontAwesome;
content: "\f002";
padding-right: 5px;
}
/**************************************************/
.p-navEl [data-nav-id="xfrm"]:before{font-family:FontAwesome;content:"\f115";padding-right:5px}
/******************* resources sub menu ***********/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmLatestReviews"]:before{
font-family: FontAwesome;
content: "\f0e6";
padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmSearchResources"]:before{
font-family: FontAwesome;
content: "\f002";
padding-right: 5px;
}
/**************************************************/Users browsing this thread: 1 Guest(s)