如何以及在何处为 Fontawesomefx 图标设置 css 样式以进行鼠标悬停答案

【问题标题】：how and where to set css styles for Fontawosomefx icons for mouse hover如何以及在何处为 Fontawesomefx 图标设置 css 样式以进行鼠标悬停
【发布时间】：2018-07-20 10:03:37
【问题描述】：

有人可以告诉如何为顶部带有 fontawsome 图标的按钮设置 CSS 以在鼠标悬停在 javafx（使用 fxml）时更改图标填充颜色吗？？

tried this css file and attaching to the button ..but no luck..

.icons:hover {
    -fx-fill: white;
    -icons-color: black;
}

从 fxml 中添加这样的图标

 <JFXButton fx:id="viewStaffButton" alignment="CENTER" buttonType="RAISED" graphicTextGap="10.0" onMouseClicked="#onVIewStaffClicked" prefHeight="45.0" prefWidth="179.0" ripplerFill="WHITE" style="-fx-border-color: blue; -fx-border-color: white;" text="View Staff" textFill="WHITE">
                                    <VBox.margin>
                                        <Insets bottom="50.0" />
                                    </VBox.margin>
                                    <graphic>
                                        <FontAwesomeIconView fill="WHITE" glyphName="USERS" size="20" />
                                    </graphic>
                                    <cursor>
                                        <Cursor fx:constant="HAND" />
                                    </cursor>
                                </JFXButton>

【问题讨论】：

我在类中找不到任何-icons-color 属性，并且-fx-fill 在您的css 中缺少l。
@fabian 抱歉 .. 记错了.. 但仍然无法正常工作.. 我的 css 标签是否正确？？
以前从未使用过 FontAwesomeFX，您能否发布创建和显示图标所需的最少代码量？至少，使用的类的限定名称是什么？
@Slaw 我用我使用图标的代码的 sn-p 更新了问题

标签： java javafx font-awesome fxml

【解决方案1】：

这些图标的 CSS 类是 glyph-icon。

尝试在 css 中将 .icons:hover { ... } 替换为 .glyph-icon:hover { ... }。

此外，您还需要在 CSS 的上方某处声明 -icons-color，例如 root

.root{
    -icons-color: red;
}

以后再用。

【讨论】：