# FontAwesome icon with incorrect color

**URL:** <https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521>\
**Category:** Developing Nodes\
**Created:** [9 October 2019 21:43 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521 "2019-10-09T21:43:09Z")\
**Posts on this page:** 12\
**Page:** 2

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 October 2019 23:15 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/21 "2019-10-10T23:15:11Z")

</div>

Actually, I think this may be a case of trying to paint a nut (inline style) being decimated by a sledgehammer (direct path styling).

Look at the colour of the envelopes...

[https://codepen.io/Steve-Mcl/pen/poojLbw](https://codepen.io/Steve-Mcl/pen/poojLbw)

I can't get the inline style to work.

The sledgehammer (directly addressed `path` css style) is taking precedence over the inline "presentation" styling (read the article above for definition of 'presentation').

I'm far from an expert in CSS matters (more of an experienced dabbler) but shouldn't dashboard theme address the SVG fills by class name and not by element?

Forgive me if I'm wrong Dave (remember, I'm more of a dabbler than expert haha)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [10 October 2019 23:29 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/22 "2019-10-10T23:29:43Z")

</div>

It could if I knew what the class of a randomly applied  
Svg was... Whereas I do know it will have a path. Still not sure why you can't override with a more specific CSS that includes path. Path is an element so should be lower than a class or id so if you declare .ypurclass path {... it should take precedence no ?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 October 2019 13:15 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/23 "2019-10-11T13:15:08Z")

</div>

Hi Bart / Dave.

So, I suspect due to quirks of SVG, the setting of `fill` prevents any other colour being applied.

Through [reading this](https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/) and [messing around](https://codepen.io/Steve-Mcl/pen/poojLbw), the only way I see this working is...

- In dashboard

- We set `fill` on `<use>` or a parent to `fill="currentColor"`  
OR  
add a class to the `<use>` or a parent that has the property `fill="currentColor"`

- Only then we can set inline fill or css fill.

Have a play with this [codepen](https://codepen.io/Steve-Mcl/pen/poojLbw) to understand.

* * *

**Bottom line...**  
I suspect we are going to have to ask Dave really really nicely and convince him of this necessity 😃

some pictures instead of a thousand words...

**fill just can't be overridden dammit...**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4d9a280619b5f51f3271451f016a51ec11113fd3.png)

**oh yes it can woohoo...**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/fb9e0e22828e24e4efb505f9c08b5f975dbbda49.png)

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [11 October 2019 13:35 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/24 "2019-10-11T13:35:33Z")

</div>

> [@BartButenaers](#):
>
> style="fill:#ff1493; !important;"

Not sure if you fixed the issue already in a better way, but if you still want to try the !important directive, there should be no semi-colon between the hex color and the !important. Havn't tried it myself on your particular case, but in my experience it usually works great to override any inherited CSS.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 October 2019 14:54 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/25 "2019-10-11T14:54:41Z")

</div>

@hugobox we wish it were so simple.

This scren shot shows that when CSS for path--\>fill is set NOTHING can override it.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3316a1537d738d74ac2b1416327eb68fe2107d76.png)

Have a play with this [codepen](https://codepen.io/Steve-Mcl/pen/poojLbw) - see if you cant figure out the correct way.

My money is on NOT setting `path>fill` to anything other than `inherit` and setting `<use fill...>` to `currentColor`

You simply cannot set the colour of a path item with the current CSS of dashboard.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 October 2019 18:26 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/26 "2019-10-11T18:26:38Z")

</div>

can you not override the default CSS in the html section of your js file ?

```auto
    function HTML(config) {
        var html = String.raw`
            <style>
                path {...

```

either to "unset" it - or set to inherit.  
(as I said you may need to make that selector more specific so that it picks yours.)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 October 2019 18:29 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/27 "2019-10-11T18:29:38Z")

</div>

Hmmm good point.

Worth a bit play time Bart.

Might we though then cause override for all other UI nodes on the page?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 October 2019 18:32 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/28 "2019-10-11T18:32:51Z")

</div>

well not if you make it more specific that the other one - currently the main one is

```auto
    .nr-dashboard-theme .nr-dashboard-template path {
        fill: @widgetBackgroundColor;
    }

```

so if you had another class in there  
`.nr-dashboard-theme .nr-dashboard-template .bartsSVGstuff path { ... `

though indeed - not sure how many folk would have both - but hey...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 October 2019 06:43 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/29 "2019-10-12T06:43:49Z")

</div>

Morning @Steve-Mcl, @dceejay,  
Sorry for the late reply, but it was a heavy week...  
Thanks for all experiments and tips!! I 'think' I understand it, so will try to do some testing this evening. I have never been digging into css, but the articles mentioned above where very helpful.  
Will get back here as soon as possible!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 October 2019 10:19 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/30 "2019-10-12T10:19:23Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1b818f4cd04c06a03adfc8633b5b8398f2d6749b.gif)

What i did

- added class `ui-svg` to the parent `div` of the `svg`
- added a local `<style>` element to override some style settings...

```css
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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 October 2019 10:28 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/31 "2019-10-12T10:28:20Z")

</div>

--nr-dashboard-widgetColor is correct.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 October 2019 10:45 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/32 "2019-10-12T10:45:10Z")

</div>

> [@Steve-Mcl](#):
>
> are you happy with using dashboard css color setting as the fall back

You ask whether I am happy that you solved it (together with Dave)? Of course! We will add to the readme something about, so people know what to do when strange colors appear...  
And when I see the solution, it might be that I wouldn't had found it myself tonight 🤣 It is (font)awesome guys... Really appreciate this!!!!!!!  
P.s. could you put this solution on Github please. Then I start from that version for the jschannel stuff tonight.

[Previous page](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521.md?page=1)