Reputation: 7265
JFXBadge
is coming from the JFoenix Library,
I found the code downloading their demo from github.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>
Old solution:
The line you needed was:
<Icon awesomeIcon="STAR" size="2em" style=";" styleClass="icon" />
Now after several updates i added the newest jar (8.9
) but i have no clue how to do this?
In plain java code you can do it using the answer from FontAwesomeFX - only rectangles displayed
Finally:
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.
Answers including ControlsFX
will be also accepted :) , i need to include the icons either in one way or another.
An icon from the version 8.0.10
:
An icon from the version 8.9.0
(Everything is different):
A discussion for the code below from BitBucket
.
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 ...
Upvotes: 3
Views: 6651
Reputation: 7265
I am adding this answer until someone answer the question.
I want to create the below which is a JFXBadge
:
The old code i use(with FontAwesomeFX 8.0.10
):
FXML Part:
<?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 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;
}
Upvotes: 1