FontAwesome icon with incorrect color

Developing Nodes
30

Morning @BartButenaers, @dceejay

So working on the above info and what Dave suggested, I now have a working solution.

Watch..
2019-10-12_11-06-17

What i did

  • added class ui-svg to the parent div of the svg
  • added a local <style> element to override some style settings...
div.ui-svg svg{
    color: var(--nr-dashboard-widgetColor);
    fill: currentColor !important;
}

div.ui-svg path {
    fill: inherit !important;
}

...This targets only our nodes SVG only and permits style fill setting. Phew.
(TODO: Check attribute setting fill works)

QUESTIONS

  1. You will notice I default the color to css variable --nr-dashboard-widgetColor - @dceejay is this the correct variable?

  2. @BartButenaers are you happy with using dashboard css color setting as the fall back (i.e. when no fill is specified - inherit the dashboards css variable value)? or should it just be none? The difference I see is someone pasting SVG from another application, where no fill is set, they will suddenly see their path items now have colour.

  3. Are there any other SVG elements set by dashboard CSS that we need to consider?

Steve.

2 Likes