XenForo Tutorials

[XF2] Font Awesome on Menu and Sub Menus

Submitted by Lord Tachanka, , Thread ID: 72644

Thread Closed
Lord Tachanka
Banned
Level:
0
Reputation:
0
Posts:
31
Likes:
11
Credits:
333
01-02-2018, 03:37 AM
This post was last modified: 01-02-2018, 03:38 AM by Lord Tachanka
#1
Add font awesome icons to menu and submenu drop downs.

More unicode font awesome codes can be found atFont 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:

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)