3

我试图图标化 JavaFX 菜单项标签。我为菜单项标签和加速器标签复制了图标。这是说明我的问题的图像。

在此处输入图像描述

这是Javafx css代码：

.menu-item > .label {

}

#miRestore .label{
    -fx-graphic: url("/img/Upload_16x16.png");
}
#miBackup .label {
    -fx-graphic: url("/img/Flash%20Disk_16x16.png");
}
#miClose .label {
    -fx-graphic: url("/img/Delete_16x16.png");
}

#miSettings .label {
    -fx-graphic: url("/img/Settings_16x16.png");
}

#miRegistre . label{
    -fx-graphic: url("/img/Help_16x16.png");
}
4

1 回答 1

6

我找到了一个可靠的解决方案：在 Scene Builder / FXML（无论你喜欢什么）中，将一个样式类（不是 id）附加到你想要一个图标的每个菜单项。现在向菜单栏添加一个样式表，在其中为每个带有图标的项目添加以下 CSS：

.yourClassName > .label{
    -fx-graphic: url("yourImageUrl");
}

在 CSS 文件的末尾，添加以下内容以删除所有第二张图片：

.context-menu .accelerator-text{
    -fx-graphic: none;
}

这样做是将每个 -accelerator-text 的 -fx-graphic 设置为“无”。所以它基本上再次删除了图像。

现在您的菜单项文本前面将只有图标，而不是加速器文本。为了给你一个具体的想法，我为你做了一个小例子： 样本

这是以下 CSS 样式表添加到我的菜单栏以及相应的 CSS 样式类添加到我的菜单项的结果：

.newIcon > .label{
    -fx-graphic: url("px16/file.png");
}
.openIcon > .label{
    -fx-graphic: url("px16/folderEmpty.png");
}
.closeIcon > .label{
    -fx-graphic: url("px16/minus.png");
}
.saveIcon > .label{
    -fx-graphic: url("px16/save.png");
}
.saveAsIcon > .label{
    -fx-graphic: url("px16/folder.png");
}
.quitIcon > .label{
    -fx-graphic: url("px16/error.png");
}
.context-menu .accelerator-text{
    -fx-graphic: none;
}

这是我在 StackOverflow 上的第一个答案，我希望这对某人有所帮助。

于 2017-04-26T21:38:31.017 回答