How to upgrade FontAwesome to version 5 in JavaFX

Question

I have a JavaFX using FontAwesome icons and I wanted to use the new version 5. But it seems it doesn't work anymore.

Here's a simple demo app written in Groovy that works with the older FontAwesome version:

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.control.Label
import javafx.scene.layout.VBox
import javafx.scene.text.Font
import javafx.stage.Stage

class App extends Application {
    static final String PENCIL = "\uf040"

    @Override
    void start(Stage primaryStage) throws Exception {
        def root = new VBox(10)
        root.children.with {
            add new Label('My icon')
            add new Label(PENCIL).with {
                it.style = '-fx-font-family: FontAwesome;' +
                        '-fx-font-size: 24px;' +
                        '-fx-text-fill: red'
                it
            }
        }
        def scene = new Scene(root, 600, 600)
        primaryStage.with {
            it.scene = scene
            it.title = "FontAwesome Demo"
            centerOnScreen()
            show()
        }
    }

    static void main(String[] args) {
        Font.loadFont( App.getResource(
                // "/fa-regular-400.ttf" /* version 5 */
                "/fontawesome-webfont.ttf" /* old version (not sure which) */
        ).toExternalForm(), 12 )
        launch(App, args)
    }
}

Using the old font file, it works:

After upgrading:

The docs on upgrading to version 5 doesn't seem to mention anything much other than the font-family changed from FontAwesome to Font Awesome 5 Free, but changing that won't fix the problem.

NOTE: My actual app is written in Java, just using Groovy here as an example, the problem is the same though.

Answer 1

I've finally got it working. Besides changing the font-family, you must use the correct font file for JavaFX, as most of the options they distribute don't seem to work...

Also, they've changed the names of the icons (nice, right?) as shown in the upgrading docs, so you must update them one by one.

From the web distribution, only the font files called xx-solid-900.xx work. The woff and tiff extensions both seem to work, but woff2 doesn't.

I also tried the desktop distribution, which has much larger files, and only Font Awesome 5 Free-Solid-900.otf worked.

Here's the pen icon (unicode f303) I found in version 5 displayed in the above app:

Sharper!!

For reference, the final source code:

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.control.Label
import javafx.scene.layout.VBox
import javafx.scene.text.Font
import javafx.stage.Stage

class App extends Application {
    static final String PENCIL = "\uf303"

    @Override
    void start(Stage primaryStage) throws Exception {
        def root = new VBox(10)
        root.children.with {
            add new Label('My icon')
            add new Label(PENCIL).with {
                it.style = '-fx-font-family: "Font Awesome 5 Free";' +
                        '-fx-font-size: 24px;' +
                        '-fx-text-fill: red'
                it
            }
        }
        def scene = new Scene(root, 100, 140)
        primaryStage.with {
            it.scene = scene
            it.title = "FontAwesome Demo"
            centerOnScreen()
            show()
        }
    }

    static void main(String[] args) {
        Font.loadFont(App.getResource("/fa-solid-900.woff").toExternalForm(), 12)
        launch(App, args)
    }
}