包括FXML中的FontAwesomeFX图标和字形 [英] Include FontAwesomeFX Icons and Glyphs from FXML

问题描述

1. 部门1 (很棒的 FontAwesomeFX )

1. Sector 1 (The great FontAwesomeFX)

---

• 提到JFXBadge来自 JFoenix 库， 我发现从 github 下载代码的演示.

---

• Mention that the JFXBadge is coming from the JFoenix Library, I found the code downloading their demo from github.

回到过去的FontAwesomeFX 8.5.0<我可以使用以下方式在应用程序图标中添加

Back in the old time of FontAwesomeFX 8.5.0< i could include in the app icons using:

<?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" />

---

现在，经过几次更新，我添加了最新的罐子(8.9)，但我不知道该怎么做?

---

Now after several updates i added the newest jar (8.9) but i have no clue how to do this?

以纯Java 代码，您可以使用 FontAwesomeFX-中的答案进行操作-仅显示矩形

最后:

我如何像上面一样包含从FontAwesomeFX到.fxml的图标，这样我就可以通过SceneBuilder实时查看它们，而不必编译运行舞蹈.

How can i include icons from FontAwesomeFX to the .fxml like above so i can live check them through SceneBuilder and i have not to do compile run dance.

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

Answers including ControlsFX will be also accepted :) , i need to include the icons either in one way or another.

版本8.0.10中的图标:

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

An icon from the version 8.9.0 (Everything is different):

1. 第2区(很棒的 ControlsFX )
1. Sector 2 (The great ControlsFX)

---

讨论，用于BitBucket中的以下代码.

---

A discussion for the code below from BitBucket.

这是6:45 am，我正在尝试ControlsFX 8.40，但没有任何效果..... :( omggggggggg:

It is 6:45 am I am trying with ControlsFX 8.40 and nothing works ..... :( omggggggggg :

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

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

I am getting a rectangle from the code above ...

推荐答案

我正在添加此答案，直到有人回答该问题为止.

I am adding this answer until someone answer the question.

我要创建以下内容，它是JFXBadge:

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

The old code i use(with 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:

CSS part for the text(Top-RIGHT) and the actual 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;
}

这篇关于包括FXML中的FontAwesomeFX图标和字形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！