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
2 answers
2

You can indeed, try

 

answered
0

You can override the style of the SVG by applying a CSS filter. This CSS property was added in recent years and support for it has since been implemented by most-used browsers.

Unfortunately, it is not as straightforward as inputting a HEX code and calling it a day. Instead, you will have to calculate which CSS filter operations to use to achieve the desired outcome. I found this online tool for it: CSS filter generator to convert from black to target hex color (codepen.io)

 

Example:

Let's override the SVG color with #F97F02:

filter: invert(54%) sepia(45%) saturate(1577%) hue-rotate(356deg) brightness(94%) contrast(109%);

 

Keep in mind that this tool assumes that your starting color is black. If you have any other color, such as grey, you will first need to apply the following filters:

brightness(0) saturate(100%)

 

answered