Using ‘Font Awesome’ Icons with JavaFX

Refer for latest updates here.

Dave Gandy has created a incredible cool icon font called Font Awesome.

These font icons perfectly fit into JavaFX Apps as:

  • all these beautiful icons are scalable vector graphics
  • each icon (unicode character) can be styled with css
  • incredible lightweight (one font 249 icons)

Load the “Awesome Font”

Font.loadFont(App.class.getResource("/fonts/awesome.ttf").
            toExternalForm(), 12);

Assign Awesome Font by css
E.g. this is the “icons_blue.css” style:

.root{
  -icons-color: rgb(61,114,144);
}

.icons{
    -fx-font-family: FontAwesome;
    -fx-font-size: 16px;
    -fx-effect: innershadow( three-pass-box , derive(-icons-color,-70%) , 0.1em, 0.0 , 0.07em, 0.07em );
    -fx-text-fill: linear-gradient(to bottom, derive(-icons-color,20%) 10%, derive(-icons-color,-40%) 80%);
}

.icons:hover{
    -fx-effect: dropshadow( three-pass-box , derive(-icons-color,0%) , 0.01em, 0.0 , 0, 0);
}

Display the icon via its unicode character

The Font Awesome project contains a css file with a icon name / unicode character mapping:

....
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }
.icon-search:before               { content: "\f002"; }
.icon-envelope:before             { content: "\f003"; }
.icon-heart:before                { content: "\f004"; }
.icon-star:before                 { content: "\f005"; }
.icon-star-empty:before           { content: "\f006"; }
.icon-user:before                 { content: "\f007"; }
.icon-film:before                 { content: "\f008"; }
.icon-th-large:before             { content: "\f009"; }
....

AwesomeIcons
For a convenient usage in Java I created a simple similar mapping class:

public class AwesomeIcons
{

