Best Answer

Change 'Back' icon SVG color in CSS without changing 'Magnifying Glass' icon color

  • 5 March 2022
  • 8 replies
  • 553 views
A
Rank

Hi, 

Could anyone enlighten me as to how I can change the ‘Back’ icon fill (circled in red) without changing the fill color of the ‘Magnifying glass’ icon (also circled in red)?

I can’t seem to change one in my CSS without the other also changing. 

Thanks!

 

 

icon

Best answer by Bfarkas 5 March 2022, 22:17

View original

8 replies

Bfarkas
Rank
Userlevel 7
Badge +3

I believe this is what you are looking for:
 

g#chevron-left {
    fill: #ff0000;
}

It’s generally a best practice/useful to supply the code you have tried so far that is causing a problem though to help troubleshoot/confirm trying the same thing in the future.

Hope this is what you were looking for!

A
Rank

Hi Bfarkas, 

 

Really appreciate the help and will do in the future! Unfortunately, I added your code into the CSS box and it doesn’t seem to give the desired result. 

 

For more context, when I change the fill with this rule (original code) it modifies the fill of both the magnifying glass and back icons to grey. 

dcb-ui-icon span.color-negative svg, ui-icon span.color-negative svg {
    fill: #414041 !important;
}

 

In contrast, when I add this into the CSS, both the magnifying glass and back icons switch to white. Even when I add !important

g#chevron-left { fill: #414041; }

 

The desired outcome here is to switch the back icon to HEX #414041 all while leaving the magnifying glass white. 

 

Any help you can provide is greatly appreciated!

gstager
Rank
Userlevel 7
Badge +5

In contrast, when I add this into the CSS, both the magnifying glass and back icons switch to white. Even when I add !important

g#chevron-left { fill: #414041; }

The above CSS that @Bfarkas provided should work just fine to do what you are asking.

If it does not, I might suggest that either

  1. You have a typo in your CSS causing it not to work
  2. You have a rule coming after that overrides it

I noticed in your code above - you have !important

If all your rules are tagged important - the one that is loaded last will prevail.

g#chevron-left {
    fill: #414041 !important;
}
g#chevron-left {
    fill: #0000ff !important;
}

Consider the above example.

The chevron will appear blue - even though your desired color is tagged !important. The next one is also tagged that way and will “win” because it comes after.

The order of your rule placement in the Branding and Look area makes a difference.

Hope that helps.

Greg
Bfarkas
Rank
Userlevel 7
Badge +3

Tagging onto Greg’s answer, for this exact reason it is generally not great to just throw !important’s unless there is no other way as it causes issues down stream. Generally in the Docebo setup you don’t need them.

You’re previous entry is a fairly broad scoped item as it will apply to any SVG that uses the declared negative color which is why multiple icons, probably more than just the two of the back and the magnifying glass, are changing. 

Definitely be careful with your order, organization, and selections for custom CSS work. If you aren’t already, make sure to comment out what each block is for too so that you and others can always quickly find what a block was for and what it will be impacting to change it or fix something.

A
Rank

Thank you both for the answers, they're very much appreciated. 

Unfortunately, I'm inheriting the CSS from someone who did not comment out much at all and it is quite lengthy. This is also my first attempt at CSS ever!

After having tested a while longer, the code you provided definitely does allow me to fix the < icon. 

g#chevron-left {
    fill: #414041 !important;
}

What I could not figure out was how to modify the >, which I've since deduced is chevron-right as in this rule: 

g#chevron-right {
    fill: #414041 !important;
}

The < and > icons are now grey whereas the magnifying glass is white. Sharing in case it can help someone out in the future. 

Thanks again!

Bfarkas
Rank
Userlevel 7
Badge +3

Great job!

Welcome to the CSS fun club!

Isram
Rank
Userlevel 3
Badge

@Bfarkas @gstager 

A question...follow up the CSS fun club!! 😁

 

Is there a way to customize ( by CSS ) the primary color for each Page-Menu?

Bfarkas
Rank
Userlevel 7
Badge +3

Can you specify what you mean by each page menu? The way I interpret it, is most likely a no unofrtunately.

Also, for anyone checking this thread out in the future, I’ve added all the icons and back chevron to the CSS Configuration Wizard in FarkTools for easy updating.

Reply


Terms & ConditionsCookie settings