java - 包含来自 FXML 的 FontAwesomeFX 图标和字形

Question

---

1. 1 区(伟大的FontAwesomeFX)

---

• 提及 JFXBadge 来自 JFoenix图书馆，我找到了从 github 下载他们的演示的代码.

回到 FontAwesomeFX 8.5.0 的旧时代<我可以在应用程序图标中使用:

<?import de.jensd.fx.fontawesome.Icon?>
<?import com.jfoenix.controls.JFXBadge?>

<HBox spacing="20" style="-fx-padding: 0 0 0 50;">
                <children>
 <JFXBadge fx:id="badge1" styleClass="icons-badge" text="1">
     <Icon awesomeIcon="STAR" size="2em" style=";" styleClass="icon" />
  </JFXBadge>               
     </children>
</HBox>

---

旧的解决方案:

您需要的行是:

<Icon awesomeIcon="STAR" size="2em" style=";" styleClass="icon" />

---

现在经过几次更新后，我添加了 newest jar (8.9) 但我不知道该怎么做？

在纯 java 代码中，您可以使用来自 FontAwesomeFX - only rectangles displayed 的答案来完成它

---

最后:

我怎样才能像上面那样将 FontAwesomeFX 中的图标包含到 .fxml 中，这样我就可以通过 SceneBuilder 实时检查它们，而我不必做编译运行舞蹈。

包括 ControlsFX 在内的答案也将被接受 :)，我需要以一种或另一种方式包含图标。

---

8.0.10 版本的图标:

8.9.0 版本的图标(一切都不一样):

---

1. 2 区(伟大的 ControlsFX )

---

A discussion从 BitBucket 获取下面的代码。

现在是 6:45 am 我正在尝试使用 ControlsFX 8.40 但没有任何效果......:( omgggggggg :

<?import org.controlsfx.glyphfont.*?>
//...
<Label>
    <graphic>
        <Glyph fontFamily="FontAwesome" icon="PLUS" />
    </graphic>
</Label>
//...

我从上面的代码中得到一个矩形......

Answer 1

在有人回答问题之前，我将添加此答案。

---

我想创建以下内容，这是一个 JFXBadge:

我使用的旧代码(使用 FontAwesomeFX 8.0.10):

FXML部分:

<?import de.jensd.fx.fontawesome.Icon?>
<?import com.jfoenix.controls.JFXBadge?>

//..
<HBox spacing="20" style="-fx-padding: 0 0 0 50;">
                <children>
 <JFXBadge fx:id="badge1" styleClass="icons-badge" text="1">
     <Icon awesomeIcon="STAR" size="2em" style=";" styleClass="icon" />
  </JFXBadge>               
     </children>
</HBox>
//..

文本的

CSS 部分(Top-RIGHT)和实际的 ICON:

.icon{
    -fx-text-fill: #FE774D;
    -fx-padding: 10.0;
    -fx-cursor: hand;
}

.icons-badge .badge-pane {
    -fx-background-color:#ff4081;
    -fx-background-radius:23.0; 
    -fx-pref-width: 23.0;
    -fx-pref-height: 23.0;  
    -fx-alignment: center;
}

.icons-badge Label{
    -fx-font-weight: BOLD;
    -fx-font-size: 13.0px !important;
    -fx-text-fill: WHITE;
}