带图像的按钮样式答案

【问题标题】：Button style with image带图像的按钮样式
【发布时间】：2013-12-18 00:51:29
【问题描述】：

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

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

【问题讨论】：

【解决方案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。

【讨论】：

【解决方案2】：

您只需这样做就可以实现这一目标

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

对于很酷的图标，看看http://fxexperience.com/controlsfx/features/ 它包括来自FontAwesome 和IcoMoon 的图标

【讨论】：

对不起，我不小心投了反对票……我发现取消反对票的唯一方法是让您先编辑您的帖子（只需添加一个点）。 meta.stackexchange.com/questions/139949/unable-to-undo-downvote