Glyph CSS Styling Limitations

[MichaelEllis]

Glyph CSS styling does not seem to work.

In particular:

1. -fx-text-fill: red; // works
2. -fx-stroke:blue; // is ignored
3. -fx-font-size: 48; // corrupts icon

SSCCE

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import org.controlsfx.glyphfont.FontAwesome;
import org.controlsfx.glyphfont.Glyph;

public class GlyphCSSTest extends Application {

    @Override
    public void start(Stage primaryStage) {

        Glyph glyph1 = new Glyph("FontAwesome", FontAwesome.Glyph.BEER);
        glyph1.setFontSize(48); // programatically set font size works
        glyph1.setColor(Color.RED); // programatically set color works

        Glyph glyph2 = new Glyph("FontAwesome", FontAwesome.Glyph.BEER);
        glyph2.setStyle("-fx-text-fill: red; -fx-background-color: green;"); // Works as expected

        Glyph glyph3 = new Glyph("FontAwesome", FontAwesome.Glyph.BEER);
        glyph3.setStyle("-fx-text-fill: red; -fx-stroke:blue;"); // -fx-stroke ignored

        Glyph glyph4 = new Glyph("FontAwesome", FontAwesome.Glyph.BEER);
        glyph4.setStyle("-fx-text-fill: red; -fx-font-size: 48;"); // -fx-font-size: 48 corrupts icon

        HBox root = new HBox();
        root.setSpacing(10);
        root.getChildren().addAll(glyph1, glyph2, glyph3, glyph4);

        primaryStage.setTitle("Glyph CSS Test");
        primaryStage.setScene(new Scene(root, 160, 70));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

[Liso-cz]

I've struggled with similar issue. I wanted button without any text, but with fontawesome icon. I couldn't figure out any other solution, then binding font size and color to button so that I can set those properties in CSS. What's more, it fixed issue when button doesnt properly resize when icon size is set directly to .glyph-font class in CSS.

Creation:

Button exButton = new Button();
exButton.getStyleClass().addAll("inverted-color-button");

final Glyph icon = new Glyph("FontAwesome", FontAwesome.Glyph.COG);
exButton.fontProperty().addListener((observable, oldValue, newValue) -> {
    icon.size(newValue.getSize());
});
exButton.textFillProperty().addListener((observable, oldValue, newValue) -> {
    icon.color((Color) newValue);
});
exButton.setGraphic(icon);

CSS usage:

.inverted-color-button.button {
    -fx-background-color: #333; 
    -fx-text-fill: white; /* <----- sets also color of the glyph icon  */

    -fx-font-size: 48px; /* <----- sets also size of the glyph icon  */
    -fx-padding: 2 2 2 2;
}
.inverted-color-button.button:hover {
    -fx-background-color: white;
    -fx-text-fill: #333; /* <----- sets also color of the glyph icon  */
}

Hope it helps a bit.