Best way to add FontAwesome icons to Navigation Bar?

[David..]

What is the best way to add some navigation font icons to the navigation bar and the secondary navbar?

[steve00]

10 hours ago, David.. said:

What is the best way to add some navigation font icons to the navigation bar and the secondary navbar?

Here is css used on my site:

/*** PRIMARY NAV ICONS ***/


[data-navapp] a::before,
[data-navext] a::before,
a[data-navtitle]::before {
  font-family: FontAwesome;
  font-size: 14px;
  color: #f5f5f5;
  margin: 0;
}


[data-navapp="cms"] a::before {
    content:"\f015";
}

a[data-navtitle="Home"]::before {
  content: "\f015";
}

[data-navapp="forums"] a::before {
  content:"\f044";
}

[data-navapp="downloads"] a::before {
  content:"\f019";
}

[data-navapp="gallery"] a::before {
  content:"\f030";
}

[data-navapp="blog"] a::before {
  content:"\f212";
}

[data-navapp="calendar"] a::before {
  content:"\f073";
}

[data-navapp="chat"] a::before {
  content:"\f1d7";
}

[data-navext="StaffDirectory"] a::before {
  content: "\f0db";
}  

[data-navext="OnlineUsers"] a::before {
  content: "\f0c0";
} 

.elNavigation_app_nexus_Store::before {
  content:"\f07a";
}

.elNavigation_app_nexus_Support::before {
  content:"\f1cd";
}

a[data-navtitle="Community"]::before {
  content: "\f1e5";
}

a[data-navtitle="Activity"]::before {
  content: "\f251";
}

a[data-navtitle="Store"]::before {
  content: "\f07a";
}

a[data-navtitle="Support"]::before {
  content: "\f085";
}



/*** SUBMENU ICONS ***/


[data-navext="AllActivity"] > a::before {
  content: "\f252";
}
  
[data-navext="YourActivityStreams"] > a::before {
  content: "\f1fe";
}

[data-navext="YourActivityStreamsItem"] > a::before {
  content: "\f27b"
}

[data-navext="Search"] > a:before {
  content: "\f00e";
}

[data-navext="Orders"] > a::before {
  content: "\f022";
}

[data-navext="Purchases"] > a::before {
  content: "\f160";
}

[data-navext="Menu"] > a::before {
  content: "\f05a";
}

[data-navext="Support"] > a::before {
  content: "\f1cd";
}

Add the above to your custom.css (only use the one's you need (e.g. if do not have blog or gallery then no need to add the blog or gallery from the above css file)

Obviously change the content/color etc to your own requirements

NOTE: Leaderboard and Clubs not in the above as do not use them but the above should give you an idea on how to add to those if required

[Steph40]

I use this plugin: