How to use font awesome in a fxml project (javafx)

user3749316 picture user3749316 · Jun 26, 2014 · Viewed 39.7k times · Source

I want to use font font awesome in my project but I have no idea how to use font awesome in my project.

I had found some example but they can't be use in fxml.

font awesome javafx

I need help how to use it in my project using fxml

Thank you.

Answer

Nuno Rafael Figueiredo picture Nuno Rafael Figueiredo · Aug 14, 2014

I achieved using FA Icons by adapting Jens Deters's approach.

His routines target dynamic gui composition opposing fxml's declarative way. Nevertheless, his AwesomeIcon enumeration (which maps FA comprehensible names with unicode characters) suited perfectly to my intents.

It should start by statically load the font in main/app class:

public class App extends Application {
    static {
        Font.loadFont(App.class.getResource("/font/fontawesome-webfont.ttf").toExternalForm(), 10);
    }

    @Override
    public void start(final Stage primaryStage) throws Exception {
        URL resource = getClass().getResource("/fxml/app.fxml");
        primaryStage.setScene(new Scene((Parent) FXMLLoader.load(resource), 500, 500));
        primaryStage.setTitle("FontAwesomeFX demo");
        primaryStage.show();
    }

    public static void main(String... args){
        launch(args);
    }
}

One can not use unicode characters in fxml (as needed to specify FA Icons), but can dynamic set attributes with such values. Hence having the above mentioned enumeration (AwesomeIcon), the job was done:

  1. The import:

    <?import de.jensd.fx.fontawesome.AwesomeIcon?>
    
  2. The node:

    <Label styleClass="awesome"
           style="-fx-font-family: FontAwesome; -fx-font-size: 16.0;">
        <text><AwesomeIcon fx:constant="FILE"/></text>
    </Label>
    

I end up implementing an Icon Widget/Control/Component for resuming the amount of code with two properties:

  1. value: FA Icon Name;
  2. size: styleable attribute for style -fx-font-size on label.

New code (same effect):

<Icon value="FILE" size="16"/>

The code for that control can be found here. You can also find an working example as it includes the font and testing code.