Adding Icons to navBarItems

[Alexandru]

Hi there community,
Adding a Menu Manager in templates to add icons next to the {$item->title()}, it would be nice for us frond-end dev's and it would make our life so much easier.

Example:

[Goza]

Since you've added the FA code in the navBarItems template. You can designated different icons by using CSS.

When you inspect in google chrome, firefox, or whatever browser you use. A little tedious work, add these in your custom.css 

[data-navitem-id="87"] .fa-comment:before {
	content: "\f206";
}

For each icon inserted, change the ID of the navitem-id and change the content: "\f206" to your prefer icon number. 

[Alexandru]

On 12/31/2022 at 2:23 AM, Goza said:

Since you've added the FA code in the navBarItems template. You can designated different icons by using CSS.

When you inspect in google chrome, firefox, or whatever browser you use. A little tedious work, add these in your custom.css 

[data-navitem-id="87"] .fa-comment:before {
	content: "\f206";
}

For each icon inserted, change the ID of the navitem-id and change the content: "\f206" to your prefer icon number. 

I know, I already work like this for icons, but it would be easier for clients who bought a template that have custom items like that trough CSS. A lot of my clients asked me "How do I modify these icons? ; how do I add one ? " For me it's easy, and I found an easier way cuz I don't like to use the ID's.

.ipsNavBar_primary ul[data-role="primaryNavBar"] > li[data-menukey="drawncodes_Online Users"] > 
a > .navItem--text > .navItem--icon:before {
  content: "";
}

/* As you can see I added on the <li> an attribute 
<li .. data-menukey="drawncodes_{$item->title()}"> and It's easier for me than ID's */

/* Adding an option to add your own icons to your navBarItems, 
it would be so much easier for everybody else aswell. 
Overall I think this is a good suggestion and It should be taken into consideration */

 

Edited January 2, 2023 by drawncodes