XenForo Tutorials

Font Awesome on Menu and Sub Menus

Submitted by zbimz, , Thread ID: 67775

Thread Closed
zbimz
Newbie
Prime
Level:
0
Reputation:
0
Posts:
19
Likes:
12
Credits:
178
02-01-2018, 02:48 AM
#1
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]

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)