Since it is not possible to select an icon with css from a font (ex. css content property), we converted our iconic font to "-fx-shape".
The issue is that "-snap-to-pixel" css property does not appear to be supported in this mode and our icons are blurred.
Screenshot on my computer : http://postimg.org/image/5gd19iycx/
============================================================
BugFxShape.java
------------------------------------------------------------------------------------------------------------------------
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Region;
import javafx.stage.Stage;
public class BugFxShape extends Application {
public static void main(final String[] args) {
launch(args);
}
@Override
public void start(final Stage stage) {
stage.setTitle("BugFxShape");
BorderPane pane = new BorderPane();
pane.getStylesheets().add("BugFxShape.css");
Scene scene = new Scene(pane, 300, 300);
Region r = new Region();
r.getStyleClass().add("svg");
r.getStyleClass().add("svg-fa");
r.getStyleClass().add("svg-fa-trash");
pane.setCenter(r);
stage.setScene(scene);
stage.show();
}
}
============================================================
BugFxShape.css
------------------------------------------------------------------------------------------------------------------------
.svg {
-fx-background-color: black;
}
.svg-fa {
-fx-snap-to-pixel: true;
-fx-pref-width: 30;
-fx-pref-height: 30;
}
/* trash - f1f8 */
.svg-fa-trash{
-fx-shape: "M512 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM768 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1024 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704 q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM480 1152h448l-48 117q-7 9 -17 11h-317q-10 -2 -17 -11zM1408 1120v-64q0 -14 -9 -23t-23 -9h-96v-948q0 -83 -47 -143.5t-113 -60.5h-832q-66 0 -113 58.5t-47 141.5v952h-96q-14 0 -23 9t-9 23v64q0 14 9 23t23 9h309l70 167 q15 37 54 63t79 26h320q40 0 79 -26t54 -63l70 -167h309q14 0 23 -9t9 -23zM0 -256 L1408 1536";
-fx-scale-x: 0.786;
-fx-scale-y: -1;
}
The issue is that "-snap-to-pixel" css property does not appear to be supported in this mode and our icons are blurred.
Screenshot on my computer : http://postimg.org/image/5gd19iycx/
============================================================
BugFxShape.java
------------------------------------------------------------------------------------------------------------------------
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Region;
import javafx.stage.Stage;
public class BugFxShape extends Application {
public static void main(final String[] args) {
launch(args);
}
@Override
public void start(final Stage stage) {
stage.setTitle("BugFxShape");
BorderPane pane = new BorderPane();
pane.getStylesheets().add("BugFxShape.css");
Scene scene = new Scene(pane, 300, 300);
Region r = new Region();
r.getStyleClass().add("svg");
r.getStyleClass().add("svg-fa");
r.getStyleClass().add("svg-fa-trash");
pane.setCenter(r);
stage.setScene(scene);
stage.show();
}
}
============================================================
BugFxShape.css
------------------------------------------------------------------------------------------------------------------------
.svg {
-fx-background-color: black;
}
.svg-fa {
-fx-snap-to-pixel: true;
-fx-pref-width: 30;
-fx-pref-height: 30;
}
/* trash - f1f8 */
.svg-fa-trash{
-fx-shape: "M512 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM768 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1024 160v704q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-704 q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM480 1152h448l-48 117q-7 9 -17 11h-317q-10 -2 -17 -11zM1408 1120v-64q0 -14 -9 -23t-23 -9h-96v-948q0 -83 -47 -143.5t-113 -60.5h-832q-66 0 -113 58.5t-47 141.5v952h-96q-14 0 -23 9t-9 23v64q0 14 9 23t23 9h309l70 167 q15 37 54 63t79 26h320q40 0 79 -26t54 -63l70 -167h309q14 0 23 -9t9 -23zM0 -256 L1408 1536";
-fx-scale-x: 0.786;
-fx-scale-y: -1;
}