How do you position an icon within a button in CSS

[joshpetit]

Hey! Thanks a lot for this amazing library, it really enhances my applications by a lot.

I was wondering about setting the alignment of the icon within buttons. I am trying to have the button Icon remain on the left of the button instead of the left of the text. At the moment the icon is right to the left of the text (although there is a bit of spacing).

I've tried adding this css property to both buttons and the icon class:

-fx-content-display: LEFT

But it doesn't seem to change anything. Looking at the docs on the site there doesn't seem to be any use cases for icon alignment. I'm willing to do it if there is a way in code to do it, but I'd preferably like to do it in CSS if possible.

Help would be really appreciated! Thanks.

[aalmiray]

@joshpetit as far as I understand, the standard JavaFX CSS settings should work with your use case. Ikonli's FontIcon is just like any other regular Node that you can add to a JavaFX container such as a Button.

If the icon is added as the graphic part of the button then every other setting that governs how the graphic is displayed/arranged should apply to the icon as well.

[joshpetit]

Thanks for the quick response. Here's part of the code I have, maybe I'm not setting something correctly? I just realized that -fx-content-display doesn't modify the alignment of the icon haha, my fault.

    JFXButton load = new JFXButton("Load Game");
    load.getStyleClass().addAll("special", "primary", "load_library");
    load.setGraphic(new FontIcon());
    vbox.getChildren().addAll(title, load, settings, exitGame);

.splashscreen JFXButton {
  -fx-max-width: 100;
  -fx-content-display: LEFT; /* I just realized that this sets where the icon is in relation to the button, not the alignment */
  -fx-max-height: 125;
  -fx-pref-height: 100;
  -fx-font-size: 1.2em;
  -fx-font-family: "DejaVu Sans Light";

  -fx-alignment: BASELINE-LEFT; /* This moves the text and button left */

  -fx-graphic-text-gap: 5; /* This graphic setting works */
}

.ikonli-font-icon {
  -fx-text-alignment: LEFT;
  -fx-alignment: BASELINE-LEFT; /* This has no affect on the icon (I'd expect that) */
}

My goal is to try and have the buttons aligned in the same position within the button. A certain amount of pixels from the left edge specifically.

Am I going about this the right way?

[aalmiray]

For regular JavaFX CSS please refer to https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#buttonbase