How to use font awesome in a fxml project (javafx)
Solution 1
I think this is what you need ControlFX that include font awesome support. see the javadoc for more info (But I tested it one day and it works fine)
Solution 2
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:
-
The import:
<?import de.jensd.fx.fontawesome.AwesomeIcon?>
-
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:
- value: FA Icon Name;
-
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.
Solution 3
I ported the Android-Iconics library, developed by Mike Penz, to FX. Updates will follow soon (docs, as well)..
The showcase.jar will give you an overview of the icons.
Usage (Java 1.8 required):
FxIconicsLabel labelTextDefault =
(FxIconicsLabel) new FxIconicsLabel.Builder(FxFontGoogleMaterial.Icons.gmd_folder_special)
.size(24)
.text("Right (default)")
.color(MaterialColor.ORANGE_500)
.build();
(or see DialogPlayGround.java)
Solution 4
If you use SceneBuilder
try this.
- First, download 'fontawesomefx'.
- Second, import jar to
SceneBuilder
usingSceneBuilder
's Jar/FXML Manager. - Third, Library search for
FontAwesomeIconView
,GlyphCheckBox
,MaterialDesignIconView
,MaterialIconView
, orWeatherIconView
Sample FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import de.jensd.fx.glyphs.control.GlyphCheckBox?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIconView?>
<?import de.jensd.fx.glyphs.materialicons.MaterialIconView?>
<?import de.jensd.fx.glyphs.weathericons.WeatherIconView?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox maxHeight="-Infinity" maxWidth="-Infinity">
<children>
<Label text="FontAwesomeIconView">
<graphic>
<FontAwesomeIconView />
</graphic>
</Label>
<Label text="GlyphCheckBox">
<graphic>
<GlyphCheckBox />
</graphic>
</Label>
<Label text="MaterialDesignIconView">
<graphic>
<MaterialDesignIconView />
</graphic>
</Label>
<Label text="MaterialIconView">
<graphic>
<MaterialIconView />
</graphic>
</Label>
<Label text="WeatherIconView">
<graphic>
<WeatherIconView />
</graphic>
</Label>
</children>
</VBox>
</children>
</StackPane>
Don't forget to add these jars to your project's classpath!
Solution 5
As said by @Sedrick you can use fontawesomefx library and use it in FXML as follows:
Note: JavaFX 8 and FontAwesomeFx v8.9
dashboard.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane xmlns="http://javafx.com/javafx/8.0.121"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="com.example.DashboardController"
prefHeight="760" prefWidth="1080">
<Button text="Close" AnchorPane.topAnchor="0" AnchorPane.leftAnchor="0">
<graphic>
<FontAwesomeIconView glyphName="CLOSE" glyphSize="24"/>
</graphic>
</Button>
</AnchorPane>
user3749316
Updated on May 18, 2020Comments
-
user3749316 almost 4 years
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.
I need help how to use it in my project using fxml
Thank you.
-
ATHER over 9 yearsI tried this, but getting weired symbols instead of actual icons. Sorry i am new to Java and JavaFx. Also i am using exactly the same version of FontAwesom specified in your code "Icon Enum based on Font-Awesome v4.1.0"
-
Nuno Rafael Figueiredo over 9 yearsPerhaps you missed some step. I just updated code to present an working example.
-
ATHER over 9 yearsThanks i will check that out. Also when i used '<AwesomeIcon fx:constant="FILE"/>' SceneBuilder no longer opens my fxml and throws error. Is this normal ?
-
arinh over 8 yearsCreating an application in JavaFX for student project, I got your jar installed however my program crashes when running the line with FxIconicsLabel. Did I need to port something outside of your github page and how if so? Very new to JavaFX.
-
arinh over 8 yearsTurns out I had JDK 1.7 so I updated to 1.8 and problem fixed. Thank you for sharing this!
-
Omkar almost 5 yearsHow to change icon in
FontAwsomeIconView
? -
SedJ601 almost 5 yearsI have found that some versions don't work well with SceneBuilder. Have you tried editing in the
FXML
file? -
Omkar almost 5 yearsyes, you need to provide
FontAwesomeIcon
name inglyphName
as follows<FontAwesomeIconView glyphName="CLOSE" glyphSize="24" />
it works that way. -
Renato over 4 yearsThis has stopped working with FontAwesome version 5. Would appreciate some inputs on my question about that: stackoverflow.com/questions/59974248/…