如何仅通过FXML为JavaFX按钮添加Font Awesome图标

嘿，我正好用FontAwesomeFX 8.9做过类似的需求，纯FXML就能搞定，还能让CSS灵活样式化，这就给你一步步讲清楚：

1. 直接在FXML里把图标绑定到Button #

FontAwesomeFX的FontAwesomeIcon可以直接作为Button的graphic属性值，完全不需要写Java代码。只需要把图标标签嵌套在Button的<graphic>标签里就行：

<!-- 带文字和图标的按钮 -->
<Button text="确认操作" styleClass="action-button">
    <graphic>
        <!-- glyphName填你需要的图标名称，比如CHECK、STAR、TRASH等 -->
        <FontAwesomeIcon glyphName="CHECK" size="18" />
    </graphic>
</Button>

<!-- 纯图标按钮（把text留空即可） -->
<Button styleClass="icon-only-button">
    <graphic>
        <FontAwesomeIcon glyphName="HOME" size="22" />
    </graphic>
</Button>

这里的size是初始大小，后面完全可以用CSS覆盖，不用纠结初始值。

2. 用CSS样式化图标（包括状态变化） #

FontAwesomeIcon节点自带样式类font-awesome-icon，你可以直接用这个选择器定位所有图标，也可以给图标加自定义样式类来精准控制：

第一步：给图标加自定义样式类（可选但推荐） #

给特定图标加专属样式类，方便后续CSS精准定位：

<Button text="收藏">
    <graphic>
        <FontAwesomeIcon glyphName="STAR" styleClass="favorite-icon" />
    </graphic>
</Button>

第二步：写CSS样式 #

因为FontAwesomeFX的图标是基于字体实现的，所以用-fx-fill控制颜色，-fx-font-size控制大小，和普通文本的样式逻辑一致：

/* 全局设置所有FontAwesome图标的默认样式 */
.font-awesome-icon {
    -fx-fill: #666666; /* 默认灰色 */
    -fx-font-size: 16px;
    -fx-translate-y: 1px; /* 微调垂直位置，让图标和按钮文字对齐更美观 */
}

/* 自定义样式类的图标，优先级更高 */
.favorite-icon {
    -fx-fill: #ffc107; /* 黄色星星 */
    -fx-font-size: 18px;
}

/* 按钮hover时，改变图标颜色 */
.button:hover .favorite-icon {
    -fx-fill: #ff9800; /* 深黄色 */
}

/* 纯图标按钮的样式，隐藏文字（如果不小心留了text的话） */
.icon-only-button .text {
    -fx-opacity: 0;
}

/* 给按钮本身加样式，让整体更协调 */
.action-button {
    -fx-padding: 8 16;
    -fx-background-color: #2196f3;
    -fx-text-fill: white;
}

.action-button:hover .font-awesome-icon {
    -fx-fill: #ffffff; /* hover时图标变白，和文字统一 */
}

这样设置后，不管是图标颜色、大小，还是按钮不同状态下的图标变化，都能通过CSS轻松控制。

内容的提问来源于stack exchange，提问作者Krzysztof Skolimowski