Streaming live at 10am (PST)

How to change icon on vertical nav bar

So im using this template made from another person on here which is amazing. Now im trying to figure out what makes the ‘diamond’ icon and what setting makes it change to be bigger and red when its selected. Id like to figure that out so i can hopefully upload my own ‘selected’ and ‘unselected’ icon to replace it. But i just cant seem to figure it out.

Here is my site: https://preview.webflow.com/preview/warrens-blank-site-26df33?utm_medium=preview_link&utm_source=designer&utm_content=warrens-blank-site-26df33&preview=6c72580b063a11b3e83db7957fa8fdca&pageId=5d6adb8f068031ceda8e331c&mode=preview

Hey again @Warren_Breedlove!

The diamond icon is simply just text – nothing fancy to worry about there. That said, if you’re trying to make it larger upon being selected, just change the type/font size on that element. I see that you have a current modifier class, which is great. You’ve already got the color change down - just make the type bigger and you’ll be set!

Note: when you do this, you’ll notice that the icons are spaced oddly. To correct this, select the parent element (Nav menu), and give it the following flex settings.

Then, just adjust the top and bottom margins as you see fit.

Hope that helps!

Awesome that does help with those two things! I wanted to put some custom icons there i guess i could try to make my own font with a special charcter to do that. Do you think that would be the best approach? To change the diamonds to a custom icon i created

Definitely wouldn’t go through all that trouble of creating your own custom font. I would use a resource like Noun Project or Icon Finder and sub those icons in instead!

That i could manage! However im having trouble figuring out how to sub in a icon without breaking the whole thing.

These are the my custom bullet point im trying to use instead.

This is the design so you can get an idea of my endgame

Just fyi your read-only is not working.