# 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:** 20\
**Page:** 1

<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:** [9 October 2019 21:43 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/1 "2019-10-09T21:43:09Z")

</div>

Hi folks,

This question is related to our new [node-red-contrib-ui-svg node](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-first-beta/16210). We got some good news from Joseph Liard that has released a new version of DrawSvg, which now supports FontAwesome icons (which he has especially added for our node). 🍾

But I cannot get the colors of the FontAwesome icon correct in the Node-RED dashboard.  
This is what happens:

1. I add a FontAwesome icon in DrawSvg:

2. I change the default color via DrawSvg to some ugly pink color:

3. I save the drawing, and we receive following SVG string in our node:

4. But when I Deploy those changes, the Node-RED will show a blue icon (instead of pink):

5. When I inspect the 'Styles' of the icon in Chrome developer tools, I see pink as color:

I have no clue anymore how to get the color correct. Is that blue color perhaps inherited somehow from the dashboard css?

Thanks !!  
Bart

---

<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:** [9 October 2019 23:22 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/2 "2019-10-09T23:22:39Z")

</div>

Yes it probably is. On the site page you can turn off theme in template which should then allow it..

---

<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:** [10 October 2019 05:06 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/3 "2019-10-10T05:06:25Z")

</div>

> [@dceejay](#):
>
> On the site page you can turn off theme in template which should then allow it..

Morning @dceejay,  
Do you mean that I can somehow say in the html code (which I generate in my UI node for the dashboard): this DIV element and all its children (SVG element ...) should not inherit any CSS from the dashboard?

---

<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:** [10 October 2019 19:47 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/4 "2019-10-10T19:47:50Z")

</div>

Did you try the "!important" directive? Like: style="fill:deeppink !important;", normally it should prevent the inheritance problem you're having.

---

<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:** [10 October 2019 20:55 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/5 "2019-10-10T20:55:38Z")

</div>

Hey @hugobox,

Thanks !! I have been reading some articles this evening, and then it became clear that I cannot stop inheritance of styles. And yes the _ **"!important"** _ directive popped up in some of these articles, but they claim you should only use it as a last resort. For example:

> In most cases, using an !important flag is like cracking a nut with a sledgehammer. The !important flag it is a bad practice because it makes things unnecessarily difficult to override in the future, and should only be reserved as a last resort.

- But could at least test whether it solved my problem. So I added the "!important" directive (to the generated SVG), but the damn icon still stays blue 🥴
- Have pasted the (generated) SVG code in a jsfiddle and then it nicely gets a pink color. So it only gets the wrong color inside the dashboard.

> [@dceejay](#):
>
> On the site page you can turn off theme in template which should then allow it

Hey @dceejay,  
Do you mean in a dashboard template node? Could you please explain a bit in detail what you mean? Thanks!

---

<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 21:05 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/6 "2019-10-10T21:05:08Z")

</div>

sorry - been busy .... 🍻🙂  
I meant this option

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d85e2711519416539c773d7752c4b88bc206ea40.jpeg)  
Not the 100% answer - but a good test.  
likewise you should be able to see the precedence of css in the browser debug console styles... you either could use !important... (last resort 🙂 - or make your css more targeted than the one that turns it blue... so maybe by having your own div class or something to add more specificity to it.

---

<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:** [10 October 2019 21:07 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/7 "2019-10-10T21:07:18Z")

</div>

> [@dceejay](#):
>
> sorry - been busy .... 🍻 🙂

The 🍻 🙂 is **"far"** more important then my question. Hope you have enjoyed it!!

---

<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 21:19 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/8 "2019-10-10T21:19:40Z")

</div>

oh yes - Cheers 🍻

---

<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:** [10 October 2019 21:38 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/9 "2019-10-10T21:38:53Z")

</div>

**Cheers Dave!!!**  
**Don't read this feedback today** 🤣

Bit more detail. Now at least I know already where the color is coming from...

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

1. DrawSvg generates an SVG "symbol" for each FontAwesome icon. Such a symbol has an SVG path which contains the contour of the icon.

2. Then DrawSvg will re-"use" that symbol at every location where I put it. And there it also gets my custom **pink color** (`style="fill:#ff1493; !important;"`).

3. The path in the symbol has no explicit color, but it seems to get his blue color from the dashboard:

4. And that is the cause: because when I deselect the checkbox, then the icon gets the pink color in the dashboard...

So I need to get rid of those dashboard styles.  
But as you can see, the **"!important"** directive doesn't help ...

---

<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 21:48 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/10 "2019-10-10T21:48:23Z")

</div>

It's the `path` part in that style Bart.  
If you put a `<style>` tag in a head template or a regular ui\_template, it can possibly be overridden.

```auto
<style>
path {
  fill: pink;
}
</style>

```

But the question is what/ why is `path` being set? Part of dashboard theme for colouring SVG paths?

---

<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 21:50 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/11 "2019-10-10T21:50:14Z")

</div>

Yes - so when using svg icons (in all the other widgets) they match the theme...

---

<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 21:52 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/12 "2019-10-10T21:52:13Z")

</div>

