Best Answer

CSS for changing virtual coach icon

  • 3 November 2023
  • 4 replies
  • 48 views
L
Rank
Userlevel 2
Badge

Anyone know what CSS I might use to change the virtual coach icon at all? 

icon

Best answer by Bfarkas 11 November 2023, 00:54

View original

4 replies

Bfarkas
Rank
Userlevel 7
Badge +3

How do you mean change, color or actual icon? I have changing the color on all the icons or individually over on Fark.Tools, but it is:

/* Change the color of virtual coach icon in the header bar (robot) */
g#virtualcoach {
    fill: #0000ff;
}

just change the #0000ff to the color you want.

L
Rank
Userlevel 2
Badge

Hey @Bfarkas I mean the actual icon and not the color! Any ideas?

Bfarkas
Rank
Userlevel 7
Badge +3

So I looked into this, and it is technically possible, but it is not great. The icon is a vector path not a simple image to hide and replace, and because it is a vector path there is a bunch of things tied to it and its sizing that this feels like a maintenance nightmare to me, really don’t recommend this unfortunately.

This will hide the path of the original SVG:

g[data-icon-name="virtualcoach"] > path {
    display: none;
}

working on a better way to insert a new image in its place. but leaving notes in case someone else with some time is digging in.

C

@LauraHelena do you mean the icons in the upper right of page, like the “graduation hat” icon? If so, I am also VERY interested in changing this -- hope someone can provide advice!

Reply


Terms & ConditionsCookie settings