Best Answer

CSS for changing virtual coach icon

  • 3 November 2023
  • 4 replies

Userlevel 2

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


Best answer by Bfarkas 11 November 2023, 00:54

View original

4 replies

Userlevel 7
Badge +4

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.

Userlevel 2

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

Userlevel 7
Badge +4

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.

Userlevel 1

@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!