Easily use scalable font icons (from the excellent Font Awesome) with Vaadin

Note that Vaadin comes with built-in FontIcon support since 7.2, making this version redundant. Look out for future updates!

FontIcon makes it super-simple to use scalable font icons in your Vaadin application. No widgetset recompile or theme modifications are required to get up-and-running; by default FontIcon loads the icons from a CDN (you can add the icons to your theme if you prefer).

The icon font currently supported is Font Awesome, the iconic font designed for use with Twitter Bootstrap.

Note that the regular Vaadin setIcon() etc is currently not supported, since an icon-font is not a Resource. Instead, the icons can be added anywhere where HTML is allowed, such as Button captions, Labels, tooltips etc. Just remember to enable HTML content (e.g Button.setHtmlContentAllowed(true)).

As the icons are actually text, they will adjust to the size, color, etc of the containing text. In addition, all the icons have a number of variants.

By default (when using FontAwesome.load()) the CSS and font is loaded from an online CDN, but you can host the font yourself. Just download Font Awesome and add it to your theme, then load it like so: FontAwesome.load(new ThemeResource("font-awesome/css/font-awesome.min.css"));

You can also create an optimized font with just the icons you need; for instance IconMoon is a service that makes that super easy.

The FontIcon code is Apache 2, while Font Awesome pictograms use CC BY 3.0 (no attribution required) and the actual font SIL Open Font License (see link for more info).

Install

Link to this version
BetaReleased 15 May 2013Apache License 2.0
Framework Support
Vaadin 7.1+
Browser Compatibility
8
9
Install with
Release notes - Version 7.1.1