Bug? FontAwsome (and maybe MaterialIcons) don't like CSS?

[Cableguy]

I've been trying for the past 2 hours to get a simple FontAwsome icon to show through a button that has a CSS styling (from file) applied to it, but no go! It always shows the "unknown" square symbol!
If I add the Styling using the designer CSS property, or if I add it in code using node.style it works as it should, but If I use an external css file, it does not work! The Symbols don't show.

[EDIT] As I always do, despite reporting a possible BUG, I continue investigating...
So my new findings are: The added CSS, either by node.style, designer css or external file, MUST NOT contain text related styling of any sort.
Plus, the Font Awsome must be set in code for the pseudo classes, like Hover, etc, to work properly.
Also very important is the ORDER of styling...
I need @Erel to confirm this line of thought...
All nodes come with a default style. When we set additional CSS, in either 3 ways possible, it does just that... it adds to the existing Style, and is applied as if the style lines were appended to each pseudo-class.(?)
Then and only then, the designer properties are applied...
Is this the correct timeline of how styles are applied?

 

[Erel]

The designer sets the Style property. This property overrides style settings from any external CSS files.

 

[Cableguy]

Then why (oh why) even though setting the font in the designer, if the CSS file has any text related styling, like color, font size, shadows, etc, the fontawsome symbols won't show?

 

[Erel]

Can you upload a small example?

 

[Cableguy]

will cook up one right after lunch...

[EDIT] Here it is

 

[Cableguy]

I uploaded the BUG demo to the previous post, but since it was an EDIT, I'm afraid it will pass by unnoticed...

 

[Erel]

Why are you setting the font family to Arial if you want to use FontAwesome?

You need to explicitly set it to FontAwesome in the CSS style if you want to modify other attributes.

myStyle.Append($" -fx-font-family: "FontAwesome";    -fx-text-fill: linear-gradient(white, #d0d0d0);    -fx-font-size: 12px;"$)

 

[Cableguy]

The designer sets the Style property. This property overrides style settings from any external CSS files.

According to the above statement, it shouldn't matter the font set in the CSS, since it's overridden by the designer.
Also, in the demo, I re-set the font in code to be fontawsome, shouldn't this also override the CSS styling?

 

[Erel]

Both the CSS and the direct properties are handled by the JavaFX framework. Don't make any assumption about the order. Set both of them correctly if you want to use both features.

 

[Cableguy]

Ok, understood!