Also, I'm not certain if this isn't a quirk of `<use>`. I.e. correct me if I'm wrong but shouldn't inline style take precedence over a class? But as the style is set in the `use` and not the def\>path, it's not working as expected?

---

<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 21:55 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/13 "2019-10-10T21:55:37Z")

</div>

maybe - indeed I thought inline did take precedence. - but as i said you could define a style for path that is more specific than just .nr-dashboard-theme .nr-dashboard-template (or just use !important 🙂

---

<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:** [10 October 2019 22:07 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/14 "2019-10-10T22:07:45Z")

</div>

> [@Steve-Mcl](#):
>
> Also, I'm not certain if this isn't a quirk of `<use>`

Welcome @Steve-Mcl,

There is another thing that I don't understand:

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

1. DrawSvg generates an SVG symbol for each icon. As explained above that contains an SVG path that gets its blue fill color from the dashboard.

2. Everywhere I "use" that symbol, the browser will create a shadow dom with a copy from the original path.

3. But that cloned path (in the shadow dom) has fill color pink as, so here no dashboard colors.

I have the impression that the browser creates the shadow doms (with the original colors), and afterwards applies the dashboard color to the original symbol path (which is in the same DOM as the dashboard elements). But I would have expected that that cloned path would have drawn, but that is not the case because then it should have been rendered pink in the dashboard ...

> [@dceejay](#):
>
> just use !important 🙂

@dceejay Have tried that (see above post), but it didn't help. Or should I add it somewhere else?? Or somebody has put a very strong ingredient in your beers 🤣

---

<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 22:09 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/15 "2019-10-10T22:09:27Z")

</div>

Isn't the problem that the dashboard theme directly addresses `path` (instead of applying classes to the elements it wants to style?).

Sorry for my lack of CSS knowledge

---

<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 22:13 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/16 "2019-10-10T22:13:48Z")

</div>

Bart...

> **[5 Gotchas You're Gonna Face Getting Inline SVG Into Production | CSS-Tricks](https://css-tricks.com/gotchas-on-getting-svg-into-production/)**
>
> The following is a guest post by Rob Levin. Rob is a Senior UI/UX Developer at Mavenlink, and coauthor of the Unicorn UI CSS Button Library. Their 2.0 release

Look at the bit about ...

> Fortunately, there's a trick we can use to at least get one unique color per instance. If we go in to the SVG definition itself, we can apply `fill=“currentColor”` to a shape or path of our choosing. What does that do? Well, the long supported CSS value `currentColor` , specifies that color will be inherited. This means that we can define a font color higher up in the tree (for example on the cloned instances themselves), and the fill for that path or shape will inherit the color

Might be relevant?

I haven't processed it in my head or gave it a try.

Could you play in the DOM/devtools, give it a try?

---

<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 22:14 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/17 "2019-10-10T22:14:50Z")

</div>

well that is the element IT wants to style - so again I'm not sure why you can't override it locally.

@BartButenaers - sorry I thought the pink icon WAS you adding !important and it working - as the dashboard colour was blue.

---

<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:** [10 October 2019 22:23 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/18 "2019-10-10T22:23:38Z")

</div>

> [@Steve-Mcl](#):
>
> fill=“currentColor”

@Steve-Mcl:

Have added it to the "symbol" element (since the "use" element contains the pink color):

```auto
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0" y="0" viewBox="0 0 900 710" width="100%" height="100%">
       <rect id="svgEditorBackground" x="0" y="0" width="900" height="710" style="fill: none; stroke: none;"/>
       <defs id="svgEditorDefs">
           <symbol xmlns="http://www.w3.org/2000/svg" id="f03d" preserveAspectRatio="xMidYMid meet" viewBox="0 0 576 512">
               <path d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"/>
            </symbol>
           <polygon id="svgEditorIconDefs" style="fill:currentColor;"/>
        </defs>
  <image width="889" height="704" id="background" xlink:href="https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg"/>
<use xlink:href="#f03d" x="135.9755859375001" y="33.62033462524364" width="65.41089965398012" height="58.143021914649" id="e1_icon" style="fill=“deeppink”; !important;"/>
</svg>

```

But doesn't help 🥴  
I'm off to bed. Though day tomorrow at work. Thanks guys!

---

<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 22:30 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/19 "2019-10-10T22:30:06Z")

</div>

Hi Bart, been quickly reading through this.

The answer is definitely in here & it's definitely related to `use` and `shadow host`...

> **[Styling SVG Content with CSS | Codrops](https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/)**
>
> An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings.

But alas, bed time here too.

---

<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 22:47 UTC](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/20 "2019-10-10T22:47:33Z")

</div>

Interesting read that. Every day is a school day.

So regarding my earlier statement about inline style taking precedence, not entirely correct.

It's a long read so I'll cut to the chase, we may have to use one of the techniques discussed, we may have to ask Joseph to do something to the `defs`

When one of us get Infront of a PC, we should try...

```auto
<svg style="display: none;">
	<symbol id="codrops" viewBox="0 0 23 30">
		<path class="back" d="..."/>
		<path class="front" fill="currentColor" d="..."/>
	</symbol>
</svg>

```

Note the `currentColor` part in the def\>path?

Now `use` element should permit the fill colour by inline style.

Bfn.

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