FontAwesomeFX 8.0.10 released

FontAwesomeFX 8.0.10 introduces Stacked Icons and FXML support

Binaries: Download
Sources: Bitbucket
Maven:

<dependency>
  <groupId>de.jensd</groupId>
  <artifactId>fontawesomefx</artifactId>
  <version>8.0.10</version>
</dependency>

Stacked Icons

FontAwesome is featuring Stacked Icons which is clearly also for JavaFX Applications this is a useful feature.

To support Stackend Icons FontAwesomeFX 8.0.10 comes with two new classes: AwesomeIconsStack and Icon.

AwesomeIconsStack
is basically a StackPane providing convent methods to add and remove Icons.

Icon
is a Node which is able to display a styleable FontAwesome icon. Icons can be styled in two ways:

by setting a style class:

Region stackedIcon2 = AwesomeIconsStack.create()
                .add(Icon.create()
                        .icon(AwesomeIcon.SQUARE)
                        .size("3em")
                        .styleClass("stack-base"))
                .add(Icon.create()
                        .icon(AwesomeIcon.STAR)
                        .size("2em")
                        .styleClass("stack-top")
                );

or by setting the style:

Region stackedIcon3 = AwesomeIconsStack.create()
                .add(Icon.create()
                        .icon(AwesomeIcon.SQUARE)
                        .style("-fx-font-size: 4em; -fx-text-fill: yellowgreen;"))
                .add(Icon.create()
                        .icon(AwesomeIcon.APPLE)
                        .style("-fx-font-size: 3em; -fx-text-fill: white;")
                );

fontawesomefx_8010_1

Thats the code to create Icons like above:

Region stackedIcon1 = AwesomeIconsStack.create().add(Icon.create());

Region stackedIcon2 = AwesomeIconsStack.create()
        .add(Icon.create()
                .icon(AwesomeIcon.SQUARE)
                .size("3em")
                .styleClass("stack-base"))
        .add(Icon.create()
                .icon(AwesomeIcon.STAR)
                .size("2em")
                .styleClass("stack-top")
        );

Region stackedIcon3 = AwesomeIconsStack.create()
        .add(Icon.create()
                .icon(AwesomeIcon.SQUARE)
                .style("-fx-font-size: 4em; -fx-text-fill: yellowgreen;"))
        .add(Icon.create()
                .icon(AwesomeIcon.APPLE)
                .style("-fx-font-size: 3em; -fx-text-fill: white;")
        );

Region stackedIcon4 = AwesomeIconsStack.create()
        .add(Icon.create()
                .icon(AwesomeIcon.SQUARE)
                .style("-fx-font-size: 4em; -fx-text-fill: yellowgreen;"))
        .add(Icon.create()
                .icon(AwesomeIcon.APPLE)
                .style("-fx-font-size: 3em; -fx-text-fill: black;")
        );

Region stackedIcon5 = AwesomeIconsStack.create()
        .add(Icon.create()
                .icon(AwesomeIcon.BUG)
                .style("-fx-font-size: 2em; -fx-text-fill: black;"))
        .add(Icon.create()
                .icon(AwesomeIcon.BAN)
                .style("-fx-font-size: 4em; -fx-text-fill: red; -fx-opacity: 0.5;")
        );

Region stackedIcon6 = AwesomeIconsStack.create()
        .add(Icon.create()
                .icon(AwesomeIcon.CIRCLE)
                .style("-fx-font-size: 8em; -fx-text-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);"))
        .add(Icon.create()
                .icon(AwesomeIcon.TWITTER)
                .style("-fx-font-size: 4em; -fx-text-fill: white;")
        );

Region stackedIcon7 = AwesomeIconsStack.create()
        .add(Icon.create()
                .icon(AwesomeIcon.CIRCLE)
                .style("-fx-font-size: 12em; -fx-text-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);"))
        .add(Icon.create()
                .icon(AwesomeIcon.BITBUCKET)
                .style("-fx-font-size: 6em; "
                        + "-fx-text-fill: linear-gradient(#ffffff, #d2d2d2); "
                        + "-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );")
        );

