Introducing: FontAwesomeFX 8.1

I have started a new major of FontAwesomeFX.

fa81_structure

First of all the new container for an icon character now extends javafx.scene.text.Text instead of javafx.scene.control.Label (see this post for details, many thanks to Peter Schulz for the hint!).
If you know former versions of FontAwesomeFX you may notice that AwesomeDude is now called GlyphsDude, AwesomeIconsStack is now GlyphsStack and so on. But the most significant change is the option to support basically any Glyph/Web Font by just adding a new implementation GlyphIcon where T implements the GlyphIconName interface and the name -> unicode mapping (as Enum).

Currently 2 icon fonts support are build-in:

FontAwesomeIcon
(in respect to Dave Gandy http://fortawesome.github.io/Font-Awesome/ (Yes: ‘fortawesome’ its not a typo ;-)))
fa_icons

WeatherIcon
(in respect to Erik Flowers and Lukas Bischoff http://erikflowers.github.io/weather-icons/)
wi_icons

Usage in FXML

fxml_usage

<?import de.jensd.fx.glyphs.fontawesome.*?>
<?import de.jensd.fx.glyphs.weathericons.*?>

<fx:root prefHeight="300.0" prefWidth="600.0" type="VBox" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <VBox alignment="CENTER" spacing="10.0">
            <children>
                <FontAwesomeIcon iconName="STAR" size="12em" glyphStyle="-fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);"/>
                <WeatherIcon iconName="CLOUD" size="12em" glyphStyle="-fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);"/>
                <StackPane>
                    <children>
                      <FontAwesomeIcon iconName="CIRCLE" size="24em" glyphStyle="-fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);"/>
                      <FontAwesomeIcon iconName="BITBUCKET" size="12em" glyphStyle="-fx-fill: linear-gradient(#ffffff, #d2d2d2); -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );"/>
                     </children>
                </StackPane>
            </children>
            <padding>
                <Insets bottom="20.0" top="20.0" />
            </padding>
        </VBox>
    </children>
</fx:root>

Usage in SceneBuilder

Also layered combinations are supported: GlyphStack

stack

stack_code

Download Binaries: Download
Sources available at Bitbucket

Maven:

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

14 Replies to “Introducing: FontAwesomeFX 8.1”

  1. Pingback: Java desktop links of the week, February 23 « Jonathan Giles

  2. Pingback: JavaFX links of the week, February 23 - Java吧

  3. JJFebruary 26, 2015 at 17:15Reply

    I’ve tried the library with a gradle project that fetch the jar from mavenCentral and the classes ‘FontAwesomeIcons’, ‘GlyphIcons’ and ‘WeatherIcons’ are missing

    1. Jens DetersFebruary 26, 2015 at 17:21Reply

      Until my refactoring in 8.1.1-SNAPSHOT these classed ended with *Name, e.g. “FontAwesomeIconName”. But this is in teh source of the trunk not in the JARs. So I wonder why you get this error!?

      1. JJFebruary 26, 2015 at 19:46Reply

        I were using ‘de.jensd:fontawesomefx:8.1’ but trying with examples from trunk, sorry 🙂
        Thanks for the quick response.

        1. Jens DetersFebruary 27, 2015 at 10:10Reply

          Ah! Now we are talking! Stay tuned for 8.1.1 will be available soon!

  4. FlorisMarch 2, 2015 at 18:05Reply

    This is awesome! A great solution for using icons in my Java application without having to look up .png icons or having to design them myself.

    Currently I’m working on a JavaFX project using Scene Builder 2.0 and by using your youtube video I was able to easily implement the FontAwesomeIcons, I was wondering however if I can add a hover effect?

    For example, right now I have a GlyphStack containing two FontAwesomeIcons as childs of a Button element:
    CIRCLE: -fx-fill: linear-gradient(#008000 0%, #007300 70%, #005000 85%)
    and CHECK: -fx-fill: linear-gradient(#ffffff, #d2d2d2); -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 )

    Can I add a hover effect within SceneBuilder or is it necessary in this case to add a CSS file and add a :hover rule?

    1. Jens DetersMarch 3, 2015 at 14:49Reply

      Thanks! Its great that FontAwesomeFX is so useful for you!

      I think the most re-usable and flexible way is to define a style class in a CSS file (yes, also with the “:hover” etc. pseudo classes). At least if you need the same effect a second time its worth to think about spending a class. That’s the reason why I just added a “style” property for quick testing in SB, but not others like ‘:hover’ or ‘:selected’ ;-).

  5. Jon HMarch 3, 2015 at 13:52Reply

    BTW – the link to the FontAwesome github repo points to ‘FortAwesome’, not ‘FontAwesome’.

    Really cool stuff. Does it work with FX2.2 or just FX8?

      1. Jens DetersMarch 3, 2015 at 14:12Reply

        Thanks for the hint! It should be ok now!

    1. Jens DetersMarch 3, 2015 at 14:14Reply

      Thanks! I hope my stuff is useful for you!
      Honestly I haven’t tried it with JavaFX 2.2 yet.
      Do you have to deal with Java 7?

      1. Jon HMarch 3, 2015 at 14:23Reply

        Yes. Using JavaFX magic within the popular scientific computing software MATLAB, which runs its own JRE7 VM. No clue on if/when they will go up to JRE8.

        1. Jens DetersMarch 3, 2015 at 14:50Reply

          Would you give it a try with JRE 7 and feed me back?

Leave a Comment