    private AwesomeIcons()
    {
        /* not needed*/
    }
    public static final String ICON_GLASS = "\uf000";
    public static final String ICON_MUSIC = "\uf001";
    public static final String ICON_SEARCH = "\uf002";
    public static final String ICON_ENVELOPE = "\uf003";
    public static final String ICON_HEART = "\uf004";
    public static final String ICON_STAR = "\uf005";
    public static final String ICON_STAR_EMPTY = "\uf006";
    public static final String ICON_USER = "\uf007";
    public static final String ICON_FILM = "\uf008";
    public static final String ICON_TH_LARGE = "\uf009";
    public static final String ICON_TH = "\uf00a";
    public static final String ICON_TH_LIST = "\uf00b";
    public static final String ICON_OK = "\uf00c";
    public static final String ICON_REMOVE = "\uf00d";
    public static final String ICON_ZOOM_IN = "\uf00e";
    public static final String ICON_ZOOM_OUT = "\uf010";
    public static final String ICON_OFF = "\uf011";
    public static final String ICON_SIGNAL = "\uf012";
    public static final String ICON_COG = "\uf013";
    public static final String ICON_TRASH = "\uf014";
    public static final String ICON_HOME = "\uf015";
    public static final String ICON_FILE = "\uf016";
    public static final String ICON_TIME = "\uf017";
    public static final String ICON_ROAD = "\uf018";
    public static final String ICON_DOWNLOAD_ALT = "\uf019";
    public static final String ICON_DOWNLOAD = "\uf01a";
    public static final String ICON_UPLOAD = "\uf01b";
    public static final String ICON_INBOX = "\uf01c";
    public static final String ICON_PLAY_CIRCLE = "\uf01d";
    public static final String ICON_REPEAT = "\uf01e";
    public static final String ICON_REFRESH = "\uf021";
    public static final String ICON_LIST_ALT = "\uf022";
    public static final String ICON_LOCK = "\uf023";
    public static final String ICON_FLAG = "\uf024";
    public static final String ICON_HEADPHONES = "\uf025";
    public static final String ICON_VOLUME_OFF = "\uf026";
    public static final String ICON_VOLUME_DOWN = "\uf027";
    public static final String ICON_VOLUME_UP = "\uf028";
    public static final String ICON_QRCODE = "\uf029";
    public static final String ICON_BARCODE = "\uf02a";
    public static final String ICON_TAG = "\uf02b";
    public static final String ICON_TAGS = "\uf02c";
    public static final String ICON_BOOK = "\uf02d";
    public static final String ICON_BOOKMARK = "\uf02e";
    public static final String ICON_PRINT = "\uf02f";
    public static final String ICON_CAMERA = "\uf030";
    public static final String ICON_FONT = "\uf031";
    public static final String ICON_BOLD = "\uf032";
    public static final String ICON_ITALIC = "\uf033";
    public static final String ICON_TEXT_HEIGHT = "\uf034";
    public static final String ICON_TEXT_WIDTH = "\uf035";
    public static final String ICON_ALIGN_LEFT = "\uf036";
    public static final String ICON_ALIGN_CENTER = "\uf037";
    public static final String ICON_ALIGN_RIGHT = "\uf038";
    public static final String ICON_ALIGN_JUSTIFY = "\uf039";
    public static final String ICON_LIST = "\uf03a";
    public static final String ICON_INDENT_LEFT = "\uf03b";
    public static final String ICON_INDENT_RIGHT = "\uf03c";
    public static final String ICON_FACETIME_VIDEO = "\uf03d";
    public static final String ICON_PICTURE = "\uf03e";
    public static final String ICON_PENCIL = "\uf040";
    public static final String ICON_MAP_MARKER = "\uf041";
    public static final String ICON_ADJUST = "\uf042";
    public static final String ICON_TINT = "\uf043";
    public static final String ICON_EDIT = "\uf044";
    public static final String ICON_SHARE = "\uf045";
    public static final String ICON_CHECK = "\uf046";
    public static final String ICON_MOVE = "\uf047";
    public static final String ICON_STEP_BACKWARD = "\uf048";
    public static final String ICON_FAST_BACKWARD = "\uf049";
    public static final String ICON_BACKWARD = "\uf04a";
    public static final String ICON_PLAY = "\uf04b";
    public static final String ICON_PAUSE = "\uf04c";
    public static final String ICON_STOP = "\uf04d";
    public static final String ICON_FORWARD = "\uf04e";
    public static final String ICON_FAST_FORWARD = "\uf050";
    public static final String ICON_STEP_FORWARD = "\uf051";
    public static final String ICON_EJECT = "\uf052";
    public static final String ICON_CHEVRON_LEFT = "\uf053";
    public static final String ICON_CHEVRON_RIGHT = "\uf054";
    public static final String ICON_PLUS_SIGN = "\uf055";
    public static final String ICON_MINUS_SIGN = "\uf056";
    public static final String ICON_REMOVE_SIGN = "\uf057";
    public static final String ICON_OK_SIGN = "\uf058";
    public static final String ICON_QUESTION_SIGN = "\uf059";
    public static final String ICON_INFO_SIGN = "\uf05a";
    public static final String ICON_SCREENSHOT = "\uf05b";
    public static final String ICON_REMOVE_CIRCLE = "\uf05c";
    public static final String ICON_OK_CIRCLE = "\uf05d";
    public static final String ICON_BAN_CIRCLE = "\uf05e";
    public static final String ICON_ARROW_LEFT = "\uf060";
    public static final String ICON_ARROW_RIGHT = "\uf061";
    public static final String ICON_ARROW_UP = "\uf062";
    public static final String ICON_ARROW_DOWN = "\uf063";
    public static final String ICON_SHARE_ALT = "\uf064";
    public static final String ICON_RESIZE_FULL = "\uf065";
    public static final String ICON_RESIZE_SMALL = "\uf066";
    public static final String ICON_PLUS = "\uf067";
    public static final String ICON_MINUS = "\uf068";
    public static final String ICON_ASTERISK = "\uf069";
    public static final String ICON_EXCLAMATION_SIGN = "\uf06a";
    public static final String ICON_GIFT = "\uf06b";
    public static final String ICON_LEAF = "\uf06c";
    public static final String ICON_FIRE = "\uf06d";
    public static final String ICON_EYE_OPEN = "\uf06e";
    public static final String ICON_EYE_CLOSE = "\uf070";
    public static final String ICON_WARNING_SIGN = "\uf071";
    public static final String ICON_PLANE = "\uf072";
    public static final String ICON_CALENDAR = "\uf073";
    public static final String ICON_RANDOM = "\uf074";
    public static final String ICON_COMMENT = "\uf075";
    public static final String ICON_MAGNET = "\uf076";
    public static final String ICON_CHEVRON_UP = "\uf077";
    public static final String ICON_CHEVRON_DOWN = "\uf078";
    public static final String ICON_RETWEET = "\uf079";
    public static final String ICON_SHOPPING_CART = "\uf07a";
    public static final String ICON_FOLDER_CLOSE = "\uf07b";
    public static final String ICON_FOLDER_OPEN = "\uf07c";
    public static final String ICON_RESIZE_VERTICAL = "\uf07d";
    public static final String ICON_RESIZE_HORIZONTAL = "\uf07e";
    public static final String ICON_BAR_CHART = "\uf080";
    public static final String ICON_TWITTER_SIGN = "\uf081";
    public static final String ICON_FACEBOOK_SIGN = "\uf082";
    public static final String ICON_CAMERA_RETRO = "\uf083";
    public static final String ICON_KEY = "\uf084";
    public static final String ICON_COGS = "\uf085";
    public static final String ICON_COMMENTS = "\uf086";
    public static final String ICON_THUMBS_UP = "\uf087";
    public static final String ICON_THUMBS_DOWN = "\uf088";
    public static final String ICON_STAR_HALF = "\uf089";
    public static final String ICON_HEART_EMPTY = "\uf08a";
    public static final String ICON_SIGNOUT = "\uf08b";
    public static final String ICON_LINKEDIN_SIGN = "\uf08c";
    public static final String ICON_PUSHPIN = "\uf08d";
    public static final String ICON_EXTERNAL_LINK = "\uf08e";
    public static final String ICON_SIGNIN = "\uf090";
    public static final String ICON_TROPHY = "\uf091";
    public static final String ICON_GITHUB_SIGN = "\uf092";
    public static final String ICON_UPLOAD_ALT = "\uf093";
    public static final String ICON_LEMON = "\uf094";
    public static final String ICON_PHONE = "\uf095";
    public static final String ICON_CHECK_EMPTY = "\uf096";
    public static final String ICON_BOOKMARK_EMPTY = "\uf097";
    public static final String ICON_PHONE_SIGN = "\uf098";
    public static final String ICON_TWITTER = "\uf099";
    public static final String ICON_FACEBOOK = "\uf09a";
    public static final String ICON_GITHUB = "\uf09b";
    public static final String ICON_UNLOCK = "\uf09c";
    public static final String ICON_CREDIT_CARD = "\uf09d";
    public static final String ICON_RSS = "\uf09e";
    public static final String ICON_HDD = "\uf0a0";
    public static final String ICON_BULLHORN = "\uf0a1";
    public static final String ICON_BELL = "\uf0a2";
    public static final String ICON_CERTIFICATE = "\uf0a3";
    public static final String ICON_HAND_RIGHT = "\uf0a4";
    public static final String ICON_HAND_LEFT = "\uf0a5";
    public static final String ICON_HAND_UP = "\uf0a6";
    public static final String ICON_HAND_DOWN = "\uf0a7";
    public static final String ICON_CIRCLE_ARROW_LEFT = "\uf0a8";
    public static final String ICON_CIRCLE_ARROW_RIGHT = "\uf0a9";
    public static final String ICON_CIRCLE_ARROW_UP = "\uf0aa";
    public static final String ICON_CIRCLE_ARROW_DOWN = "\uf0ab";
    public static final String ICON_GLOBE = "\uf0ac";
    public static final String ICON_WRENCH = "\uf0ad";
    public static final String ICON_TASKS = "\uf0ae";
    public static final String ICON_FILTER = "\uf0b0";
    public static final String ICON_BRIEFCASE = "\uf0b1";
    public static final String ICON_FULLSCREEN = "\uf0b2";
    public static final String ICON_GROUP = "\uf0c0";
    public static final String ICON_LINK = "\uf0c1";
    public static final String ICON_CLOUD = "\uf0c2";
    public static final String ICON_BEAKER = "\uf0c3";
    public static final String ICON_CUT = "\uf0c4";
    public static final String ICON_COPY = "\uf0c5";
    public static final String ICON_PAPER_CLIP = "\uf0c6";
    public static final String ICON_SAVE = "\uf0c7";
    public static final String ICON_SIGN_BLANK = "\uf0c8";
    public static final String ICON_REORDER = "\uf0c9";
    public static final String ICON_LIST_UL = "\uf0ca";
    public static final String ICON_LIST_OL = "\uf0cb";
    public static final String ICON_STRIKETHROUGH = "\uf0cc";
    public static final String ICON_UNDERLINE = "\uf0cd";
    public static final String ICON_TABLE = "\uf0ce";
    public static final String ICON_MAGIC = "\uf0d0";
    public static final String ICON_TRUCK = "\uf0d1";
    public static final String ICON_PINTEREST = "\uf0d2";
    public static final String ICON_PINTEREST_SIGN = "\uf0d3";
    public static final String ICON_GOOGLE_PLUS_SIGN = "\uf0d4";
    public static final String ICON_GOOGLE_PLUS = "\uf0d5";
    public static final String ICON_MONEY = "\uf0d6";
    public static final String ICON_CARET_DOWN = "\uf0d7";
    public static final String ICON_CARET_UP = "\uf0d8";
    public static final String ICON_CARET_LEFT = "\uf0d9";
    public static final String ICON_CARET_RIGHT = "\uf0da";
    public static final String ICON_COLUMNS = "\uf0db";
    public static final String ICON_SORT = "\uf0dc";
    public static final String ICON_SORT_DOWN = "\uf0dd";
    public static final String ICON_SORT_UP = "\uf0de";
    public static final String ICON_ENVELOPE_ALT = "\uf0e0";
    public static final String ICON_LINKEDIN = "\uf0e1";
    public static final String ICON_UNDO = "\uf0e2";
    public static final String ICON_LEGAL = "\uf0e3";
    public static final String ICON_DASHBOARD = "\uf0e4";
    public static final String ICON_COMMENT_ALT = "\uf0e5";
    public static final String ICON_COMMENTS_ALT = "\uf0e6";
    public static final String ICON_BOLT = "\uf0e7";
    public static final String ICON_SITEMAP = "\uf0e8";
    public static final String ICON_UMBRELLA = "\uf0e9";
    public static final String ICON_PASTE = "\uf0ea";
    public static final String ICON_LIGHTBULB = "\uf0eb";
    public static final String ICON_EXCHANGE = "\uf0ec";
    public static final String ICON_CLOUD_DOWNLOAD = "\uf0ed";
    public static final String ICON_CLOUD_UPLOAD = "\uf0ee";
    public static final String ICON_USER_MD = "\uf0f0";
    public static final String ICON_STETHOSCOPE = "\uf0f1";
    public static final String ICON_SUITCASE = "\uf0f2";
    public static final String ICON_BELL_ALT = "\uf0f3";
    public static final String ICON_COFFEE = "\uf0f4";
    public static final String ICON_FOOD = "\uf0f5";
    public static final String ICON_FILE_ALT = "\uf0f6";
    public static final String ICON_BUILDING = "\uf0f7";
    public static final String ICON_HOSPITAL = "\uf0f8";
    public static final String ICON_AMBULANCE = "\uf0f9";
    public static final String ICON_MEDKIT = "\uf0fa";
    public static final String ICON_FIGHTER_JET = "\uf0fb";
    public static final String ICON_BEER = "\uf0fc";
    public static final String ICON_H_SIGN = "\uf0fd";
    public static final String ICON_PLUS_SIGN_ALT = "\uf0fe";
    public static final String ICON_DOUBLE_ANGLE_LEFT = "\uf100";
    public static final String ICON_DOUBLE_ANGLE_RIGHT = "\uf101";
    public static final String ICON_DOUBLE_ANGLE_UP = "\uf102";
    public static final String ICON_DOUBLE_ANGLE_DOWN = "\uf103";
    public static final String ICON_ANGLE_LEFT = "\uf104";
    public static final String ICON_ANGLE_RIGHT = "\uf105";
    public static final String ICON_ANGLE_UP = "\uf106";
    public static final String ICON_ANGLE_DOWN = "\uf107";
    public static final String ICON_DESKTOP = "\uf108";
    public static final String ICON_LAPTOP = "\uf109";
    public static final String ICON_TABLET = "\uf10a";
    public static final String ICON_MOBILE_PHONE = "\uf10b";
    public static final String ICON_CIRCLE_BLANK = "\uf10c";
    public static final String ICON_QUOTE_LEFT = "\uf10d";
    public static final String ICON_QUOTE_RIGHT = "\uf10e";
    public static final String ICON_SPINNER = "\uf110";
    public static final String ICON_CIRCLE = "\uf111";
    public static final String ICON_REPLY = "\uf112";
    public static final String ICON_GITHUB_ALT = "\uf113";
    public static final String ICON_FOLDER_CLOSE_ALT = "\uf114";
    public static final String ICON_FOLDER_OPEN_ALT = "\uf115";
}

