popjunkie Posted March 25, 2022 Share Posted March 25, 2022 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? Link to comment Share on other sites More sharing options...
Marc Posted March 25, 2022 Share Posted March 25, 2022 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"; } Link to comment Share on other sites More sharing options...
Sonya* Posted March 25, 2022 Share Posted March 25, 2022 (edited) 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* Marc and popjunkie 2 Link to comment Share on other sites More sharing options...
popjunkie Posted March 25, 2022 Author Share Posted March 25, 2022 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? Link to comment Share on other sites More sharing options...
popjunkie Posted March 25, 2022 Author Share Posted March 25, 2022 Nevermind, looks like it worked. Thanks Link to comment Share on other sites More sharing options...
Manuel Molina Posted March 29, 2022 Share Posted March 29, 2022 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... Link to comment Share on other sites More sharing options...
Manuel Molina Posted March 29, 2022 Share Posted March 29, 2022 Fixed reducing to cero text link size... .ipsNavBar_primary > ul > li#elNavSecondary_36 > a { font-size: 0; } Link to comment Share on other sites More sharing options...
Manuel Molina Posted March 29, 2022 Share Posted March 29, 2022 Link to comment Share on other sites More sharing options...
popjunkie Posted March 30, 2022 Author Share Posted March 30, 2022 Is there a way to center the icon on top of the text link Link to comment Share on other sites More sharing options...
Manuel Molina Posted March 30, 2022 Share Posted March 30, 2022 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. Link to comment Share on other sites More sharing options...
Manuel Molina Posted March 30, 2022 Share Posted March 30, 2022 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. Link to comment Share on other sites More sharing options...
TacticalGaming Posted November 4, 2022 Share Posted November 4, 2022 Is there not a simple add to add? We used to have one. Can't find one for IPS 4.7 Link to comment Share on other sites More sharing options...
Recommended Posts