1. Introduction
Zurb’s Foundation Icon Fonts 3 gives you scalable vector icons that can instantly be customized. This plugin enables toolkit specific icon support.
Currently supported Foundation version is 3.0.
Griffon version: 2.3.0
2. Usage
2.1. Swing
The griffon-foundation-swing:1.1.0 JAR provides a new Icon class: griffon.swing.support.foundation.FoundationIcon.
You may use this class with any Swing component that supports an Icon property.
2.2. JavaFX
The griffon-foundation-javafx:1.1.0 JAR provides a new Node class: griffon.javafx.support.foundation.FoundationIcon.
You may use this class with any JavaFX control that accepts a graphic property. You may also use the icon directly as
it is a subclass of javafx.scene.control.Label. The icon class can be used inside an FXML file too.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<?import griffon.javafx.support.foundation.FoundationIcon?>
<GridPane prefHeight="60.0" prefWidth="200.0"
xmlns:fx="http://javafx.com/fxml"
fx:controller="org.example.AppController">
<children>
<Button fx:id="preferencesActionTarget"
GridPane.columnIndex="0" GridPane.rowIndex="0"
mnemonicParsing="false"
prefWidth="200.0">
<graphic>
<FoundationIcon foundation="FI_STAR"/>
</graphic>
</Button>
</children>
</GridPane>The JavaFX icon requires the usage of the Foundation enum value.
2.3. Action Resources
Action icons can be set using resources files if the following format is used:
iconClassName|name:size:colorsize and color are optional.
Here’s an example using the Swing icon
org.example.AppController.action.Preferences.small_icon=griffon.swing.support.foundation.FoundationIcon|fi-starThe JavaFX version for the same icon value is
org.example.AppController.action.Preferences.icon=griffon.javafx.support.foundation.FoundationIcon|fi-star3. Configuration
The plugin delivers artifacts for both Swing and JavaFX. It also contains Groovy enhancements that can be used in combination with the respective UI toolkit DSL (SwingBuilder and GroovyFX).
3.1. Gradle
You have two options for configuring this plugin: automatic and manual.
3.1.1. Automatic
As long as the project has the org.codehaus.griffon.griffon plugin applied to it you
may include the following snippet in build.gradle
dependencies {
griffon 'org.codehaus.griffon.plugins:griffon-foundation-plugin:1.1.0'
}The griffon plugin will take care of the rest given its configuration.
3.1.2. Manual
You will need to configure any of the following blocks depending on your setup
dependencies {
compile 'org.codehaus.griffon.plugins:griffon-foundation-swing:1.1.0'
}dependencies {
compile 'org.codehaus.griffon.plugins:griffon-foundation-javafx:1.1.0'
}dependencies {
compile 'org.codehaus.griffon.plugins:griffon-foundation-swing-groovy:1.1.0'
}dependencies {
compile 'org.codehaus.griffon.plugins:griffon-foundation-javafx-groovy:1.1.0'
}3.2. Maven
First configure the griffon-foundation-plugin BOM in your POM file, by placing the following
snippet before the <build> element
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.codehaus.griffon.plugins</groupId>
<artifactId>griffon-foundation-plugin</artifactId>
<version>1.1.0</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>Next configure dependencies as required by your particular setup
<dependency>
<groupId>org.codehaus.griffon.plugins</groupId>
<artifactId>griffon-foundation-swing</artifactId>
</dependency><dependency>
<groupId>org.codehaus.griffon.plugins</groupId>
<artifactId>griffon-foundation-javafx</artifactId>
</dependency><dependency>
<groupId>org.codehaus.griffon.plugins</groupId>
<artifactId>griffon-foundation-swing-groovy</artifactId>
</dependency><dependency>
<groupId>org.codehaus.griffon.plugins</groupId>
<artifactId>griffon-foundation-javafx-groovy</artifactId>
</dependency>4. Modules
The following sections display all bindings per module. Use this information to successfully override a binding on your own modules or to troubleshoot a module binding if the wrong type has been applied by the Griffon runtime.
4.1. JavaFX
Module name: foundation-javafx-groovy
Depends on: javafx-groovy
bind(BuilderCustomizer.class)
.to(FoundationJavaFXBuilderCustomizer.class)
.asSingleton();The following nodes will become available on a Groovy View
| Node | Type |
|---|---|
foundationIcon |
6. Icon Cheat Sheet
The following tables show all available icons.
| Enum | Name | Icon |
|---|---|---|
FI_ADDRESS_BOOK |
fi-address-book |
|
FI_ALERT |
fi-alert |
|
FI_ALIGN_CENTER |
fi-align-center |
|
FI_ALIGN_JUSTIFY |
fi-align-justify |
|
FI_ALIGN_LEFT |
fi-align-left |
|
FI_ALIGN_RIGHT |
fi-align-right |
|
FI_ANCHOR |
fi-anchor |
|
FI_ANNOTATE |
fi-annotate |
|
FI_ARCHIVE |
fi-archive |
|
FI_ARROW_DOWN |
fi-arrow-down |
|
FI_ARROW_LEFT |
fi-arrow-left |
|
FI_ARROW_RIGHT |
fi-arrow-right |
|
FI_ARROW_UP |
fi-arrow-up |
|
FI_ARROWS_COMPRESS |
fi-arrows-compress |
|
FI_ARROWS_EXPAND |
fi-arrows-expand |
|
FI_ARROWS_IN |
fi-arrows-in |
|
FI_ARROWS_OUT |
fi-arrows-out |
|
FI_ASL |
fi-asl |
|
FI_ASTERISK |
fi-asterisk |
|
FI_AT_SIGN |
fi-at-sign |
|
FI_BACKGROUND_COLOR |
fi-background-color |
|
FI_BATTERY_EMPTY |
fi-battery-empty |
|
FI_BATTERY_FULL |
fi-battery-full |
|
FI_BATTERY_HALF |
fi-battery-half |
|
FI_BITCOIN_CIRCLE |
fi-bitcoin-circle |
|
FI_BITCOIN |
fi-bitcoin |
|
FI_BLIND |
fi-blind |
|
FI_BLUETOOTH |
fi-bluetooth |
|
FI_BOLD |
fi-bold |
|
FI_BOOK |
fi-book |
|
FI_BOOKMARK |
fi-bookmark |
|
FI_BRAILLE |
fi-braille |
|
FI_BURST_NEW |
fi-burst-new |
|
FI_BURST_SALE |
fi-burst-sale |
|
FI_BURST |
fi-burst |
|
FI_CALENDAR |
fi-calendar |
|
FI_CAMERA |
fi-camera |
|
FI_CHECK |
fi-check |
|
FI_CHECKBOX |
fi-checkbox |
|
FI_CLIPBOARD_NOTES |
fi-clipboard-notes |
|
FI_CLIPBOARD_PENCIL |
fi-clipboard-pencil |
|
FI_CLIPBOARD |
fi-clipboard |
|
FI_CLOCK |
fi-clock |
|
FI_CLOSED_CAPTION |
fi-closed-caption |
|
FI_CLOUD |
fi-cloud |
|
FI_COMMENT_MINUS |
fi-comment-minus |
|
FI_COMMENT_QUOTES |
fi-comment-quotes |
|
FI_COMMENT_VIDEO |
fi-comment-video |
|
FI_COMMENT |
fi-comment |
|
FI_COMMENTS |
fi-comments |
|
FI_COMPASS |
fi-compass |
|
FI_CONTRAST |
fi-contrast |
|
FI_CREDIT_CARD |
fi-credit-card |
|
FI_CROP |
fi-crop |
|
FI_CROWN |
fi-crown |
|
FI_CSS3 |
fi-css3 |
|
FI_DATABASE |
fi-database |
|
FI_DIE_FIVE |
fi-die-five |
|
FI_DIE_FOUR |
fi-die-four |
|
FI_DIE_ONE |
fi-die-one |
|
FI_DIE_SIX |
fi-die-six |
|
FI_DIE_THREE |
fi-die-three |
|
FI_DIE_TWO |
fi-die-two |
|
FI_DISLIKE |
fi-dislike |
|
FI_DOLLAR_BILL |
fi-dollar-bill |
|
FI_DOLLAR |
fi-dollar |
|
FI_DOWNLOAD |
fi-download |
|
FI_EJECT |
fi-eject |
|
FI_ELEVATOR |
fi-elevator |
|
FI_EURO |
fi-euro |
|
FI_EYE |
fi-eye |
|
FI_FAST_FORWARD |
fi-fast-forward |
|
FI_FEMALE_SYMBOL |
fi-female-symbol |
|
FI_FEMALE |
fi-female |
|
FI_FILTER |
fi-filter |
|
FI_FIRST_AID |
fi-first-aid |
|
FI_FLAG |
fi-flag |
|
FI_FOLDER_ADD |
fi-folder-add |
|
FI_FOLDER_LOCK |
fi-folder-lock |
|
FI_FOLDER |
fi-folder |
|
FI_FOOT |
fi-foot |
|
FI_FOUNDATION |
fi-foundation |
|
FI_GRAPH_BAR |
fi-graph-bar |
|
FI_GRAPH_HORIZONTAL |
fi-graph-horizontal |
|
FI_GRAPH_PIE |
fi-graph-pie |
|
FI_GRAPH_TREND |
fi-graph-trend |
|
FI_GUIDE_DOG |
fi-guide-dog |
|
FI_HEARING_AID |
fi-hearing-aid |
|
FI_HEART |
fi-heart |
|
FI_HOME |
fi-home |
|
FI_HTML5 |
fi-html5 |
|
FI_INDENT_LESS |
fi-indent-less |
|
FI_INDENT_MORE |
fi-indent-more |
|
FI_INFO |
fi-info |
|
FI_ITALIC |
fi-italic |
|
FI_KEY |
fi-key |
|
FI_LAPTOP |
fi-laptop |
|
FI_LAYOUT |
fi-layout |
|
FI_LIGHTBULB |
fi-lightbulb |
|
FI_LIKE |
fi-like |
|
FI_LINK |
fi-link |
|
FI_LIST_BULLET |
fi-list-bullet |
|
FI_LIST_NUMBER |
fi-list-number |
|
FI_LIST_THUMBNAILS |
fi-list-thumbnails |
|
FI_LIST |
fi-list |
|
FI_LOCK |
fi-lock |
|
FI_LOOP |
fi-loop |
|
FI_MAGNIFYING_GLASS |
fi-magnifying-glass |
|
FI_MAIL |
fi-mail |
|
FI_MALE_FEMALE |
fi-male-female |
|
FI_MALE_SYMBOL |
fi-male-symbol |
|
FI_MALE |
fi-male |
|
FI_MAP |
fi-map |
|
FI_MARKER |
fi-marker |
|
FI_MEGAPHONE |
fi-megaphone |
|
FI_MICROPHONE |
fi-microphone |
|
FI_MINUS_CIRCLE |
fi-minus-circle |
|
FI_MINUS |
fi-minus |
|
FI_MOBILE_SIGNAL |
fi-mobile-signal |
|
FI_MOBILE |
fi-mobile |
|
FI_MONITOR |
fi-monitor |
|
FI_MOUNTAINS |
fi-mountains |
|
FI_MUSIC |
fi-music |
|
FI_NEXT |
fi-next |
|
FI_NO_DOGS |
fi-no-dogs |
|
FI_NO_SMOKING |
fi-no-smoking |
|
FI_PAGE_ADD |
fi-page-add |
|
FI_PAGE_COPY |
fi-page-copy |
|
FI_PAGE_CSV |
fi-page-csv |
|
FI_PAGE_DELETE |
fi-page-delete |
|
FI_PAGE_DOC |
fi-page-doc |
|
FI_PAGE_EDIT |
fi-page-edit |
|
FI_PAGE_EXPORT_CSV |
fi-page-export-csv |
|
FI_PAGE_EXPORT_DOC |
fi-page-export-doc |
|
FI_PAGE_EXPORT_PDF |
fi-page-export-pdf |
|
FI_PAGE_EXPORT |
fi-page-export |
|
FI_PAGE_FILLED |
fi-page-filled |
|
FI_PAGE_MULTIPLE |
fi-page-multiple |
|
FI_PAGE_PDF |
fi-page-pdf |
|
FI_PAGE_REMOVE |
fi-page-remove |
|
FI_PAGE_SEARCH |
fi-page-search |
|
FI_PAGE |
fi-page |
|
FI_PAINT_BUCKET |
fi-paint-bucket |
|
FI_PAPERCLIP |
fi-paperclip |
|
FI_PAUSE |
fi-pause |
|
FI_PAW |
fi-paw |
|
FI_PAYPAL |
fi-paypal |
|
FI_PENCIL |
fi-pencil |
|
FI_PHOTO |
fi-photo |
|
FI_PLAY_CIRCLE |
fi-play-circle |
|
FI_PLAY_VIDEO |
fi-play-video |
|
FI_PLAY |
fi-play |
|
FI_PLUS |
fi-plus |
|
FI_POUND |
fi-pound |
|
FI_POWER |
fi-power |
|
FI_PREVIOUS |
fi-previous |
|
FI_PRICE_TAG |
fi-price-tag |
|
FI_PRICETAG_MULTIPLE |
fi-pricetag-multiple |
|
FI_PRINT |
fi-print |
|
FI_PROHIBITED |
fi-prohibited |
|
FI_PROJECTION_SCREEN |
fi-projection-screen |
|
FI_PUZZLE |
fi-puzzle |
|
FI_QUOTE |
fi-quote |
|
FI_RECORD |
fi-record |
|
FI_REFRESH |
fi-refresh |
|
FI_RESULTS_DEMOGRAPHICS |
fi-results-demographics |
|
FI_RESULTS |
fi-results |
|
FI_REWIND_TEN |
fi-rewind-ten |
|
FI_REWIND |
fi-rewind |
|
FI_RSS |
fi-rss |
|
FI_SAFETY_CONE |
fi-safety-cone |
|
FI_SAVE |
fi-save |
|
FI_SHARE |
fi-share |
|
FI_SHERIFF_BADGE |
fi-sheriff-badge |
|
FI_SHIELD |
fi-shield |
|
FI_SHOPPING_BAG |
fi-shopping-bag |
|
FI_SHOPPING_CART |
fi-shopping-cart |
|
FI_SHUFFLE |
fi-shuffle |
|
FI_SKULL |
fi-skull |
|
FI_SOCIAL_500PX |
fi-social-500px |
|
FI_SOCIAL_ADOBE |
fi-social-adobe |
|
FI_SOCIAL_AMAZON |
fi-social-amazon |
|
FI_SOCIAL_ANDROID |
fi-social-android |
|
FI_SOCIAL_APPLE |
fi-social-apple |
|
FI_SOCIAL_BEHANCE |
fi-social-behance |
|
FI_SOCIAL_BING |
fi-social-bing |
|
FI_SOCIAL_BLOGGER |
fi-social-blogger |
|
FI_SOCIAL_DELICIOUS |
fi-social-delicious |
|
FI_SOCIAL_DESIGNER_NEWS |
fi-social-designer-news |
|
FI_SOCIAL_DEVIANT_ART |
fi-social-deviant-art |
|
FI_SOCIAL_DIGG |
fi-social-digg |
|
FI_SOCIAL_DRIBBBLE |
fi-social-dribbble |
|
FI_SOCIAL_DRIVE |
fi-social-drive |
|
FI_SOCIAL_DROPBOX |
fi-social-dropbox |
|
FI_SOCIAL_EVERNOTE |
fi-social-evernote |
|
FI_SOCIAL_FACEBOOK |
fi-social-facebook |
|
FI_SOCIAL_FLICKR |
fi-social-flickr |
|
FI_SOCIAL_FORRST |
fi-social-forrst |
|
FI_SOCIAL_FOURSQUARE |
fi-social-foursquare |
|
FI_SOCIAL_GAME_CENTER |
fi-social-game-center |
|
FI_SOCIAL_GITHUB |
fi-social-github |
|
FI_SOCIAL_GOOGLE_PLUS |
fi-social-google-plus |
|
FI_SOCIAL_HACKER_NEWS |
fi-social-hacker-news |
|
FI_SOCIAL_HI5 |
fi-social-hi5 |
|
FI_SOCIAL_INSTAGRAM |
fi-social-instagram |
|
FI_SOCIAL_JOOMLA |
fi-social-joomla |
|
FI_SOCIAL_LASTFM |
fi-social-lastfm |
|
FI_SOCIAL_LINKEDIN |
fi-social-linkedin |
|
FI_SOCIAL_MEDIUM |
fi-social-medium |
|
FI_SOCIAL_MYSPACE |
fi-social-myspace |
|
FI_SOCIAL_ORKUT |
fi-social-orkut |
|
FI_SOCIAL_PATH |
fi-social-path |
|
FI_SOCIAL_PICASA |
fi-social-picasa |
|
FI_SOCIAL_PINTEREST |
fi-social-pinterest |
|
FI_SOCIAL_RDIO |
fi-social-rdio |
|
FI_SOCIAL_REDDIT |
fi-social-reddit |
|
FI_SOCIAL_SKILLSHARE |
fi-social-skillshare |
|
FI_SOCIAL_SKYPE |
fi-social-skype |
|
FI_SOCIAL_SMASHING_MAG |
fi-social-smashing-mag |
|
FI_SOCIAL_SNAPCHAT |
fi-social-snapchat |
|
FI_SOCIAL_SPOTIFY |
fi-social-spotify |
|
FI_SOCIAL_SQUIDOO |
fi-social-squidoo |
|
FI_SOCIAL_STACK_OVERFLOW |
fi-social-stack-overflow |
|
FI_SOCIAL_STEAM |
fi-social-steam |
|
FI_SOCIAL_STUMBLEUPON |
fi-social-stumbleupon |
|
FI_SOCIAL_TREEHOUSE |
fi-social-treehouse |
|
FI_SOCIAL_TUMBLR |
fi-social-tumblr |
|
FI_SOCIAL_TWITTER |
fi-social-twitter |
|
FI_SOCIAL_VIMEO |
fi-social-vimeo |
|
FI_SOCIAL_WINDOWS |
fi-social-windows |
|
FI_SOCIAL_XBOX |
fi-social-xbox |
|
FI_SOCIAL_YAHOO |
fi-social-yahoo |
|
FI_SOCIAL_YELP |
fi-social-yelp |
|
FI_SOCIAL_YOUTUBE |
fi-social-youtube |
|
FI_SOCIAL_ZERPLY |
fi-social-zerply |
|
FI_SOCIAL_ZURB |
fi-social-zurb |
|
FI_SOUND |
fi-sound |
|
FI_STAR |
fi-star |
|
FI_STOP |
fi-stop |
|
FI_STRIKETHROUGH |
fi-strikethrough |
|
FI_SUBSCRIPT |
fi-subscript |
|
FI_SUPERSCRIPT |
fi-superscript |
|
FI_TABLET_LANDSCAPE |
fi-tablet-landscape |
|
FI_TABLET_PORTRAIT |
fi-tablet-portrait |
|
FI_TARGET_TWO |
fi-target-two |
|
FI_TARGET |
fi-target |
|
FI_TELEPHONE_ACCESSIBLE |
fi-telephone-accessible |
|
FI_TELEPHONE |
fi-telephone |
|
FI_TEXT_COLOR |
fi-text-color |
|
FI_THUMBNAILS |
fi-thumbnails |
|
FI_TICKET |
fi-ticket |
|
FI_TORSO_BUSINESS |
fi-torso-business |
|
FI_TORSO_FEMALE |
fi-torso-female |
|
FI_TORSO |
fi-torso |
|
FI_TORSOS_ALL_FEMALE |
fi-torsos-all-female |
|
FI_TORSOS_ALL |
fi-torsos-all |
|
FI_TORSOS_FEMALE_MALE |
fi-torsos-female-male |
|
FI_TORSOS_MALE_FEMALE |
fi-torsos-male-female |
|
FI_TORSOS |
fi-torsos |
|
FI_TRASH |
fi-trash |
|
FI_TREES |
fi-trees |
|
FI_TROPHY |
fi-trophy |
|
FI_UNDERLINE |
fi-underline |
|
FI_UNIVERSAL_ACCESS |
fi-universal-access |
|
FI_UNLINK |
fi-unlink |
|
FI_UNLOCK |
fi-unlock |
|
FI_UPLOAD_CLOUD |
fi-upload-cloud |
|
FI_UPLOAD |
fi-upload |
|
FI_USB |
fi-usb |
|
FI_VIDEO |
fi-video |
|
FI_VOLUME_NONE |
fi-volume-none |
|
FI_VOLUME_STRIKE |
fi-volume-strike |
|
FI_VOLUME |
fi-volume |
|
FI_WEB |
fi-web |
|
FI_WHEELCHAIR |
fi-wheelchair |
|
FI_WIDGET |
fi-widget |
|
FI_WRENCH |
fi-wrench |
|
FI_X_CIRCLE |
fi-x-circle |
|
FI_X |
fi-x |
|
FI_YEN |
fi-yen |
|
FI_ZOOM_IN |
fi-zoom-in |
|
FI_ZOOM_OUT |
fi-zoom-out |