使用Font Awesome 5 SVG作为JavaFX按钮形状

我目前正在开发未修饰的JavaFX应用程序，尝试添加关闭、最大化和最小化按钮，并将它们的形状设置为字体

但有些SVG似乎没有正确显示，例如apears只是一个块。（见图）

按钮的FXML

<Button fx:id="min" mnemonicParsing="false">
 <HBox.margin>
  <Insets right="2.5" />
 </HBox.margin>
</Button>
<Button fx:id="max" mnemonicParsing="false">
 <HBox.margin>
  <Insets left="2.5" right="2.5" />
 </HBox.margin></Button>
<Button fx:id="exit" mnemonicParsing="false">
 <HBox.margin>
  <Insets left="2.5" />
 </HBox.margin>
</Button>

---

默认情况下，将缩放形状以适合其应用到的

区域的区域。这种缩放会使最小化按钮的形状看起来几乎是二次的。使用未缩放的形状也不是一个选项，因为形状太大了

使用
-fx背景插图
创建正确的比率。此外，我建议将
区域
作为图形放置在
按钮
内，并将形状应用于此节点。这允许您为按钮添加背景或增加点击框：



#工具栏.按钮{
-尺寸：20px；
-fx填充：2px；
-fx背景色：空；
-fx最小宽度：-尺寸；
-fx最小高度：-尺寸；
-fx pref宽度：-大小；
-外汇优先高度：-大小；
}
#工具栏。按钮。形状{
-fx背景色：#ecf0f1；
}
#工具栏。按钮：按下。形状{
/*按下按钮的背景不同*/
-背景色：浅绿色；
}
#出口，形状{
-外汇形状："3.12.3.3.12.12-3.12-3.12-3.12-3.12-3.12-3.12-3.12-3.12-3.12-3.3.12.12.12.12.12.12.12.12.12.12.12.3.12-3.12-3.12-3.12-3.12-3.3.12-3.12-3.12-3.12-3.12-3.12.8 8 8 8 8 8 8 8 8 8 8 8 8.8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8.19.19 19 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 A.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z”；
}
#最大形状{
-外汇形状：“M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6 V192H416V234Z”；
}
#最小形状{
-fx背景插图：6px 0 6px 0；/*使用适当的形状区域*/
-fx形状：“M480 480H32c-17.7 0-32-14.3-32-32s14.3-32-32h448c17.7 0 32 14.3 32 S-14.3 32-32 32z”；
}
默认情况下，形状会根据其应用的
区域的面积进行缩放。这种缩放会使最小化按钮的形状看起来几乎是二次的。使用未缩放形状也不是一个选项，因为形状太大了

使用
-fx background insets
创建正确的比率。此外，我建议在
按钮中放置一个
区域
，作为图形并将形状应用于此节点。这允许您向按钮添加背景或增加点击框：



#工具栏.按钮{
-尺寸：20px；
-fx填充：2px；
-fx背景色：空；
-fx最小宽度：-尺寸；
-fx最小高度：-尺寸；
-fx pref宽度：-大小；
-外汇优先高度：-大小；
}
#工具栏。按钮。形状{
-fx背景色：#ecf0f1；
}
#工具栏。按钮：按下。形状{
/*按下按钮的背景不同*/
-背景色：浅绿色；
}
#出口，形状{
-外汇形状：“3.12.3.3.12.12-3.12-3.12-3.12-3.12-3.12-3.12-3.12-3.12-3.12-3.3.12.12.12.12.12.12.12.12.12.12.12.3.12-3.12-3.12-3.12-3.12-3.3.12-3.12-3.12-3.12-3.12-3.12.8 8 8 8 8 8 8 8 8 8 8 8 8.8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8.19.19 19 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 A.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z”；
}
#最大形状{
-外汇形状：“M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6 V192H416V234Z”；
}
#最小形状{
-fx背景插图：6px 0 6px 0；/*使用适当的形状区域*/
-fx形状：“M480 480H32c-17.7 0-32-14.3-32-32s14.3-32-32h448c17.7 0 32 14.3 32 S-14.3 32-32 32z”；
}

#toolbar .button {
    -fx-background-color: #ecf0f1;

    -size: 16px;

    -fx-min-width: -size;
    -fx-min-height: -size;
    -fx-pref-width: -size;
    -fx-pref-height: -size;
}

#exit {
    -fx-shape: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z";
}

#max {
    -fx-shape: "M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z";
}

#min {
    -fx-shape: "M480 480H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h448c17.7 0 32 14.3 32 32s-14.3 32-32 32z";
}