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

NavigationButtons

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.

Leave a Reply to Jens Deters Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 thoughts on “FontAwesomeFX: 4.0.1 support”

  1. 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.

    1. 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.

  2. 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 ?

    1. 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.