Button style with image

Question

I was wondering How one can achieve following button style where text resides underneath of image in JavaFx?

I tried a lot but all in vain. Any help would be appreciated.

Answer 1

The key is the contentDisplay property, set it to "TOP".

With fxml:

<Button contentDisplay="TOP" layoutX="101.0" layoutY="51.0" mnemonicParsing="false" text="Button">
  <graphic>
    <ImageView mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
      <image>
        <Image url="@image.png" preserveRatio="false" smooth="false" />
      </image>
    </ImageView>
  </graphic>
</Button>

Or CSS:

.your-selector {
    -fx-content-display: top;
}

Check the CSS reference here.

Answer 2

You can simply achieve that just by doing

    Button b = new Button("text", graphics);
    b.setContentDisplay(ContentDisplay.TOP);

And for cool icons, take a look at http://fxexperience.com/controlsfx/features/ it include icone from FontAwesome and IcoMoon