Skip to main content
Best Answer

CSS for changing virtual coach icon

  • November 3, 2023
  • 4 replies
  • 75 views

Forum|alt.badge.img

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

Best answer by Bfarkas

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.

4 replies

Bfarkas
Hero III
Forum|alt.badge.img+6
  • Hero III
  • November 8, 2023

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.


Forum|alt.badge.img
  • Author
  • Contributor II
  • November 9, 2023

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


Bfarkas
Hero III
Forum|alt.badge.img+6
  • Hero III
  • Answer
  • November 10, 2023

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.


  • Newcomer
  • February 13, 2024

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