Using Font Awesome in JavaFX with fontawesomefx

Icons are a great way to spice up any UI. You can easily use the Font Awesome icons in JavaFX, by using the fontawesomefx library.

I will show a small example on how to use the icons in JavaFX code and how to apply some styling.

First import the library. I am using Maven, so I just add this dependency:

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

We will start with a simple app that uses a BorderPane to put some content at the center and have a kind of header at the top:

public class FontAwesomeTest extends Application
{
  @Override
  public void start( Stage stage ) throws Exception
  {
    StackPane root = new StackPane();

    BorderPane borderPane = new BorderPane();
    HBox headerBox = new HBox();
    headerBox.getStyleClass().add( &quot;header-component&quot; );
    borderPane.setTop( headerBox );
    Label centerComponent = new Label( &quot;CENTER COMPONENT&quot; );
    centerComponent.setPrefSize( Double.MAX_VALUE, Double.MAX_VALUE );
    centerComponent.getStyleClass().add( &quot;center-component&quot; );
    borderPane.setCenter( centerComponent );
    root.getChildren().add( borderPane );

    Scene scene = new Scene( root );
    scene.getStylesheets().add( &quot;font-awesome-test.css&quot; );

    stage.setScene( scene );
    stage.setWidth( 300 );
    stage.setHeight( 400 );
    stage.setTitle( &quot;JavaFX 8 app&quot; );
    stage.show();
  }
}

The CSS file used:

.center-component {
    -fx-background-color: coral;
    -fx-alignment: center;
}

The app looks like this initially:

Screen Shot 2015-03-13 at 17.59.59

We will now add an icon in the header:

HBox headerBox = new HBox();
headerBox.getStyleClass().add( &quot;header-component&quot; );
headerBox.getChildren()
         .addAll( GlyphsDude.createIcon( FontAwesomeIcons.BARS, 
                                         &quot;40px&quot; ) );

Notice how we use the static factory method createIcon to build us a Node with the icon from the constants in the enum FontAwesomeIcons. As a 2nd argument, we can specify the size of the icon.

We get the following result:

Screen Shot 2015-03-13 at 18.03.49

We can add some CSS to add a border so the icon does not stick to the side:

.header-component {
    -fx-border-width: 7px;
    -fx-border-color: transparent;
}

NOTE: Do not forget to set the -fx-border-color style as well as the -fx-border-width. Only setting the width will not do anything!

Screen Shot 2015-03-13 at 18.10.06

If we want to add some text next to the icon, we can use the static factory method createIconLabel:

HBox headerBox = new HBox();
headerBox.getStyleClass().add( &quot;header-component&quot; );
Label iconLabel = GlyphsDude.createIconLabel( FontAwesomeIcons.BARS, 
                                              &quot;Menu&quot;, 
                                              &quot;40px&quot;, 
                                              &quot;40px&quot;, 
                                              ContentDisplay.LEFT );
iconLabel.getStyleClass().add( &quot;header-label&quot; );
headerBox.getChildren().addAll( iconLabel );

Which shows as:

Screen Shot 2015-03-13 at 18.13.33

Finally, we can color the icon and the text by applying this CSS:

.header-label &gt; .text {
    -fx-fill: #8A0808;
}

.header-label &gt; .glyph-icon {
    -fx-fill: #8A0808;
}

Final result:

Screen Shot 2015-03-13 at 18.15.09

Advertisements

4 thoughts on “Using Font Awesome in JavaFX with fontawesomefx

  1. Pingback: JavaFX links of the week, March 16 // JavaFX News, Demos and Insight // FX Experience

  2. Pingback: Java desktop links of the week, March 16 « Jonathan Giles

  3. Pingback: Using Font Awesome in JavaFX with fontawesomefx | Dinesh Ram Kali.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s