FontAwesomeFX - only rectangles displayed

Question

I'm trying to use FontAwesomeFX 8.4 in my JavaFX app, but every glyph is displayed as a rectangle (the "missing character" glyph). By the way, this is how the test app from the author looks like:

Any ideas what could be wrong?

I'm on Arch Linux and using Intellij IDEA.

POM:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>de.jensd.fx.glyphs</groupId>
<artifactId>testapps</artifactId>
<version>1.0-SNAPSHOT</version>

<dependencies>
    <dependency>
        <groupId>de.jensd</groupId>
        <artifactId>fontawesomefx</artifactId>
        <version>8.4</version>
    </dependency>
</dependencies>

Which IDE you are using? How do you get the FontAwesomeFX, like Maven, or do you simply download the jar? Show a bit of your code where you want to use it, so please provide an [MCVE](http://stackoverflow.com/help/mcve) — aw-think, Jul 07 '15 at 15:48
I use Maven dependency. The screenshot is what the test app looks like. The app source is [here](https://bitbucket.org/Jerady/fontawesomefx/src/a8b32e3267a3c155feb582ad80c565460a244832/src/test/java/de/jensd/fx/glyphs/testapps/App.java?at=master). — Brogrammer, Jul 08 '15 at 07:15
There is no App in the maven repo, so please show an [MCVE](http://stackoverflow.com/help/mcve) otherwise there are only guesses. — aw-think, Jul 08 '15 at 07:30
I already provided a link to the source I tried in my comment above. I don't understand what else you need. — Brogrammer, Jul 08 '15 at 07:37
Like how you set up your runtime. If you use it with an IDE, provide it (Netbeans, Eclipse, etc.). How you copied the code of the example App? And further information like your pom.xml and your package structure. It seems to me there is only a classpath problem, but I only can help you, if you provide enough information. — aw-think, Jul 08 '15 at 07:39
I'm using IDEA. The source is IDENTICAL, I added the pom above as well. What I noticed is that Font.load() always returns null, no matter what external font I try to load (tried a few). Could this be the problem? — Brogrammer, Jul 08 '15 at 08:08
That's what I thought, you missed adding the fontawesomefx-x.x.jar (where x is the version) to your App.jar as a lib. You need to unpack the dependencies and add them to your resulting project. You can simply proof it, by unzipping your App.jar. You won't find any fontawesome classes. Look here to see how you can make it: http://stackoverflow.com/a/4323501/4170073 — aw-think, Jul 08 '15 at 08:08
I don't think that is the problem, I'm running it directly from IDE and it has the fontawesomefx jar added as a library: http://i.imgur.com/H4E5lcV.png. As I said , Font.load() always returns null to me, no matter the font. — Brogrammer, Jul 08 '15 at 08:25
Have you really unzipped your resulting jar file? I think not. This is why Font.load() always returns null, it can't get the font in `de.jensd.fx.glyphs.fontawesome` package, because it's not in your build jar. Look here to know how you be able to do it in Idea: http://stackoverflow.com/a/19245766/4170073 — aw-think, Jul 08 '15 at 08:37
Font.load() ALWAYS returns null even when loading OTHER fonts from disk. Also, I tried the first example [here](http://fxexperience.com/2012/12/use-webgoogle-fonts-in-javafx/) and it doesn't work either even though there are no jar/resource dependencies (the font is loaded remotely). I get a console error "INFO: Could not load @font-face font [http://fonts.gstatic.com/s/gafata/v5/o-DwOh1jynFSAy8preUMxw.ttf]" even though the font is THERE and is valid. I have no idea what is wrong. — Brogrammer, Jul 08 '15 at 08:51
Please show me your code! In the whole demo app from fontawesomefx isn't called the Font.load() method. Where do you get the error? You don't have to load any font in fontawesomefx. — aw-think, Jul 08 '15 at 09:25
Which Linux Arch Version you are using? Any special distro? Where can I download it? And which Java you are using? Oracle or OpenJDK? — aw-think, Jul 08 '15 at 10:08
Same issue with 8.7 on Mac OS X but only in combination with GlyphsStack.create().. It works using GlyphsDude.setIcon(...). @Komanikota: could you finally solve it with updating jdk? Thanks! — tonimaroni, Dec 09 '15 at 10:50

aw-think · Answer 1 · 2015-07-08T10:30:47.900

This is an Step by Step Guide for using Intellij Idea with Maven using the FontAwesomeFX Demo App. I only have a Windows 8.1 x64 installation, but it should work on every OS. Maybe other people give it a try and add a comment.

Step 1

Create a new Project of type Maven. Select the SDK if none JDK was already set. do not select any archetype or do not check the "Create from archetype" box. Click next.

Step 2

Give it a group-id like "com.myCompany" and give it an artifact-id like "fademo" the version is not relevant. Click next.

Step3

Give it a project name and a location to store files. Click next.

Step4

This is how the new project looks like. Move on with next step.

Step5

Now copy the dependency into your pom.xml. Afer you have saved the file, there is a display shown in the right upper corner which wanted you to update the maven.

Simply click "Enable Auto-Import". Move on to the next step.

Step6

Now create a new Java class "App" and copy and paste the content of the App source in. After that, save your new class.

Now you are able to start the whole FontAwesomeFX Demo App by right clicking the App.java file and choosing "Run App.main()".

Step7

This is how the Demo App is looking.

Step7

Source code

Dependency for pom.xml

<dependencies>
    <dependency>
        <groupId>de.jensd</groupId>
        <artifactId>fontawesomefx</artifactId>
        <version>8.4</version>
    </dependency>
</dependencies>

App.java

import de.jensd.fx.glyphs.GlyphsBuilder;
import de.jensd.fx.glyphs.GlyphsDude;
import de.jensd.fx.glyphs.GlyphsStack;
import de.jensd.fx.glyphs.GlyphsStyle;
import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon;
import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView;
import de.jensd.fx.glyphs.weathericons.WeatherIcon;
import de.jensd.fx.glyphs.weathericons.WeatherIconView;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.control.SeparatorMenuItem;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * @author Jens Deters
 */
public class App extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        VBox root = new VBox();
        root.setSpacing(10.0);

        Button testButton = new Button();
        testButton.getStyleClass().setAll("exit-button");
        GlyphsDude.setIcon(testButton, FontAwesomeIcon.POWER_OFF, "6em");

        Button testButton2 = new Button();
        testButton2.getStyleClass().add("alien-button");
        GlyphsDude.setIcon(testButton2, WeatherIcon.ALIEN, "6em");

        FontAwesomeIconView fontAwesomeIcon
                = new FontAwesomeIconView(FontAwesomeIcon.AMBULANCE);
        fontAwesomeIcon.setStyleClass("blue-icon");
        fontAwesomeIcon.setSize("4em");

        WeatherIconView weatherIcon1 = new WeatherIconView(WeatherIcon.CLOUD);
        weatherIcon1.setStyleClass("blue-icon");
        weatherIcon1.setSize("4em");

    /*
     * .thumbs-up-icon{
     * -glyph-name: "THUMBS_UP";
     * -glyph-size: 6em;
     * }
     *
     * .thumbs-down-icon{
     * -glyph-name: "THUMBS_DOWN";
     * -glyph-size: 6em;
     * }
     */
        FontAwesomeIconView thumbsUpIcon = new FontAwesomeIconView();
        thumbsUpIcon.setStyleClass("thumbs-up-icon");

        FontAwesomeIconView thumbsDownIcon = new FontAwesomeIconView();
        thumbsDownIcon.setStyleClass("thumbs-down-icon");

        WeatherIconView weatherIcon2 = new WeatherIconView();
        weatherIcon2.setStyleClass("green-icon");
        weatherIcon2.setSize("4em");

        Text githubLabel = GlyphsDude.createIcon(FontAwesomeIcon.GITHUB);
        Text ambulanceLabel
                = GlyphsDude.createIcon(FontAwesomeIcon.PLUS_SQUARE_ALT, "60.0");
        Button starButton
                = GlyphsDude.createIconButton(FontAwesomeIcon.STAR, "Nice!", "48.0", "20.0", ContentDisplay.TOP);
        Button cloudButton
                = GlyphsDude.createIconButton(FontAwesomeIcon.CLOUD, "Download");
        ToggleButton toggleButton
                = GlyphsDude.createIconToggleButton(FontAwesomeIcon.LOCK, "Lock", "60.0", ContentDisplay.TOP);
        Region stackedIcon1
                = GlyphsStack.create().add(GlyphsBuilder.create(FontAwesomeIconView.class).glyph(FontAwesomeIcon.AMBULANCE).build());

        Region stackedIcon2 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.SQUARE)
                                .size("3em")
                                .styleClass("stack-base")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.STAR)
                                .size("2em")
                                .styleClass("stack-top")
                                .build()
                );

        Region stackedIcon3 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.SQUARE)
                                .style("-fx-font-size: 4em; -fx-fill: yellowgreen;")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.APPLE)
                                .style("-fx-font-size: 3em; -fx-fill: white;")
                                .build()
                );

        Region stackedIcon4 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.SQUARE)
                                .style("-fx-font-size: 4em; -fx-fill: yellowgreen;")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.APPLE)
                                .style("-fx-font-size: 3em; -fx-fill: black;")
                                .build()
                );

        Region stackedIcon5 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.BUG)
                                .style("-fx-font-size: 2em; -fx-fill: black;")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.BAN)
                                .style("-fx-font-size: 6em; -fx-fill: red; -fx-opacity: 0.5;")
                                .build()
                );

        Region stackedIcon6 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.CIRCLE)
                                .style("-fx-font-size: 10em; -fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.TWITTER)
                                .style("-fx-font-size: 6em; -fx-fill: white;")
                                .build()
                );

        Region stackedIcon7 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.CIRCLE)
                                .style("-fx-font-size: 10em; -fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.BITBUCKET)
                                .style("-fx-font-size: 6em; "
                                        + "-fx-fill: linear-gradient(#ffffff, #d2d2d2); "
                                        + "-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );")
                                .build()
                );
        HBox stackIconBox1 = new HBox();
        stackIconBox1.setSpacing(5.0);
        stackIconBox1.setPadding(new Insets(10.0));
        stackIconBox1.getChildren().addAll(stackedIcon1, stackedIcon2, stackedIcon3, stackedIcon4, stackedIcon5, stackedIcon6, stackedIcon7);

        Region iconStack1 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.CIRCLE)
                                .style("-fx-font-size: 12em; -fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.BITBUCKET)
                                .style("-fx-font-size: 6em; "
                                        + "-fx-fill: linear-gradient(#ffffff 0%, #d2d2d2); "
                                        + "-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.BAN)
                                .style("-fx-font-size: 12em; -fx-fill: red; -fx-opacity: 0.5;")
                                .build()
                );

        Region iconStack3 = GlyphsStack.create()
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.CIRCLE)
                                .size("12em")
                                .style("-fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);")
                                .build()
                )
                .add(GlyphsBuilder.create(WeatherIconView.class)
                                .glyph(WeatherIcon.RAIN)
                                .size("4em")
                                .style("-fx-fill: linear-gradient(#ffffff 0%, #d2d2d2); "
                                        + "-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );")
                                .build()
                )
                .add(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.BAN)
                                .size("12em")
                                .style("-fx-fill: red; -fx-opacity: 0.5;")
                                .build()
                );

        Region iconStack4 = GlyphsStack.create()
                .addAll(GlyphsBuilder.create(FontAwesomeIconView.class)
                                .glyph(FontAwesomeIcon.CIRCLE)
                                .size("12em")
                                .style("-fx-fill: linear-gradient(#70b4e5 0%, #247cbc 70%, #2c85c1 85%);")
                                .build(),
                        GlyphsBuilder.create(WeatherIconView.class)
                                .glyph(WeatherIcon.SUNRISE)
                                .size("4em")
                                .style("-fx-fill: linear-gradient(orange 0%, darkred); "
                                        + "-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 4 , 0.0 , 1 , 1 );")
                                .build()
                );

        HBox stackIconBox2 = new HBox();
        stackIconBox2.setSpacing(5.0);
        stackIconBox2.setPadding(new Insets(10.0));
        stackIconBox2.getChildren().addAll(iconStack1, iconStack3, iconStack4);

        HBox basicIconBox = new HBox();
        basicIconBox.setAlignment(Pos.CENTER);
        basicIconBox.setSpacing(20.0);
        basicIconBox.getChildren().addAll(thumbsUpIcon, thumbsDownIcon, fontAwesomeIcon, weatherIcon1, weatherIcon2, testButton, testButton2, githubLabel, ambulanceLabel);

        root.getChildren().addAll(createMenubar(), basicIconBox, starButton, cloudButton, toggleButton, stackIconBox1, stackIconBox2);

        Scene scene = new Scene(root);
        scene.getStylesheets().addAll(GlyphsStyle.DEFAULT.getStylePath());

        primaryStage.setScene(scene);
        primaryStage.setTitle("FontAwesomeFX demo");
        primaryStage.show();

    }

    private MenuBar createMenubar() {

        MenuBar menuBar = new MenuBar();

        MenuItem openItem = new MenuItem("Open");
        GlyphsDude.setIcon(openItem, FontAwesomeIcon.FILE);
        MenuItem saveItem = new MenuItem("Save");
        GlyphsDude.setIcon(saveItem, FontAwesomeIcon.DOWNLOAD);
        MenuItem saveAsItem = new MenuItem("Save As...");
        GlyphsDude.setIcon(saveAsItem, FontAwesomeIcon.DOWNLOAD);
        MenuItem exitItem = new MenuItem("Exit");
        GlyphsDude.setIcon(exitItem, FontAwesomeIcon.SIGN_OUT);

        Menu menuFile = new Menu("File");
        menuFile.getItems().add(openItem);
        menuFile.getItems().add(saveItem);
        menuFile.getItems().add(saveAsItem);
        menuFile.getItems().add(new SeparatorMenuItem());
        menuFile.getItems().add(exitItem);

        Menu menuEdit = new Menu("Edit");
        Menu menuView = new Menu("View");

        menuBar.getMenus().addAll(menuFile, menuEdit, menuView);

        return menuBar;
    }

    public static void main(String[] args) {
        System.setProperty("prism.lcdtext", "false");
        launch(args);
    }
}

Update

Done the same thing in Ubuntu 15.04 x64 with Oracle JDK 1.8.0_45 installed and it works:

Ubuntu

Thanks for the detailed info, but I am already using the same workflow... and it doesn't work. I am going to try openjdk8 now. — Brogrammer, Jul 08 '15 at 11:03
From you other question about `Font.load()` only getting null, you probably have an access rights problem to the file you read. I will give you some code you can try if it is a security problem. — aw-think, Jul 08 '15 at 11:25
Can you have a look at this question http://stackoverflow.com/questions/41094114/inlcude-fontawesomefx-icons-and-glyphs-from-fxml :) ? I am getting a rectangle using FXML... Also why are you using `System.setProperty("prism.lcdtext", "false"); ` ? — GOXR3PLUS, Dec 12 '16 at 06:00

FontAwesomeFX - only rectangles displayed

1 Answers1

Step 1

Step 2

Step3

Step4

Step5

Step6

Step7

Source code

Dependency for pom.xml

App.java

Update

Linked