FontAwesomeFX: 4.0.1 support
Refer for latest updates here.
Hi,
I just have updated FontAwesomeFX to support currently released FontAwesome 4.0.1 with all of it’s 369 Icons.
Please note that some enum values have been changed, e.g. former AwesomeIcon.SIGNOUT
is now AwesomeIcon.SIGN_OUT
.
Also I have added some convenience methods to the helper class:
AwesomeDude.setIcon(TreeItem treeItem, AwesomeIcon icon) { AwesomeDude.setIcon(TreeItem treeItem, AwesomeIcon icon, String iconSize)
Tip: Navigation Buttons
Add CSS and assign the class to a Button
or ToggleButton
:
.navigation-button{ -fx-font-size: 0.9em; -fx-background-color: transparent; -fx-graphic-text-gap: 0px; -icons-color: gray; -fx-text-fill: gray; -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.4) , 6, 0.0 , 0 , 2 ); } .navigation-button:pressed:hover{ -icons-color: black; -fx-text-fill: black; -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 ); } .navigation-button:hover{ -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 ); }
Set FontAwesome-Icons:
AwesomeDude.setIcon(configurationButton, AwesomeIcon.GEAR, viewContext.getUiConfiguration().getIconEmSize(), ContentDisplay.TOP); AwesomeDude.setIcon(aboutButton, AwesomeIcon.INFO, viewContext.getUiConfiguration().getIconEmSize(), ContentDisplay.TOP); AwesomeDude.setIcon(exitButton, AwesomeIcon.SIGN_OUT, viewContext.getUiConfiguration().getIconEmSize(), ContentDisplay.TOP);
Source
@ Bitbucket
Maven
<dependency> <groupId>de.jensd</groupId> <artifactId>fontawesomefx</artifactId> <version>8.0.5</version> </dependency>
Support for glyph font packs in ControlsFX 8.0.2
Since version 8.0.2 the ControlsFX-Project has support for glyph font packs.
In a sample project i tryed to use font awesome as image on a button.
Image is displayed, but css is not working (tryed to change color).
Project was created with Netbeans 7.4 and used an fxml file.
Don’t know what i did wrong.
Have you used AwesomeDude.setIcon() to add a Font Icon?
E.g.:
AwesomeDude.setIcon(aboutButton, AwesomeIcon.QUESTION, “2em”, ContentDisplay.TOP);
Then you should be able to control the icon color e.g. via
.root {
-icons-color: rgb(202,202,203);
}
.awesome{
-fx-font-family: FontAwesome;
-fx-text-fill: -icons-color;
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.6) , 1,0,0,1 );
}
As the .awesome style-class is assigned to the label, that contains the iconfont character.
Thank you for quick reply – but it doesn’t work:
FXML:
Controller:
@FXML
private Button button;
AwesomeDude.setIcon(button, AwesomeIcon.TOGGLE_DOWN,”2em”);
Stylesheet:
.root {
-icons-color: rgb(81,17,194);
}
.button{
-fx-font-family: FontAwesome;
-fx-text-fill: -icons-color;
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.6) , 1,0,0,1 );
}
The icon is displayed in black without any effect.
Any idea ?
Several options:
– “.awesome” instead of “.button” in your code -> to style *all* font-awesome icons
– “.button .awesome” -> to style *button*-icons only
OR
if you want a specific styling for different buttons, define a dedicated class:
.panic-button{
-icons-color: red;
}
-> make sure to assign this style class to the control.