Change the state color of a custom glyphicon

0
Hello, I asked a question a few days ago that was answered and I was able to fix the problem (yay!) but now I have another, similar issue I’m hoping someone can help me with.   I have a sidebar menu where the icons and text are grey, and when clicked on, they turn green. Before my issue was changing the active state for the text and standard glyphicons, which I was able to solve by going into the SCSS variables and add one called $navsidebar-color-active (the default was white). My new problem is, I have a custom svg icon, and it doesn’t adhere to this rule (not that I wouldn’t expect it to). In the picture above, Vehicles is the active button, but the icon stays the same color. I’m not sure how to add an active state to the HTML without using a seperate CSS stylesheet, which doesn’t help me since I need to upload a single file to the images folder. I don’t have much experience with html or CSS though (which is terrible, I know – I plan to learn these, but for now, I’m kind of lost). Can I use inline CSS along with the inline SVG? And if so, could someone point out where I would do this? This is what I have: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="448" viewBox="0 0 512 448"> <title></title> <g id="icomoon-ignore"> </g> <path fill="#656359" d="M120 272c0-22-18-40-40-40s-40 18-40 40 18 40 40 40 40-18 40-40zM129 192h254l-22.25-89.25c-0.75-2.75-5.75-6.75-8.75-6.75h-192c-3 0-8 4-8.75 6.75zM472 272c0-22-18-40-40-40s-40 18-40 40 18 40 40 40 40-18 40-40zM512 248v96c0 4.5-3.5 8-8 8h-24v32c0 26.5-21.5 48-48 48s-48-21.5-48-48v-32h-256v32c0 26.5-21.5 48-48 48s-48-21.5-48-48v-32h-24c-4.5 0-8-3.5-8-8v-96c0-31 25-56 56-56h7l26.25-104.75c7.75-31.5 38.25-55.25 70.75-55.25h192c32.5 0 63 23.75 70.75 55.25l26.25 104.75h7c31 0 56 25 56 56z"></path> </svg>    
asked
1 answers
2

You can indeed, try

 

answered