Adding styleable Icons to Mendix

0
Hello Mendix-Enthusiasts, My problem is:  I want to use a “car” Icon in one of my buttons in a “Menu” (Snippet to use on multiple pages, see screenshot below). I am using multiple built in Icons and when I hover over the buttons, the Icon and Button change color. I want this logic to work for the added “car” icon as well. Currently the "car" icon is added image collection and is transfered into an <img> tag.  I tried it with adding a “car” svg as image, but changing its color while hovering seems shockingly hard to implement, if even possible. (screenshot shows current Structure) I need an Icon to be added as glyphicon of some sort to make the color changes happen like with the built in icons. If there is more information needed, I am happy to deliver. I am using Version 9.12.5. Regards, Gerrit The car seen is an image added as icon, not a glyphicon like the other 3. I want this car to react like the other icons. It is not required to be an image, if there is a possible way to add glyphicons to Mendix?
asked
1 answers
0

Hi Gerrit,

Use the Below code to change the color of icon aswell as text on hover in your custom.scss file and make change the styles according to your theme.

.region-sidebar .mx-navigationtree .navbar-inner>ul>li a:hover, .region-sidebar .mx-navigationtree .navbar-inner>ul>li a:focus, .region-sidebar .mx-navigationtree .navbar-inner>ul>li a.active {

  1. color: #fff;
  2. background-color: #5f5f5f;
  3. background-color: #1fc2a3 !important;
  4. color: #050505 !important;
  5. filter: invert(99%) sepia(1%) saturate(50%) hue-rotate(

    170deg

    ) brightness(179%) contrast(100%) !important;

}

 

this will work.

answered