HBox stackIconBox = new HBox();
stackIconBox.setSpacing(5.0);
stackIconBox.getChildren().addAll(stackedIcon1, stackedIcon2, stackedIcon3, stackedIcon4, stackedIcon5, stackedIcon6, stackedIcon7);

Region iconStack1 = AwesomeIconsStack.create()
        .add(Icon.create()
                .icon(AwesomeIcon.CIRCLE)
                .style("-fx-font-size: 12em; -fx-text-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);"))
        .add(Icon.create()
                .icon(AwesomeIcon.BITBUCKET)
                .style("-fx-font-size: 6em; "
                        + "-fx-text-fill: linear-gradient(#ffffff 0%, #d2d2d2); "
                        + "-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );"))
        .add(new Icon(AwesomeIcon.BAN, null, "-fx-font-size: 12em; -fx-text-fill: red; -fx-opacity: 0.5;", null));

HBox stackIconBox2 = new HBox();
stackIconBox2.setSpacing(5.0);
stackIconBox2.getChildren().addAll(iconStack1);

Have a look at “iconStack1” in the code above:
the number of stacked Icons is not limited to only two.

Support for FXML

In respect to the issue opened by Manuel Maukys (@manuel_mauky) I played with the new @NamedArg annotation. It’s also possible to use the Icon in FXML (even stacked):

fontawesomefx_8010_2

<VBox alignment="CENTER" spacing="10.0">
  <children>
    <Icon awesomeIcon="STAR" size="4em" style="-fx-font-size: 6em; -fx-text-fill: linear-gradient(#ffffff, #d2d2d2); -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.5) , 8 , 0.0 , 0 , 0 );" styleClass="" />
    <StackPane>
      <children>
        <Icon awesomeIcon="CIRCLE" style="-fx-font-size: 24em; -fx-text-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);" styleClass="" size=""/>
        <Icon awesomeIcon="BITBUCKET" style="-fx-font-size: 12em; -fx-text-fill: linear-gradient(#ffffff, #d2d2d2); -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );" styleClass="" size=""/>
      </children>
    </StackPane>
  </children>
</VBox>

I am not a Ninja master yet, but somehow I imported a custom component to get it also supported in SceneBuilder 2.0:

fontawesomefx_8010_3

Leave a Reply to Jens Deters Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

9 thoughts on “FontAwesomeFX 8.0.10 released”

  1. The fxml support is something I’ve dreamed about during the last 6 months… Thank you so much and congrats for the good work!

  2. I started using the Icon class in fxml yesterday and it works great.
    If you are open to suggestion, it would be nice to have a ButtonIcon class also with the same features. The Icon is a fxml way equivalent to Awesomedude.createIconLabel() and the ButtonIcon would be the equivalent of Awesomedude.createIconButton().

    Last but not least… Being able to specify the awesomeIcon property of the Icon object in CSS would be great.

    #mIcon {
    -fx-awesome-icon: “FOLDER_OPEN”;
    }

    And if you are open to contribution, I may even create pull requests for those features… If I find the time…

  3. The Icon class in FXML has been a great new feature.

    I came across one bug, if you don’t explicitly specify the style attribute, like so:

    The Icon class is appending ‘null’ to end the stylePrefix it creates in the constructor, which fails to parse. The Icon class should check to see if the ‘style’ attribute is null before using it.

    The workaround is to set the style attribute to an empty string:

    I’ll try to submit an issue when I get a chance. I thought I would post it here for now.

    Keep up the good work.

    1. Looks like my example FXML code was dropped off. Trying again using the code tag.

      The Icon class in FXML has been a great new feature.

      I came across one bug, if you don’t explicitly specify the style attribute, like so:


      The Icon class is appending ‘null’ to end the stylePrefix it creates in the constructor, which fails to parse. The Icon class should check to see if the ‘style’ attribute is null before using it.

      The workaround is to set the style attribute to an empty string:

      </code

      I’ll try to submit an issue when I get a chance. I thought I would post it here for now.

      Keep up the good work.

  4. Fantastic Job!!! Trying to use this with Scene Builder. I attempted to import the jar. Scene builder sees an AwesomeIconsStack, but not an Icons component. Which I see is just an extension of a Label component. How do I get Scene Builder to recognize the Icons component?