AwesomeFactory

By now AwesomeFactory basically provides 2 method to create an icon Label and an icon Button:

Label pictureLabel = AwesomeDude
             .createIconLabel(AwesomeIcons.ICON_PICTURE, 32);

Button refreshButton = AwesomeDude
            .createIconButton(AwesomeIcons.ICON_REFRESH, "Refresh");

The default css style will be automatically assigned by these methods.
Other themes/styles can be set by overwriting the icons class.

An this is the AwesomeDude:

public class AwesomeDude
{

    public static Button createIconButton(String iconName)
    {
        return createIconButton(iconName, "", 16);
    }

    public static Button createIconButton(String iconName, String text)
    {
        return createIconButton(iconName, text, 16);
    }

    public static Button createIconButton(String iconName, int iconSize)
    {
        return createIconButton(iconName, "", iconSize);
    }

    public static Button createIconButton(String iconName, String text, int iconSize)
    {
        Label icon = createIconLabel(iconName);
        icon.setStyle("-fx-font-size: " + iconSize + "px;");
        return ButtonBuilder.create()
                .text(text)
                .graphic(icon)
                .build();
    }

    public static Label createIconLabel(String iconName, String style)
    {
        return LabelBuilder.create()
                .text(iconName)
                .style(style)
                .build();
    }

    public static Label createIconLabel(String iconName)
    {
        return createIconLabel(iconName, 16);
    }

    public static Label createIconLabel(String iconName, int iconSize)
    {
        return LabelBuilder.create()
                .text(iconName)
                .styleClass("icons")
                .style("-fx-font-size: " + iconSize + "px;")
                .build();
    }
}

2 thoughts on “Using ‘Font Awesome’ Icons with JavaFX

  1. Pingback: JavaFX links of the week, February 24 // JavaFX News, Demos and Insight // FX Experience