带图像的按钮样式

Question

我想知道如何实现以下按钮样式，其中文本位于JavaFx中的图像下方？

我尝试了很多，但都徒劳无功。任何帮助，将不胜感激。

Answer 1

的关键是contentDisplay属性，将其设置为 “TOP”。

随着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> 

或CSS：

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

检查CSS参考here。

Answer 2

你可以简单地实现，只是做

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

而凉爽的图标，看看http://fxexperience.com/controlsfx/features/它包括从ICONE和FontAwesomeIcoMoon