Java tutorial
package com.porotype.iconfont; import com.vaadin.server.ExternalResource; import com.vaadin.server.Page; import com.vaadin.server.Resource; /** * Enables you to easily use the <a * href="http://fortawesome.github.io/Font-Awesome">FontAwesome</a> icon font to * easily embed scalable icons in any component that supports HTML content, * anywhere in said content. The icons are actually fonts, so the scale, and can * be colored, just as the rest of the text. * <p> * By default, {@link #load()} uses a CDN is used to host the font and CSS * "from the cloud", so you can very quickly get up-and-running. <br/> * For production, you might want to generate an optimized font w/o unused * icons, for instance using the <a href="http://icomoon.io/app/">IconMoon</a> * app. Deploy your icon-font (for instance in your theme) and point * {@link FontAwesome} to the CSS with {@link #load(Resource)}, e.g * <code>FontAwesome.load(new ThemeResource("font-awesome/css/font-awesome.min.css"));</code> * </p> * * @see http://fortawesome.github.io/Font-Awesome * @see http://fortawesome.github.io/Font-Awesome/#license * @see http://icomoon.io * @see http://cdnjs.com * @author marc * */ public class FontAwesome { public static final String CDN = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css"; public static void load() { load(new ExternalResource(CDN)); } /** * Loads the FontAwesome CSS, and thus actual font, from the given location. * <p> * <code> * FontAwesome.load(new ThemeResource("font-awesome/css/font-awesome.min.css")); * </code> * </p> * * @param fontAwesomeCss */ public static void load(Resource fontAwesomeCss) { Page.getCurrent().getStyles().add(fontAwesomeCss); } /** * Icon variant; multiple can be used, but all combinations do not make * sense. * * @author marc * */ public enum IconVariant { /** * A larger icon */ SIZE_LARGE("icon-large"), /** * 2x sized icon */ SIZE_2X("icon-2x"), /** * 3x sized icon */ SIZE_3X("icon-3x"), /** * 4x sized icon */ SIZE_4X("icon-4x"), /** * Spinning (animated) icon. Most useful with icons such as * {@link Icon#spinner}. */ SPIN("icon-spin"), /** * Adds a border around the icon */ BORDER("icon-border"), /** * For e.g for easy pull quotes or article graphics, with larger icons * next to text. */ PULL_LEFT("pull-left"), /** * For e.g for easy pull quotes or article graphics, with larger icons * next to text. */ PULL_RIGHT("pull-right"); private final String stylename; IconVariant(String stylename) { this.stylename = stylename; } @Override public String toString() { return stylename; } } /** * Font-Awesome icon. * <p> * The basic {@link #toString()} will produce HTML representing the regular * icon.<br/> * For variants, {@link #variant(IconVariant...)} can be used with one or * more {@link IconVariant}s.<br/> * For custom cases, the stylename is available via {@link #stylename()}. * </p> * <p> * Remember to {@link FontAwesome#load()} (or * {@link FontAwesome#load(Resource)}) first. * </p> * * @author marc * */ public enum Icon { glass(""), // music(""), // search(""), // envelope(""), // heart(""), // star(""), // star_empty(""), // user(""), // film(""), // th_large(""), // th(""), // th_list(""), // ok(""), // remove(""), // zoom_in(""), // zoom_out(""), // off(""), // signal(""), // cog(""), // trash(""), // home(""), // file(""), // time(""), // road(""), // download_alt(""), // download(""), // upload(""), // inbox(""), // play_circle(""), // repeat(""), // /*  doesn't work in Safari. all shifted one down */ refresh(""), // list_alt(""), // lock(""), // flag(""), // headphones(""), // volume_off(""), // volume_down(""), // volume_up(""), // qrcode(""), // barcode(""), // tag(""), // tags(""), // book(""), // bookmark(""), // print(""), // camera(""), // font(""), // bold(""), // italic(""), // text_height(""), // text_width(""), // align_left(""), // align_center(""), // align_right(""), // align_justify(""), // list(""), // indent_left(""), // indent_right(""), // facetime_video(""), // picture(""), // pencil(""), // map_marker(""), // adjust(""), // tint(""), // edit(""), // share(""), // check(""), // move(""), // step_backward(""), // fast_backward(""), // backward(""), // play(""), // pause(""), // stop(""), // forward(""), // fast_forward(""), // step_forward(""), // eject(""), // chevron_left(""), // chevron_right(""), // plus_sign(""), // minus_sign(""), // remove_sign(""), // ok_sign(""), // question_sign(""), // info_sign(""), // screenshot(""), // remove_circle(""), // ok_circle(""), // ban_circle(""), // arrow_left(""), // arrow_right(""), // arrow_up(""), // arrow_down(""), // share_alt(""), // resize_full(""), // resize_small(""), // plus(""), // minus(""), // asterisk(""), // exclamation_sign(""), // gift(""), // leaf(""), // fire(""), // eye_open(""), // eye_close(""), // warning_sign(""), // plane(""), // calendar(""), // random(""), // comment(""), // magnet(""), // chevron_up(""), // chevron_down(""), // retweet(""), // shopping_cart(""), // folder_close(""), // folder_open(""), // resize_vertical(""), // resize_horizontal(""), // bar_chart(""), // twitter_sign(""), // facebook_sign(""), // camera_retro(""), // key(""), // cogs(""), // comments(""), // thumbs_up(""), // thumbs_down(""), // star_half(""), // heart_empty(""), // signout(""), // linkedin_sign(""), // pushpin(""), // external_link(""), // signin(""), // trophy(""), // github_sign(""), // upload_alt(""), // lemon(""), // phone(""), // check_empty(""), // bookmark_empty(""), // phone_sign(""), // twitter(""), // facebook(""), // github(""), // unlock(""), // credit_card(""), // rss(""), // hdd(""), // bullhorn(""), // bell(""), // certificate(""), // hand_right(""), // hand_left(""), // hand_up(""), // hand_down(""), // circle_arrow_left(""), // circle_arrow_right(""), // circle_arrow_up(""), // circle_arrow_down(""), // globe(""), // wrench(""), // tasks(""), // filter(""), // briefcase(""), // fullscreen(""), // group(""), // link(""), // cloud(""), // beaker(""), // cut(""), // copy(""), // paper_clip(""), // save(""), // sign_blank(""), // reorder(""), // list_ul(""), // list_ol(""), // strikethrough(""), // underline(""), // table(""), // magic(""), // truck(""), // pinterest(""), // pinterest_sign(""), // google_plus_sign(""), // google_plus(""), // money(""), // caret_down(""), // caret_up(""), // caret_left(""), // caret_right(""), // columns(""), // sort(""), // sort_down(""), // sort_up(""), // envelope_alt(""), // linkedin(""), // undo(""), // legal(""), // dashboard(""), // comment_alt(""), // comments_alt(""), // bolt(""), // sitemap(""), // umbrella(""), // paste(""), // lightbulb(""), // exchange(""), // cloud_download(""), // cloud_upload(""), // user_md(""), // stethoscope(""), // suitcase(""), // bell_alt(""), // coffee(""), // food(""), // file_alt(""), // building(""), // hospital(""), // ambulance(""), // medkit(""), // fighter_jet(""), // beer(""), // h_sign(""), // plus_sign_alt(""), // double_angle_left(""), // double_angle_right(""), // double_angle_up(""), // double_angle_down(""), // angle_left(""), // angle_right(""), // angle_up(""), // angle_down(""), // desktop(""), // laptop(""), // tablet(""), // mobile_phone(""), // circle_blank(""), // quote_left(""), // quote_right(""), // spinner(""), // circle(""), // reply(""), // github_alt(""), // folder_close_alt(""), // folder_open_alt(""); private final String id; private Icon(String id) { this.id = id; } @Override public String toString() { return variant(); } /** * Gets the character entity used for this {@link Icon}. * * @return character entity */ public String id() { return id; } /** * Gets the stylename used for this {@link Icon}. * * @return the icon stylename */ public String stylename() { return "icon-" + name().replaceAll("_", "-"); } /** * Gets the icon HTML with the given {@link IconVariant}s added. * <p> * Multiple {@link IconVariant}s can be used, but all combinations do * not make sense. * </p> * * @param variants * @return */ public String variant(IconVariant... variants) { String stylenames = stylename(); for (IconVariant v : variants) { stylenames += " " + v; } return "<i class=\"" + stylenames + "\"></i>"; } } }