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();
}
}
Great Work! Nice Blog!