GOXR3PLUS
GOXR3PLUS

Reputation: 7265

Include FontAwesomeFX Icons and Glyphs from FXML


  1. Sector 1 (The great FontAwesomeFX)

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:

enter image description here

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

enter image description here


  1. Sector 2 (The great ControlsFX)

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

Answers (1)

GOXR3PLUS
GOXR3PLUS

Reputation: 7265

I am adding this answer until someone answer the question.


I want to create the below which is a JFXBadge:

enter image description here

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

Related Questions