FontAwesome Icons in Navigation Bar

[popjunkie]

I'm not very knowledgeable about using CSS but I am trying to add icons to each of the buttons in my site's navigation bar. How exactly do I do this?

[Marc]

We are unable to assist with custom development and design, so I will move this to our community support area. I know I have done this before by targeting the ID of the navigation item, similar to this (In this instance, 34 is the ID. If you right click then inspect the navigation item, you will be able to get the ID, and the content item there is the icon

.ipsNavBar_primary > ul > li#elNavSecondary_34 > a:before
{
  font-family: FontAwesome;
  font-size:15px;
  font-weight: normal;
  margin-right: 5px;
  content: "\f041";
}

 

[Sonya*]

You can also use UTF-8 icons if you like them.

Just add them in your Menu Manager in Title or to your translation in Language System:

 

Edited March 25, 2022 by Sonya*

[popjunkie]

25 minutes ago, Marc Stridgen said:

We are unable to assist with custom development and design, so I will move this to our community support area. I know I have done this before by targeting the ID of the navigation item, similar to this (In this instance, 34 is the ID. If you right click then inspect the navigation item, you will be able to get the ID, and the content item there is the icon

.ipsNavBar_primary > ul > li#elNavSecondary_34 > a:before
{
  font-family: FontAwesome;
  font-size:15px;
  font-weight: normal;
  margin-right: 5px;
  content: "\f041";
}

 

Where do I find the correct rule to change?

[popjunkie]

Nevermind, looks like it worked. Thanks

[Manuel Molina]

This is awesome, thank you for this. Is there a way to leave only icons in nav bar, without the text links? I already have the icons...

[Manuel Molina]

Fixed reducing to cero text link size...

.ipsNavBar_primary > ul > li#elNavSecondary_36 > a
{
  font-size: 0;
}

[Manuel Molina]

[popjunkie]

Is there a way to center the icon on top of the text link

[Manuel Molina]

7 hours ago, clubcarter said:

Is there a way to center the icon on top of the text link

that is a great question, that would save a lot of space in navigation bar. I did some research yesterday for CSS that could help me do that but I am not that CSS savvy. Hope somebody has done it and can share the css with us.

[Manuel Molina]

I paid for Font Awesome pro version this morning to be able to use the thin icons in my nav bar, but I am not sure how to specify the think icon in css...

I am using now this:

.ipsNavBar_primary > ul > li#elNavSecondary_40 > a:before
{
  font-family: FontAwesome;
  font-size:17px;
  font-weight: normal;
  margin-right: 5px;
  content: "\f015";
}
 

But the content: "\f015" gives me the thick icon automatically, how can I change the css to include the thin version?

Thin version name is:  <i class="fa-thin fa-house"></i>

help appreciated.

[TacticalGaming]

Is there not a simple add to add? We used to have one. Can't find one for IPS 4.7