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>

Leave a Reply to Jon H 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.

16 thoughts on “Introducing: FontAwesomeFX 8.1”

  1. 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. 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. I were using ‘de.jensd:fontawesomefx:8.1’ but trying with examples from trunk, sorry 🙂
        Thanks for the quick response.

  2. 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. 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’ ;-).

  3. 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. 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.

  4. I like the FXML syntax but does it work in Java 9?
    I have problem to make it work in javaFX9 -> I see that the tag is now FontAwesomeIconView, and it doesn’t find the icon attrinbutes accessor (i think it’s missing the getter)

  5. How to change FontAwesome’s glyph color inside JFXButton through hover selector in CSS?

    I have a toolbar (VBox) with several JFXButtons. All button’s caption and glyphs are white. I want to change only glyph color when mousepointer is over the button.

    The CSS file (but isn’t working):

    .button {
    -fx-text-fill: white;
    -fx-fill: white;
    }

    .button .glyph-icon:hover {
    -fx-background-color: derive(black, 15%);
    -fx-fill: #cc8f1e;
    }