JavaFX FontAwesomeIcon in TabPane stylen

[lam_tr]

Hallo zusammen,

ich habe ein Problem, dass ich den Icon im selektierten Tab nicht mit der gewünschten Farbe anzeigen kann. Die Icons, die im hinteren Tabs sind werden weiß gesetzt und der Icon im focus mit dem selektierten Tab soll #0866C6 (blau) sein. Das untere Bild stellt mein Problem dar.

.glyph-icon{
    -fx-fill: white;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #0866C6;
}

// Option 1
.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .graphic > .glyph-icon {
    -fx-fill: #0866C6;
}
// Option 2
.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .glyph-icon {
    -fx-fill: #0866C6;
}

Hat da jemand eine Idee für mich?

Grüße
lam

 

[dzim]

Sorry, etwas spät, aber ich hatte noch keine Zeit, es vorher zu überprüfen.
Ich hatte auch mal das Problem und die Lösung ist, dass du nicht .glyph-icon stylen musst, sondern den konkreten View. Ich verwende meist MaterialDesignIcon, daher:

.root {
    /*
     * all my custom colors and so on are defined in the .root style-class
     */
    -new-header-bar-links: #49bbd5;
}

/*
 * Example: If there's a Hyperlink Node with a MaterialDesignIconView
 * somewhere on and within its graphic node graph, apply this style.
 * Also note: you can set the glyph name and size and so on here.
 * And more: use psuedo style-classes (.hyperlink:focused) if necessary.
 */
.hyperlink MaterialDesignIconView {
    -fx-fill: -new-header-bar-links;
    -glyph-size: 12px;
    -glyph-name: OPEN_IN_NEW;
}
.hyperlink:focused MaterialDesignIconView {
    -fx-fill: derive(-new-header-bar-links, 17%);
}