Monday 23 November 2015

Using Font Awesome to build your own user controls in NativeScript

This tweet detailed how you can use FontAwesome in your Nativescript app.

All you need to do if copy the font into the app/fonts folder.

I thought I would use this to make some simple controls to demonstate what is possible.



Here is some example code for an image button, checkbox, radiobox, rating and tick button.

The checkbox, radiobox and rating can all bind to values and change when you tap them.

As outlined in the documentation, you need to make a reference to the custom control at the top of the page.

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:fa="helpers/faHelper" backgroundColor="gray">
  <StackLayout style="margin:10">
    <Label text="Font Awesome Demo" fontSize="30" color="white"/>
    <fa:CheckImage style="background-image:'~/res/drawingshigh/ex0001.jpg'"/>
    <fa:Label icon="fa_android" fontSize="25" label=" Android Demo"/>
    <fa:Label icon="fa_apple" fontSize="25" label=" Apple Demo"/>
    <GridLayout columns="*,*" rows="auto,auto,auto">
      <fa:CheckBox label=" Check On" fontSize="25" checkBoxSize="50" checked="true" row="0" col="0" />
      <fa:CheckBox label=" Check Off" fontSize="25" checkBoxSize="50" checked="false" row="0" col="1" />
      <fa:Radio label=" Radio On" fontSize="25" radioSize="50" checked="true" row="1" col="0"/>
      <fa:Radio label=" Radio Off" fontSize="25" radioSize="50" checked="false" row="1" col="1"/>
      <fa:Button label="Buy Coffee" icon="fa_coffee" fontSize="25" color="White" backgroundColor="black" style="margin:10" row="2" col="0" />
      <fa:Button label="Buy Gift" icon="fa_gift" fontSize="25" iconRight="true" color="White" backgroundColor="black" iconColor="green" style="margin:10" row="2" col="1" />
    </GridLayout>
    <fa:Rating value="3" maxValue="5" label=" Rating" labelSize="25" ratingSize="40"/>
  </StackLayout>
</Page>
Typescript code behind it is as below. Note there is a converter to allow you to use the standard FontAwesome icon names.

Note that there is a small bug with the way this works for spans. This is being worked on by Telerik.

Hopefully this may be useful to you and give you ideas what you can build yourself.
import label = require("ui/label");
import gestures = require("ui/gestures");
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import span = require("text/span");
import formattedString = require("text/formatted-string");
import button = require("ui/button");
import observableArray = require("data/observable-array");
import color = require("color");
import enums = require("ui/enums");
import stackLayout = require("ui/layouts/stack-layout");

function onCheckedCheckBoxPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var checkBox = <CheckBox>data.object;
    checkBox.setFields();
}

function onLabelCheckBoxPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var checkBox = <CheckBox>data.object;
    checkBox.setFields();
}

function onCheckBoxSizeCheckBoxPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var checkBox = <CheckBox>data.object;
    checkBox.setFields();
}

export class CheckBox extends label.Label {

    public static labelProperty = new dependencyObservable.Property(
        "label",
        "CheckBox",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onLabelCheckBoxPropertyChanged
        )
    );

    public static checkBoxSizeProperty = new dependencyObservable.Property(
        "checkBoxSize",
        "CheckBox",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onCheckBoxSizeCheckBoxPropertyChanged
        )
    );

    public static checkedProperty = new dependencyObservable.Property(
        "checked",
        "CheckBox",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onCheckedCheckBoxPropertyChanged
        )
    );

    constructor() {
        super();
        this.textWrap = true;
        this.style.fontFamily = "FontAwesome";
        this.observe(gestures.GestureTypes.tap, (args: gestures.GestureEventData) => {
            this.checked = !this.checked;
        });
    }

    public set checkBoxSize(value: number) {
        this._setValue(CheckBox.checkBoxSizeProperty, value);
    }

    public get checkBoxSize() {
        return this._getValue(CheckBox.checkBoxSizeProperty);
    }

    public set label(value: string) {
        this._setValue(CheckBox.labelProperty, value);
    }

    public get label() {
        return this._getValue(CheckBox.labelProperty);
    }

    public set checked(value: boolean) {
        this._setValue(CheckBox.checkedProperty, value);
    }

    public get checked() {
        return this._getValue(CheckBox.checkedProperty);
    }

    public setFields() {
        var textAdd = new formattedString.FormattedString();

        this.formattedText.spans = new observableArray.ObservableArray<span.Span>();
        var spanAdd = new span.Span();
        spanAdd.text = convertKeyHex(this.checked ? key.fa_square_o : key.fa_check_square_o);
        spanAdd.fontSize = this.checkBoxSize;
        textAdd.spans.push(spanAdd);

        spanAdd = new span.Span();
        spanAdd.text = this.label;
        spanAdd.fontSize = this.fontSize;
        textAdd.spans.push(spanAdd);

        this.formattedText = textAdd;
    }
}

function onCheckedRadioPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var radio = <Radio>data.object;
    radio.setFields();
}

function onLabelRadioPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var radio = <Radio>data.object;
    radio.setFields();
}

function onRadioSizeRadioPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var checkBox = <CheckBox>data.object;
    checkBox.setFields();
}

export class Radio extends label.Label {

    public static radioSizeProperty = new dependencyObservable.Property(
        "radioSize",
        "Radio",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onRadioSizeRadioPropertyChanged
        )
    );

    public static labelProperty = new dependencyObservable.Property(
        "label",
        "Radio",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onLabelRadioPropertyChanged
        )
    );

    public static checkedProperty = new dependencyObservable.Property(
        "checked",
        "Radio",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onCheckedRadioPropertyChanged
        )
    );

    constructor() {
        super();
        this.textWrap = true;
        this.style.fontFamily = "FontAwesome";
        this.observe(gestures.GestureTypes.tap, (args: gestures.GestureEventData) => {
            if (this.checked) {
                return;
            }
            this.checked = !this.checked;
        });
    }

    public set radioSize(value: number) {
        this._setValue(Radio.radioSizeProperty, value);
    }

    public get radioSize() {
        return this._getValue(Radio.radioSizeProperty);
    }

    public set label(value: string) {
        this._setValue(Radio.labelProperty, value);
    }

    public get label() {
        return this._getValue(Radio.labelProperty);
    }

    public set checked(value: boolean) {
        this._setValue(Radio.checkedProperty, value);
    }

    public get checked() {
        return this._getValue(Radio.checkedProperty);
    }

    public setFields() {
        var textAdd = new formattedString.FormattedString();

        this.formattedText.spans = new observableArray.ObservableArray<span.Span>();
        var spanAdd = new span.Span();
        spanAdd.text = convertKeyHex(this.checked ? key.fa_circle_o : key.fa_check_circle_o);
        spanAdd.fontSize = this.radioSize;
        textAdd.spans.push(spanAdd);

        spanAdd = new span.Span();
        spanAdd.text = this.label;
        spanAdd.fontSize = this.fontSize;
        textAdd.spans.push(spanAdd);

        this.formattedText = textAdd;
    }
}


function onMaxValueRatingPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var rating = <Rating>data.object;
    rating.setFields();
}

function onValueRatingPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var rating = <Rating>data.object;
    rating.setFields();
}

function onLabelRatingPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var rating = <Rating>data.object;
    rating.setFields();
}

function onLabelSizeRatingPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var rating = <Rating>data.object;
    rating.setFields();
}

function onRatingSizeRatingPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var rating = <Rating>data.object;
    rating.setFields();
}


export class Rating extends stackLayout.StackLayout {

    public static labelProperty = new dependencyObservable.Property(
        "label",
        "Rating",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onLabelRatingPropertyChanged
        )
    );

    public static valueProperty = new dependencyObservable.Property(
        "value",
        "Rating",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onValueRatingPropertyChanged
        )
    );

    public static labelSizeProperty = new dependencyObservable.Property(
        "labelSize",
        "Rating",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onLabelSizeRatingPropertyChanged
        )
    );

    public static ratingSizeProperty = new dependencyObservable.Property(
        "ratingSize",
        "Rating",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onRatingSizeRatingPropertyChanged
        )
    );

    public static maxValueProperty = new dependencyObservable.Property(
        "maxValue",
        "Rating",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onMaxValueRatingPropertyChanged
        )
    );

    constructor() {
        super();
        this.MaxValue = 5;
        this.Value = 3;
        this.RatingSize = 40;
        this.LabelSize = 25;
        this.orientation = enums.Orientation.horizontal;
    }

    public set Value(value: number) {
        this._setValue(Rating.valueProperty, value);
    }

    public get Value() {
        return this._getValue(Rating.valueProperty);
    }

    public set LabelSize(value: number) {
        this._setValue(Rating.labelSizeProperty, value);
    }

    public get LabelSize() {
        return this._getValue(Rating.labelSizeProperty);
    }

    public set RatingSize(value: number) {
        this._setValue(Rating.ratingSizeProperty, value);
    }

    public get RatingSize() {
        return this._getValue(Rating.ratingSizeProperty);
    }

    public set MaxValue(value: number) {
        this._setValue(Rating.maxValueProperty, value);
    }

    public get MaxValue() {
        return this._getValue(Rating.maxValueProperty);
    }

    public set label(value: string) {
        this._setValue(Rating.labelProperty, value);
    }

    public get label() {
        return this._getValue(Rating.labelProperty);
    }

    public setFields() {
        this.removeChildren()
        for (var i = 0, imax = this.MaxValue; i < imax; i++) {
            var labelAdd = new label.Label();
            labelAdd.style.fontFamily = "FontAwesome";
            labelAdd.text = convertKeyHex(i < this.Value ? key.fa_star : key.fa_star_o);
            labelAdd.fontSize = this.RatingSize;
            labelAdd.bindingContext = i+1;
            labelAdd.observe(gestures.GestureTypes.tap, (args: gestures.GestureEventData) => {
                this.Value = args.view.bindingContext;
            });
            this.addChild(labelAdd);
        }
        var labelAdd = new label.Label();
        labelAdd.fontSize = this.LabelSize;
        labelAdd.text = this.label;
        labelAdd.observe(gestures.GestureTypes.tap, (args: gestures.GestureEventData) => {
            this.Value = 0;
        });
        this.addChild(labelAdd);
    }
}

function onCheckedCheckImagePropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var radio = <CheckImage>data.object;
    radio.setFields();
}

export class CheckImage extends label.Label {

    public static checkedProperty = new dependencyObservable.Property(
        "checked",
        "CheckImage",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onCheckedCheckImagePropertyChanged
        )
    );

    constructor() {
        super();
        this.textWrap = true;
        this.style.fontFamily = "FontAwesome";
        this.style.backgroundImage = "~/res/drawingshigh/ex0001.jpg";
        this.style.backgroundRepeat = enums.BackgroundRepeat.noRepeat;
        this.style.backgroundSize ="100% 100%";
        this.textAlignment = enums.TextAlignment.center;
        this.horizontalAlignment = enums.HorizontalAlignment.center;
        this.verticalAlignment = enums.VerticalAlignment.center;
        this.style.fontSize = 150;
        this.style.width = 164;
        this.style.height = 200;
        this.style.padding = "1";
        this.style.margin = "1";
        this.style.color = new color.Color("Green");

        this.observe(gestures.GestureTypes.tap, (args: gestures.GestureEventData) => {
            this.checked = !this.checked;
        });
    }

    public set checked(value: boolean) {
        this._setValue(CheckImage.checkedProperty, value);
    }

    public get checked() {
        return this._getValue(CheckImage.checkedProperty);
    }

    public setFields() {
        this.text = this.checked ? convertKeyHex(key.fa_check) : "";
    }
}

function onLabelButtonPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Button>data.object;
    button.setFields();
}

function onIconButtonPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Button>data.object;
    button.setFields();
}

function onIconRightButtonPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Button>data.object;
    button.setFields();
}

function onIconColorButtonPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Button>data.object;
    button.setFields();
}

export class Button extends button.Button {

    public static labelProperty = new dependencyObservable.Property(
        "label",
        "Button",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onLabelButtonPropertyChanged
        )
    );

    public static iconProperty = new dependencyObservable.Property(
        "icon",
        "Button",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onIconButtonPropertyChanged
        )
    );

    public static iconRightProperty = new dependencyObservable.Property(
        "iconRight",
        "Button",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onIconRightButtonPropertyChanged
        )
    );

    public static iconColorProperty = new dependencyObservable.Property(
        "iconColor",
        "Button",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onIconColorButtonPropertyChanged
        )
    );

    public set icon(value: key) {
        this._setValue(Button.iconProperty, value);
    }

    public get icon() {
        return this._getValue(Button.iconProperty);
    }

    public set iconRight(value: boolean) {
        this._setValue(Button.iconRightProperty, value);
    }

    public get iconRight() {
        return this._getValue(Button.iconRightProperty);
    }

    public set iconColor(value: string) {
        this._setValue(Button.iconColorProperty,value);
    }

    public get iconColor() {
        return this._getValue(Button.iconColorProperty);
    }

    public set label(value: string) {
        this._setValue(Button.labelProperty, value);
    }

    public get label() {
        return this._getValue(Button.labelProperty);
    }

    constructor() {
        super();
        this.style.fontFamily = "FontAwesome";
        this.iconColor = "Red";
    }

    public setFields() {
        var spanAdd1 = new span.Span();
        spanAdd1.text = convertKeyHex(this.icon);
        spanAdd1.foregroundColor = new color.Color(this.iconColor);

        var spanAdd2 = new span.Span();
        spanAdd2.text = this.label;

        var textAdd = new formattedString.FormattedString();

        if (this.iconRight) {
            spanAdd2.text = spanAdd2.text + " ";
            textAdd.spans.push(spanAdd2);
            textAdd.spans.push(spanAdd1);
        } else {
            spanAdd2.text = " "+spanAdd2.text;
            textAdd.spans.push(spanAdd1);
            textAdd.spans.push(spanAdd2);
        }

        this.formattedText = textAdd;
    }
}

function onLabelLabelPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Label>data.object;
    button.setFields();
}

function onIconLabelPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Label>data.object;
    button.setFields();
}

function onIconRightLabelPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Label>data.object;
    button.setFields();
}

function onIconColorLabelPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var button = <Label>data.object;
    button.setFields();
}

export class Label extends label.Label {

    public static labelProperty = new dependencyObservable.Property(
        "label",
        "Label",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onLabelLabelPropertyChanged
        )
    );

    public static iconProperty = new dependencyObservable.Property(
        "icon",
        "Label",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onIconLabelPropertyChanged
        )
    );

    public static iconRightProperty = new dependencyObservable.Property(
        "iconRight",
        "Label",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onIconRightLabelPropertyChanged
        )
    );

    public static iconColorProperty = new dependencyObservable.Property(
        "iconColor",
        "Label",
        new proxy.PropertyMetadata(
            undefined,
            dependencyObservable.PropertyMetadataSettings.None,
            onIconColorLabelPropertyChanged
        )
    );

    public set icon(value: key) {
        this._setValue(Label.iconProperty, value);
    }

    public get icon() {
        return this._getValue(Label.iconProperty);
    }

    public set iconRight(value: boolean) {
        this._setValue(Label.iconRightProperty, value);
    }

    public get iconRight() {
        return this._getValue(Label.iconRightProperty);
    }

    public set iconColor(value: color.Color) {
        this._setValue(Label.iconColorProperty, value);
    }

    public get iconColor() {
        return this._getValue(Label.iconColorProperty);
    }

    public set label(value: string) {
        this._setValue(Label.labelProperty, value);
    }

    public get label() {
        return this._getValue(Label.labelProperty);
    }

    constructor() {
        super();
        this.iconColor = new color.Color("White");
        this.textWrap = true;
        this.style.fontFamily = "FontAwesome";
    }

    public setFields() {
        var spanAdd1 = new span.Span();
        spanAdd1.text = convertKeyHex(this.icon);
        spanAdd1.foregroundColor = this.iconColor;
        spanAdd1.fontSize = 50;

        var spanAdd2 = new span.Span();
        spanAdd2.text = this.label;

        var textAdd = new formattedString.FormattedString();

        if (this.iconRight) {
            textAdd.spans.push(spanAdd2);
            textAdd.spans.push(spanAdd1);
        } else {
            textAdd.spans.push(spanAdd1);
            textAdd.spans.push(spanAdd2);
        }

        this.formattedText = textAdd;
    }
}


export function convertKeyHex(value: key | string) {
    var valueOut = convertKey(value);
    return String.fromCharCode(parseInt(valueOut, 16));
}

export enum key {
    fa_500px,
    fa_adjust,
    fa_adn,
    fa_align_center,
    fa_align_justify,
    fa_align_left,
    fa_align_right,
    fa_amazon,
    fa_ambulance,
    fa_anchor,
    fa_android,
    fa_angellist,
    fa_angle_double_down,
    fa_angle_double_left,
    fa_angle_double_right,
    fa_angle_double_up,
    fa_angle_down,
    fa_angle_left,
    fa_angle_right,
    fa_angle_up,
    fa_apple,
    fa_archive,
    fa_area_chart,
    fa_arrow_circle_down,
    fa_arrow_circle_left,
    fa_arrow_circle_o_down,
    fa_arrow_circle_o_left,
    fa_arrow_circle_o_right,
    fa_arrow_circle_o_up,
    fa_arrow_circle_right,
    fa_arrow_circle_up,
    fa_arrow_down,
    fa_arrow_left,
    fa_arrow_right,
    fa_arrow_up,
    fa_arrows,
    fa_arrows_alt,
    fa_arrows_h,
    fa_arrows_v,
    fa_asterisk,
    fa_at,
    fa_automobile,
    fa_backward,
    fa_balance_scale,
    fa_ban,
    fa_bank,
    fa_bar_chart,
    fa_bar_chart_o,
    fa_barcode,
    fa_bars,
    fa_battery_0,
    fa_battery_1,
    fa_battery_2,
    fa_battery_3,
    fa_battery_4,
    fa_battery_empty,
    fa_battery_full,
    fa_battery_half,
    fa_battery_quarter,
    fa_battery_three_quarters,
    fa_bed,
    fa_beer,
    fa_behance,
    fa_behance_square,
    fa_bell,
    fa_bell_o,
    fa_bell_slash,
    fa_bell_slash_o,
    fa_bicycle,
    fa_binoculars,
    fa_birthday_cake,
    fa_bitbucket,
    fa_bitbucket_square,
    fa_bitcoin,
    fa_black_tie,
    fa_bold,
    fa_bolt,
    fa_bomb,
    fa_book,
    fa_bookmark,
    fa_bookmark_o,
    fa_briefcase,
    fa_btc,
    fa_bug,
    fa_building,
    fa_building_o,
    fa_bullhorn,
    fa_bullseye,
    fa_bus,
    fa_buysellads,
    fa_cab,
    fa_calculator,
    fa_calendar,
    fa_calendar_check_o,
    fa_calendar_minus_o,
    fa_calendar_o,
    fa_calendar_plus_o,
    fa_calendar_times_o,
    fa_camera,
    fa_camera_retro,
    fa_car,
    fa_caret_down,
    fa_caret_left,
    fa_caret_right,
    fa_caret_square_o_down,
    fa_caret_square_o_left,
    fa_caret_square_o_right,
    fa_caret_square_o_up,
    fa_caret_up,
    fa_cart_arrow_down,
    fa_cart_plus,
    fa_cc,
    fa_cc_amex,
    fa_cc_diners_club,
    fa_cc_discover,
    fa_cc_jcb,
    fa_cc_mastercard,
    fa_cc_paypal,
    fa_cc_stripe,
    fa_cc_visa,
    fa_certificate,
    fa_chain,
    fa_chain_broken,
    fa_check,
    fa_check_circle,
    fa_check_circle_o,
    fa_check_square,
    fa_check_square_o,
    fa_chevron_circle_down,
    fa_chevron_circle_left,
    fa_chevron_circle_right,
    fa_chevron_circle_up,
    fa_chevron_down,
    fa_chevron_left,
    fa_chevron_right,
    fa_chevron_up,
    fa_child,
    fa_chrome,
    fa_circle,
    fa_circle_o,
    fa_circle_o_notch,
    fa_circle_thin,
    fa_clipboard,
    fa_clock_o,
    fa_clone,
    fa_close,
    fa_cloud,
    fa_cloud_download,
    fa_cloud_upload,
    fa_cny,
    fa_code,
    fa_code_fork,
    fa_codepen,
    fa_coffee,
    fa_cog,
    fa_cogs,
    fa_columns,
    fa_comment,
    fa_comment_o,
    fa_commenting,
    fa_commenting_o,
    fa_comments,
    fa_comments_o,
    fa_compass,
    fa_compress,
    fa_connectdevelop,
    fa_contao,
    fa_copy,
    fa_copyright,
    fa_creative_commons,
    fa_credit_card,
    fa_crop,
    fa_crosshairs,
    fa_css3,
    fa_cube,
    fa_cubes,
    fa_cut,
    fa_cutlery,
    fa_dashboard,
    fa_dashcube,
    fa_database,
    fa_dedent,
    fa_delicious,
    fa_desktop,
    fa_deviantart,
    fa_diamond,
    fa_digg,
    fa_dollar,
    fa_dot_circle_o,
    fa_download,
    fa_dribbble,
    fa_dropbox,
    fa_drupal,
    fa_edit,
    fa_eject,
    fa_ellipsis_h,
    fa_ellipsis_v,
    fa_empire,
    fa_envelope,
    fa_envelope_o,
    fa_envelope_square,
    fa_eraser,
    fa_eur,
    fa_euro,
    fa_exchange,
    fa_exclamation,
    fa_exclamation_circle,
    fa_exclamation_triangle,
    fa_expand,
    fa_expeditedssl,
    fa_external_link,
    fa_external_link_square,
    fa_eye,
    fa_eye_slash,
    fa_eyedropper,
    fa_facebook,
    fa_facebook_f,
    fa_facebook_official,
    fa_facebook_square,
    fa_fast_backward,
    fa_fast_forward,
    fa_fax,
    fa_feed,
    fa_female,
    fa_fighter_jet,
    fa_file,
    fa_file_archive_o,
    fa_file_audio_o,
    fa_file_code_o,
    fa_file_excel_o,
    fa_file_image_o,
    fa_file_movie_o,
    fa_file_o,
    fa_file_pdf_o,
    fa_file_photo_o,
    fa_file_picture_o,
    fa_file_powerpoint_o,
    fa_file_sound_o,
    fa_file_text,
    fa_file_text_o,
    fa_file_video_o,
    fa_file_word_o,
    fa_file_zip_o,
    fa_files_o,
    fa_film,
    fa_filter,
    fa_fire,
    fa_fire_extinguisher,
    fa_firefox,
    fa_flag,
    fa_flag_checkered,
    fa_flag_o,
    fa_flash,
    fa_flask,
    fa_flickr,
    fa_floppy_o,
    fa_folder,
    fa_folder_o,
    fa_folder_open,
    fa_folder_open_o,
    fa_font,
    fa_fonticons,
    fa_forumbee,
    fa_forward,
    fa_foursquare,
    fa_frown_o,
    fa_futbol_o,
    fa_gamepad,
    fa_gavel,
    fa_gbp,
    fa_ge,
    fa_gear,
    fa_gears,
    fa_genderless,
    fa_get_pocket,
    fa_gg,
    fa_gg_circle,
    fa_gift,
    fa_git,
    fa_git_square,
    fa_github,
    fa_github_alt,
    fa_github_square,
    fa_gittip,
    fa_glass,
    fa_globe,
    fa_google,
    fa_google_plus,
    fa_google_plus_square,
    fa_google_wallet,
    fa_graduation_cap,
    fa_gratipay,
    fa_group,
    fa_h_square,
    fa_hacker_news,
    fa_hand_grab_o,
    fa_hand_lizard_o,
    fa_hand_o_down,
    fa_hand_o_left,
    fa_hand_o_right,
    fa_hand_o_up,
    fa_hand_paper_o,
    fa_hand_peace_o,
    fa_hand_pointer_o,
    fa_hand_rock_o,
    fa_hand_scissors_o,
    fa_hand_spock_o,
    fa_hand_stop_o,
    fa_hdd_o,
    fa_header,
    fa_headphones,
    fa_heart,
    fa_heart_o,
    fa_heartbeat,
    fa_history,
    fa_home,
    fa_hospital_o,
    fa_hotel,
    fa_hourglass,
    fa_hourglass_1,
    fa_hourglass_2,
    fa_hourglass_3,
    fa_hourglass_end,
    fa_hourglass_half,
    fa_hourglass_o,
    fa_hourglass_start,
    fa_houzz,
    fa_html5,
    fa_i_cursor,
    fa_ils,
    fa_image,
    fa_inbox,
    fa_indent,
    fa_industry,
    fa_info,
    fa_info_circle,
    fa_inr,
    fa_instagram,
    fa_institution,
    fa_internet_explorer,
    fa_intersex,
    fa_ioxhost,
    fa_italic,
    fa_joomla,
    fa_jpy,
    fa_jsfiddle,
    fa_key,
    fa_keyboard_o,
    fa_krw,
    fa_language,
    fa_laptop,
    fa_lastfm,
    fa_lastfm_square,
    fa_leaf,
    fa_leanpub,
    fa_legal,
    fa_lemon_o,
    fa_level_down,
    fa_level_up,
    fa_life_bouy,
    fa_life_buoy,
    fa_life_ring,
    fa_life_saver,
    fa_lightbulb_o,
    fa_line_chart,
    fa_link,
    fa_linkedin,
    fa_linkedin_square,
    fa_linux,
    fa_list,
    fa_list_alt,
    fa_list_ol,
    fa_list_ul,
    fa_location_arrow,
    fa_lock,
    fa_long_arrow_down,
    fa_long_arrow_left,
    fa_long_arrow_right,
    fa_long_arrow_up,
    fa_magic,
    fa_magnet,
    fa_mail_forward,
    fa_mail_reply,
    fa_mail_reply_all,
    fa_male,
    fa_map,
    fa_map_marker,
    fa_map_o,
    fa_map_pin,
    fa_map_signs,
    fa_mars,
    fa_mars_double,
    fa_mars_stroke,
    fa_mars_stroke_h,
    fa_mars_stroke_v,
    fa_maxcdn,
    fa_meanpath,
    fa_medium,
    fa_medkit,
    fa_meh_o,
    fa_mercury,
    fa_microphone,
    fa_microphone_slash,
    fa_minus,
    fa_minus_circle,
    fa_minus_square,
    fa_minus_square_o,
    fa_mobile,
    fa_mobile_phone,
    fa_money,
    fa_moon_o,
    fa_mortar_board,
    fa_motorcycle,
    fa_mouse_pointer,
    fa_music,
    fa_navicon,
    fa_neuter,
    fa_newspaper_o,
    fa_object_group,
    fa_object_ungroup,
    fa_odnoklassniki,
    fa_odnoklassniki_square,
    fa_opencart,
    fa_openid,
    fa_opera,
    fa_optin_monster,
    fa_outdent,
    fa_pagelines,
    fa_paint_brush,
    fa_paper_plane,
    fa_paper_plane_o,
    fa_paperclip,
    fa_paragraph,
    fa_paste,
    fa_pause,
    fa_paw,
    fa_paypal,
    fa_pencil,
    fa_pencil_square,
    fa_pencil_square_o,
    fa_phone,
    fa_phone_square,
    fa_photo,
    fa_picture_o,
    fa_pie_chart,
    fa_pied_piper,
    fa_pied_piper_alt,
    fa_pinterest,
    fa_pinterest_p,
    fa_pinterest_square,
    fa_plane,
    fa_play,
    fa_play_circle,
    fa_play_circle_o,
    fa_plug,
    fa_plus,
    fa_plus_circle,
    fa_plus_square,
    fa_plus_square_o,
    fa_power_off,
    fa_print,
    fa_puzzle_piece,
    fa_qq,
    fa_qrcode,
    fa_question,
    fa_question_circle,
    fa_quote_left,
    fa_quote_right,
    fa_ra,
    fa_random,
    fa_rebel,
    fa_recycle,
    fa_reddit,
    fa_reddit_square,
    fa_refresh,
    fa_registered,
    fa_remove,
    fa_renren,
    fa_reorder,
    fa_repeat,
    fa_reply,
    fa_reply_all,
    fa_retweet,
    fa_rmb,
    fa_road,
    fa_rocket,
    fa_rotate_left,
    fa_rotate_right,
    fa_rouble,
    fa_rss,
    fa_rss_square,
    fa_rub,
    fa_ruble,
    fa_rupee,
    fa_safari,
    fa_save,
    fa_scissors,
    fa_search,
    fa_search_minus,
    fa_search_plus,
    fa_sellsy,
    fa_send,
    fa_send_o,
    fa_server,
    fa_share,
    fa_share_alt,
    fa_share_alt_square,
    fa_share_square,
    fa_share_square_o,
    fa_shekel,
    fa_sheqel,
    fa_shield,
    fa_ship,
    fa_shirtsinbulk,
    fa_shopping_cart,
    fa_sign_in,
    fa_sign_out,
    fa_signal,
    fa_simplybuilt,
    fa_sitemap,
    fa_skyatlas,
    fa_skype,
    fa_slack,
    fa_sliders,
    fa_slideshare,
    fa_smile_o,
    fa_soccer_ball_o,
    fa_sort,
    fa_sort_alpha_asc,
    fa_sort_alpha_desc,
    fa_sort_amount_asc,
    fa_sort_amount_desc,
    fa_sort_asc,
    fa_sort_desc,
    fa_sort_down,
    fa_sort_numeric_asc,
    fa_sort_numeric_desc,
    fa_sort_up,
    fa_soundcloud,
    fa_space_shuttle,
    fa_spinner,
    fa_spoon,
    fa_spotify,
    fa_square,
    fa_square_o,
    fa_stack_exchange,
    fa_stack_overflow,
    fa_star,
    fa_star_half,
    fa_star_half_empty,
    fa_star_half_full,
    fa_star_half_o,
    fa_star_o,
    fa_steam,
    fa_steam_square,
    fa_step_backward,
    fa_step_forward,
    fa_stethoscope,
    fa_sticky_note,
    fa_sticky_note_o,
    fa_stop,
    fa_street_view,
    fa_strikethrough,
    fa_stumbleupon,
    fa_stumbleupon_circle,
    fa_subscript,
    fa_subway,
    fa_suitcase,
    fa_sun_o,
    fa_superscript,
    fa_support,
    fa_table,
    fa_tablet,
    fa_tachometer,
    fa_tag,
    fa_tags,
    fa_tasks,
    fa_taxi,
    fa_television,
    fa_tencent_weibo,
    fa_terminal,
    fa_text_height,
    fa_text_width,
    fa_th,
    fa_th_large,
    fa_th_list,
    fa_thumb_tack,
    fa_thumbs_down,
    fa_thumbs_o_down,
    fa_thumbs_o_up,
    fa_thumbs_up,
    fa_ticket,
    fa_times,
    fa_times_circle,
    fa_times_circle_o,
    fa_tint,
    fa_toggle_down,
    fa_toggle_left,
    fa_toggle_off,
    fa_toggle_on,
    fa_toggle_right,
    fa_toggle_up,
    fa_trademark,
    fa_train,
    fa_transgender,
    fa_transgender_alt,
    fa_trash,
    fa_trash_o,
    fa_tree,
    fa_trello,
    fa_tripadvisor,
    fa_trophy,
    fa_truck,
    fa_try,
    fa_tty,
    fa_tumblr,
    fa_tumblr_square,
    fa_turkish_lira,
    fa_tv,
    fa_twitch,
    fa_twitter,
    fa_twitter_square,
    fa_umbrella,
    fa_underline,
    fa_undo,
    fa_university,
    fa_unlink,
    fa_unlock,
    fa_unlock_alt,
    fa_unsorted,
    fa_upload,
    fa_usd,
    fa_user,
    fa_user_md,
    fa_user_plus,
    fa_user_secret,
    fa_user_times,
    fa_users,
    fa_venus,
    fa_venus_double,
    fa_venus_mars,
    fa_viacoin,
    fa_video_camera,
    fa_vimeo,
    fa_vimeo_square,
    fa_vine,
    fa_vk,
    fa_volume_down,
    fa_volume_off,
    fa_volume_up,
    fa_warning,
    fa_wechat,
    fa_weibo,
    fa_weixin,
    fa_whatsapp,
    fa_wheelchair,
    fa_wifi,
    fa_wikipedia_w,
    fa_windows,
    fa_won,
    fa_wordpress,
    fa_wrench,
    fa_xing,
    fa_xing_square,
    fa_y_combinator,
    fa_y_combinator_square,
    fa_yahoo,
    fa_yc,
    fa_yc_square,
    fa_yelp,
    fa_yen,
    fa_youtube,
    fa_youtube_play,
    fa_youtube_square,
};

export function convertKey(valueText: string | key): string {

    var value: key;
    if (typeof valueText == "string") {
        value = key[valueText];
    } else {
        value = <key>valueText;
    }

    switch (value) {
        case key.fa_500px:
            return 'f26e';
        case key.fa_adjust:
            return 'f042';
        case key.fa_adn:
            return 'f170';
        case key.fa_align_center:
            return 'f037';
        case key.fa_align_justify:
            return 'f039';
        case key.fa_align_left:
            return 'f036';
        case key.fa_align_right:
            return 'f038';
        case key.fa_amazon:
            return 'f270';
        case key.fa_ambulance:
            return 'f0f9';
        case key.fa_anchor:
            return 'f13d';
        case key.fa_android:
            return 'f17b';
        case key.fa_angellist:
            return 'f209';
        case key.fa_angle_double_down:
            return 'f103';
        case key.fa_angle_double_left:
            return 'f100';
        case key.fa_angle_double_right:
            return 'f101';
        case key.fa_angle_double_up:
            return 'f102';
        case key.fa_angle_down:
            return 'f107';
        case key.fa_angle_left:
            return 'f104';
        case key.fa_angle_right:
            return 'f105';
        case key.fa_angle_up:
            return 'f106';
        case key.fa_apple:
            return 'f179';
        case key.fa_archive:
            return 'f187';
        case key.fa_area_chart:
            return 'f1fe';
        case key.fa_arrow_circle_down:
            return 'f0ab';
        case key.fa_arrow_circle_left:
            return 'f0a8';
        case key.fa_arrow_circle_o_down:
            return 'f01a';
        case key.fa_arrow_circle_o_left:
            return 'f190';
        case key.fa_arrow_circle_o_right:
            return 'f18e';
        case key.fa_arrow_circle_o_up:
            return 'f01b';
        case key.fa_arrow_circle_right:
            return 'f0a9';
        case key.fa_arrow_circle_up:
            return 'f0aa';
        case key.fa_arrow_down:
            return 'f063';
        case key.fa_arrow_left:
            return 'f060';
        case key.fa_arrow_right:
            return 'f061';
        case key.fa_arrow_up:
            return 'f062';
        case key.fa_arrows:
            return 'f047';
        case key.fa_arrows_alt:
            return 'f0b2';
        case key.fa_arrows_h:
            return 'f07e';
        case key.fa_arrows_v:
            return 'f07d';
        case key.fa_asterisk:
            return 'f069';
        case key.fa_at:
            return 'f1fa';
        case key.fa_automobile:
            return 'f1b9';
        case key.fa_backward:
            return 'f04a';
        case key.fa_balance_scale:
            return 'f24e';
        case key.fa_ban:
            return 'f05e';
        case key.fa_bank:
            return 'f19c';
        case key.fa_bar_chart:
            return 'f080';
        case key.fa_bar_chart_o:
            return 'f080';
        case key.fa_barcode:
            return 'f02a';
        case key.fa_bars:
            return 'f0c9';
        case key.fa_battery_0:
            return 'f244';
        case key.fa_battery_1:
            return 'f243';
        case key.fa_battery_2:
            return 'f242';
        case key.fa_battery_3:
            return 'f241';
        case key.fa_battery_4:
            return 'f240';
        case key.fa_battery_empty:
            return 'f244';
        case key.fa_battery_full:
            return 'f240';
        case key.fa_battery_half:
            return 'f242';
        case key.fa_battery_quarter:
            return 'f243';
        case key.fa_battery_three_quarters:
            return 'f241';
        case key.fa_bed:
            return 'f236';
        case key.fa_beer:
            return 'f0fc';
        case key.fa_behance:
            return 'f1b4';
        case key.fa_behance_square:
            return 'f1b5';
        case key.fa_bell:
            return 'f0f3';
        case key.fa_bell_o:
            return 'f0a2';
        case key.fa_bell_slash:
            return 'f1f6';
        case key.fa_bell_slash_o:
            return 'f1f7';
        case key.fa_bicycle:
            return 'f206';
        case key.fa_binoculars:
            return 'f1e5';
        case key.fa_birthday_cake:
            return 'f1fd';
        case key.fa_bitbucket:
            return 'f171';
        case key.fa_bitbucket_square:
            return 'f172';
        case key.fa_bitcoin:
            return 'f15a';
        case key.fa_black_tie:
            return 'f27e';
        case key.fa_bold:
            return 'f032';
        case key.fa_bolt:
            return 'f0e7';
        case key.fa_bomb:
            return 'f1e2';
        case key.fa_book:
            return 'f02d';
        case key.fa_bookmark:
            return 'f02e';
        case key.fa_bookmark_o:
            return 'f097';
        case key.fa_briefcase:
            return 'f0b1';
        case key.fa_btc:
            return 'f15a';
        case key.fa_bug:
            return 'f188';
        case key.fa_building:
            return 'f1ad';
        case key.fa_building_o:
            return 'f0f7';
        case key.fa_bullhorn:
            return 'f0a1';
        case key.fa_bullseye:
            return 'f140';
        case key.fa_bus:
            return 'f207';
        case key.fa_buysellads:
            return 'f20d';
        case key.fa_cab:
            return 'f1ba';
        case key.fa_calculator:
            return 'f1ec';
        case key.fa_calendar:
            return 'f073';
        case key.fa_calendar_check_o:
            return 'f274';
        case key.fa_calendar_minus_o:
            return 'f272';
        case key.fa_calendar_o:
            return 'f133';
        case key.fa_calendar_plus_o:
            return 'f271';
        case key.fa_calendar_times_o:
            return 'f273';
        case key.fa_camera:
            return 'f030';
        case key.fa_camera_retro:
            return 'f083';
        case key.fa_car:
            return 'f1b9';
        case key.fa_caret_down:
            return 'f0d7';
        case key.fa_caret_left:
            return 'f0d9';
        case key.fa_caret_right:
            return 'f0da';
        case key.fa_caret_square_o_down:
            return 'f150';
        case key.fa_caret_square_o_left:
            return 'f191';
        case key.fa_caret_square_o_right:
            return 'f152';
        case key.fa_caret_square_o_up:
            return 'f151';
        case key.fa_caret_up:
            return 'f0d8';
        case key.fa_cart_arrow_down:
            return 'f218';
        case key.fa_cart_plus:
            return 'f217';
        case key.fa_cc:
            return 'f20a';
        case key.fa_cc_amex:
            return 'f1f3';
        case key.fa_cc_diners_club:
            return 'f24c';
        case key.fa_cc_discover:
            return 'f1f2';
        case key.fa_cc_jcb:
            return 'f24b';
        case key.fa_cc_mastercard:
            return 'f1f1';
        case key.fa_cc_paypal:
            return 'f1f4';
        case key.fa_cc_stripe:
            return 'f1f5';
        case key.fa_cc_visa:
            return 'f1f0';
        case key.fa_certificate:
            return 'f0a3';
        case key.fa_chain:
            return 'f0c1';
        case key.fa_chain_broken:
            return 'f127';
        case key.fa_check:
            return 'f00c';
        case key.fa_check_circle:
            return 'f058';
        case key.fa_check_circle_o:
            return 'f05d';
        case key.fa_check_square:
            return 'f14a';
        case key.fa_check_square_o:
            return 'f046';
        case key.fa_chevron_circle_down:
            return 'f13a';
        case key.fa_chevron_circle_left:
            return 'f137';
        case key.fa_chevron_circle_right:
            return 'f138';
        case key.fa_chevron_circle_up:
            return 'f139';
        case key.fa_chevron_down:
            return 'f078';
        case key.fa_chevron_left:
            return 'f053';
        case key.fa_chevron_right:
            return 'f054';
        case key.fa_chevron_up:
            return 'f077';
        case key.fa_child:
            return 'f1ae';
        case key.fa_chrome:
            return 'f268';
        case key.fa_circle:
            return 'f111';
        case key.fa_circle_o:
            return 'f10c';
        case key.fa_circle_o_notch:
            return 'f1ce';
        case key.fa_circle_thin:
            return 'f1db';
        case key.fa_clipboard:
            return 'f0ea';
        case key.fa_clock_o:
            return 'f017';
        case key.fa_clone:
            return 'f24d';
        case key.fa_close:
            return 'f00d';
        case key.fa_cloud:
            return 'f0c2';
        case key.fa_cloud_download:
            return 'f0ed';
        case key.fa_cloud_upload:
            return 'f0ee';
        case key.fa_cny:
            return 'f157';
        case key.fa_code:
            return 'f121';
        case key.fa_code_fork:
            return 'f126';
        case key.fa_codepen:
            return 'f1cb';
        case key.fa_coffee:
            return 'f0f4';
        case key.fa_cog:
            return 'f013';
        case key.fa_cogs:
            return 'f085';
        case key.fa_columns:
            return 'f0db';
        case key.fa_comment:
            return 'f075';
        case key.fa_comment_o:
            return 'f0e5';
        case key.fa_commenting:
            return 'f27a';
        case key.fa_commenting_o:
            return 'f27b';
        case key.fa_comments:
            return 'f086';
        case key.fa_comments_o:
            return 'f0e6';
        case key.fa_compass:
            return 'f14e';
        case key.fa_compress:
            return 'f066';
        case key.fa_connectdevelop:
            return 'f20e';
        case key.fa_contao:
            return 'f26d';
        case key.fa_copy:
            return 'f0c5';
        case key.fa_copyright:
            return 'f1f9';
        case key.fa_creative_commons:
            return 'f25e';
        case key.fa_credit_card:
            return 'f09d';
        case key.fa_crop:
            return 'f125';
        case key.fa_crosshairs:
            return 'f05b';
        case key.fa_css3:
            return 'f13c';
        case key.fa_cube:
            return 'f1b2';
        case key.fa_cubes:
            return 'f1b3';
        case key.fa_cut:
            return 'f0c4';
        case key.fa_cutlery:
            return 'f0f5';
        case key.fa_dashboard:
            return 'f0e4';
        case key.fa_dashcube:
            return 'f210';
        case key.fa_database:
            return 'f1c0';
        case key.fa_dedent:
            return 'f03b';
        case key.fa_delicious:
            return 'f1a5';
        case key.fa_desktop:
            return 'f108';
        case key.fa_deviantart:
            return 'f1bd';
        case key.fa_diamond:
            return 'f219';
        case key.fa_digg:
            return 'f1a6';
        case key.fa_dollar:
            return 'f155';
        case key.fa_dot_circle_o:
            return 'f192';
        case key.fa_download:
            return 'f019';
        case key.fa_dribbble:
            return 'f17d';
        case key.fa_dropbox:
            return 'f16b';
        case key.fa_drupal:
            return 'f1a9';
        case key.fa_edit:
            return 'f044';
        case key.fa_eject:
            return 'f052';
        case key.fa_ellipsis_h:
            return 'f141';
        case key.fa_ellipsis_v:
            return 'f142';
        case key.fa_empire:
            return 'f1d1';
        case key.fa_envelope:
            return 'f0e0';
        case key.fa_envelope_o:
            return 'f003';
        case key.fa_envelope_square:
            return 'f199';
        case key.fa_eraser:
            return 'f12d';
        case key.fa_eur:
            return 'f153';
        case key.fa_euro:
            return 'f153';
        case key.fa_exchange:
            return 'f0ec';
        case key.fa_exclamation:
            return 'f12a';
        case key.fa_exclamation_circle:
            return 'f06a';
        case key.fa_exclamation_triangle:
            return 'f071';
        case key.fa_expand:
            return 'f065';
        case key.fa_expeditedssl:
            return 'f23e';
        case key.fa_external_link:
            return 'f08e';
        case key.fa_external_link_square:
            return 'f14c';
        case key.fa_eye:
            return 'f06e';
        case key.fa_eye_slash:
            return 'f070';
        case key.fa_eyedropper:
            return 'f1fb';
        case key.fa_facebook:
            return 'f09a';
        case key.fa_facebook_f:
            return 'f09a';
        case key.fa_facebook_official:
            return 'f230';
        case key.fa_facebook_square:
            return 'f082';
        case key.fa_fast_backward:
            return 'f049';
        case key.fa_fast_forward:
            return 'f050';
        case key.fa_fax:
            return 'f1ac';
        case key.fa_feed:
            return 'f09e';
        case key.fa_female:
            return 'f182';
        case key.fa_fighter_jet:
            return 'f0fb';
        case key.fa_file:
            return 'f15b';
        case key.fa_file_archive_o:
            return 'f1c6';
        case key.fa_file_audio_o:
            return 'f1c7';
        case key.fa_file_code_o:
            return 'f1c9';
        case key.fa_file_excel_o:
            return 'f1c3';
        case key.fa_file_image_o:
            return 'f1c5';
        case key.fa_file_movie_o:
            return 'f1c8';
        case key.fa_file_o:
            return 'f016';
        case key.fa_file_pdf_o:
            return 'f1c1';
        case key.fa_file_photo_o:
            return 'f1c5';
        case key.fa_file_picture_o:
            return 'f1c5';
        case key.fa_file_powerpoint_o:
            return 'f1c4';
        case key.fa_file_sound_o:
            return 'f1c7';
        case key.fa_file_text:
            return 'f15c';
        case key.fa_file_text_o:
            return 'f0f6';
        case key.fa_file_video_o:
            return 'f1c8';
        case key.fa_file_word_o:
            return 'f1c2';
        case key.fa_file_zip_o:
            return 'f1c6';
        case key.fa_files_o:
            return 'f0c5';
        case key.fa_film:
            return 'f008';
        case key.fa_filter:
            return 'f0b0';
        case key.fa_fire:
            return 'f06d';
        case key.fa_fire_extinguisher:
            return 'f134';
        case key.fa_firefox:
            return 'f269';
        case key.fa_flag:
            return 'f024';
        case key.fa_flag_checkered:
            return 'f11e';
        case key.fa_flag_o:
            return 'f11d';
        case key.fa_flash:
            return 'f0e7';
        case key.fa_flask:
            return 'f0c3';
        case key.fa_flickr:
            return 'f16e';
        case key.fa_floppy_o:
            return 'f0c7';
        case key.fa_folder:
            return 'f07b';
        case key.fa_folder_o:
            return 'f114';
        case key.fa_folder_open:
            return 'f07c';
        case key.fa_folder_open_o:
            return 'f115';
        case key.fa_font:
            return 'f031';
        case key.fa_fonticons:
            return 'f280';
        case key.fa_forumbee:
            return 'f211';
        case key.fa_forward:
            return 'f04e';
        case key.fa_foursquare:
            return 'f180';
        case key.fa_frown_o:
            return 'f119';
        case key.fa_futbol_o:
            return 'f1e3';
        case key.fa_gamepad:
            return 'f11b';
        case key.fa_gavel:
            return 'f0e3';
        case key.fa_gbp:
            return 'f154';
        case key.fa_ge:
            return 'f1d1';
        case key.fa_gear:
            return 'f013';
        case key.fa_gears:
            return 'f085';
        case key.fa_genderless:
            return 'f22d';
        case key.fa_get_pocket:
            return 'f265';
        case key.fa_gg:
            return 'f260';
        case key.fa_gg_circle:
            return 'f261';
        case key.fa_gift:
            return 'f06b';
        case key.fa_git:
            return 'f1d3';
        case key.fa_git_square:
            return 'f1d2';
        case key.fa_github:
            return 'f09b';
        case key.fa_github_alt:
            return 'f113';
        case key.fa_github_square:
            return 'f092';
        case key.fa_gittip:
            return 'f184';
        case key.fa_glass:
            return 'f000';
        case key.fa_globe:
            return 'f0ac';
        case key.fa_google:
            return 'f1a0';
        case key.fa_google_plus:
            return 'f0d5';
        case key.fa_google_plus_square:
            return 'f0d4';
        case key.fa_google_wallet:
            return 'f1ee';
        case key.fa_graduation_cap:
            return 'f19d';
        case key.fa_gratipay:
            return 'f184';
        case key.fa_group:
            return 'f0c0';
        case key.fa_h_square:
            return 'f0fd';
        case key.fa_hacker_news:
            return 'f1d4';
        case key.fa_hand_grab_o:
            return 'f255';
        case key.fa_hand_lizard_o:
            return 'f258';
        case key.fa_hand_o_down:
            return 'f0a7';
        case key.fa_hand_o_left:
            return 'f0a5';
        case key.fa_hand_o_right:
            return 'f0a4';
        case key.fa_hand_o_up:
            return 'f0a6';
        case key.fa_hand_paper_o:
            return 'f256';
        case key.fa_hand_peace_o:
            return 'f25b';
        case key.fa_hand_pointer_o:
            return 'f25a';
        case key.fa_hand_rock_o:
            return 'f255';
        case key.fa_hand_scissors_o:
            return 'f257';
        case key.fa_hand_spock_o:
            return 'f259';
        case key.fa_hand_stop_o:
            return 'f256';
        case key.fa_hdd_o:
            return 'f0a0';
        case key.fa_header:
            return 'f1dc';
        case key.fa_headphones:
            return 'f025';
        case key.fa_heart:
            return 'f004';
        case key.fa_heart_o:
            return 'f08a';
        case key.fa_heartbeat:
            return 'f21e';
        case key.fa_history:
            return 'f1da';
        case key.fa_home:
            return 'f015';
        case key.fa_hospital_o:
            return 'f0f8';
        case key.fa_hotel:
            return 'f236';
        case key.fa_hourglass:
            return 'f254';
        case key.fa_hourglass_1:
            return 'f251';
        case key.fa_hourglass_2:
            return 'f252';
        case key.fa_hourglass_3:
            return 'f253';
        case key.fa_hourglass_end:
            return 'f253';
        case key.fa_hourglass_half:
            return 'f252';
        case key.fa_hourglass_o:
            return 'f250';
        case key.fa_hourglass_start:
            return 'f251';
        case key.fa_houzz:
            return 'f27c';
        case key.fa_html5:
            return 'f13b';
        case key.fa_i_cursor:
            return 'f246';
        case key.fa_ils:
            return 'f20b';
        case key.fa_image:
            return 'f03e';
        case key.fa_inbox:
            return 'f01c';
        case key.fa_indent:
            return 'f03c';
        case key.fa_industry:
            return 'f275';
        case key.fa_info:
            return 'f129';
        case key.fa_info_circle:
            return 'f05a';
        case key.fa_inr:
            return 'f156';
        case key.fa_instagram:
            return 'f16d';
        case key.fa_institution:
            return 'f19c';
        case key.fa_internet_explorer:
            return 'f26b';
        case key.fa_intersex:
            return 'f224';
        case key.fa_ioxhost:
            return 'f208';
        case key.fa_italic:
            return 'f033';
        case key.fa_joomla:
            return 'f1aa';
        case key.fa_jpy:
            return 'f157';
        case key.fa_jsfiddle:
            return 'f1cc';
        case key.fa_key:
            return 'f084';
        case key.fa_keyboard_o:
            return 'f11c';
        case key.fa_krw:
            return 'f159';
        case key.fa_language:
            return 'f1ab';
        case key.fa_laptop:
            return 'f109';
        case key.fa_lastfm:
            return 'f202';
        case key.fa_lastfm_square:
            return 'f203';
        case key.fa_leaf:
            return 'f06c';
        case key.fa_leanpub:
            return 'f212';
        case key.fa_legal:
            return 'f0e3';
        case key.fa_lemon_o:
            return 'f094';
        case key.fa_level_down:
            return 'f149';
        case key.fa_level_up:
            return 'f148';
        case key.fa_life_bouy:
            return 'f1cd';
        case key.fa_life_buoy:
            return 'f1cd';
        case key.fa_life_ring:
            return 'f1cd';
        case key.fa_life_saver:
            return 'f1cd';
        case key.fa_lightbulb_o:
            return 'f0eb';
        case key.fa_line_chart:
            return 'f201';
        case key.fa_link:
            return 'f0c1';
        case key.fa_linkedin:
            return 'f0e1';
        case key.fa_linkedin_square:
            return 'f08c';
        case key.fa_linux:
            return 'f17c';
        case key.fa_list:
            return 'f03a';
        case key.fa_list_alt:
            return 'f022';
        case key.fa_list_ol:
            return 'f0cb';
        case key.fa_list_ul:
            return 'f0ca';
        case key.fa_location_arrow:
            return 'f124';
        case key.fa_lock:
            return 'f023';
        case key.fa_long_arrow_down:
            return 'f175';
        case key.fa_long_arrow_left:
            return 'f177';
        case key.fa_long_arrow_right:
            return 'f178';
        case key.fa_long_arrow_up:
            return 'f176';
        case key.fa_magic:
            return 'f0d0';
        case key.fa_magnet:
            return 'f076';
        case key.fa_mail_forward:
            return 'f064';
        case key.fa_mail_reply:
            return 'f112';
        case key.fa_mail_reply_all:
            return 'f122';
        case key.fa_male:
            return 'f183';
        case key.fa_map:
            return 'f279';
        case key.fa_map_marker:
            return 'f041';
        case key.fa_map_o:
            return 'f278';
        case key.fa_map_pin:
            return 'f276';
        case key.fa_map_signs:
            return 'f277';
        case key.fa_mars:
            return 'f222';
        case key.fa_mars_double:
            return 'f227';
        case key.fa_mars_stroke:
            return 'f229';
        case key.fa_mars_stroke_h:
            return 'f22b';
        case key.fa_mars_stroke_v:
            return 'f22a';
        case key.fa_maxcdn:
            return 'f136';
        case key.fa_meanpath:
            return 'f20c';
        case key.fa_medium:
            return 'f23a';
        case key.fa_medkit:
            return 'f0fa';
        case key.fa_meh_o:
            return 'f11a';
        case key.fa_mercury:
            return 'f223';
        case key.fa_microphone:
            return 'f130';
        case key.fa_microphone_slash:
            return 'f131';
        case key.fa_minus:
            return 'f068';
        case key.fa_minus_circle:
            return 'f056';
        case key.fa_minus_square:
            return 'f146';
        case key.fa_minus_square_o:
            return 'f147';
        case key.fa_mobile:
            return 'f10b';
        case key.fa_mobile_phone:
            return 'f10b';
        case key.fa_money:
            return 'f0d6';
        case key.fa_moon_o:
            return 'f186';
        case key.fa_mortar_board:
            return 'f19d';
        case key.fa_motorcycle:
            return 'f21c';
        case key.fa_mouse_pointer:
            return 'f245';
        case key.fa_music:
            return 'f001';
        case key.fa_navicon:
            return 'f0c9';
        case key.fa_neuter:
            return 'f22c';
        case key.fa_newspaper_o:
            return 'f1ea';
        case key.fa_object_group:
            return 'f247';
        case key.fa_object_ungroup:
            return 'f248';
        case key.fa_odnoklassniki:
            return 'f263';
        case key.fa_odnoklassniki_square:
            return 'f264';
        case key.fa_opencart:
            return 'f23d';
        case key.fa_openid:
            return 'f19b';
        case key.fa_opera:
            return 'f26a';
        case key.fa_optin_monster:
            return 'f23c';
        case key.fa_outdent:
            return 'f03b';
        case key.fa_pagelines:
            return 'f18c';
        case key.fa_paint_brush:
            return 'f1fc';
        case key.fa_paper_plane:
            return 'f1d8';
        case key.fa_paper_plane_o:
            return 'f1d9';
        case key.fa_paperclip:
            return 'f0c6';
        case key.fa_paragraph:
            return 'f1dd';
        case key.fa_paste:
            return 'f0ea';
        case key.fa_pause:
            return 'f04c';
        case key.fa_paw:
            return 'f1b0';
        case key.fa_paypal:
            return 'f1ed';
        case key.fa_pencil:
            return 'f040';
        case key.fa_pencil_square:
            return 'f14b';
        case key.fa_pencil_square_o:
            return 'f044';
        case key.fa_phone:
            return 'f095';
        case key.fa_phone_square:
            return 'f098';
        case key.fa_photo:
            return 'f03e';
        case key.fa_picture_o:
            return 'f03e';
        case key.fa_pie_chart:
            return 'f200';
        case key.fa_pied_piper:
            return 'f1a7';
        case key.fa_pied_piper_alt:
            return 'f1a8';
        case key.fa_pinterest:
            return 'f0d2';
        case key.fa_pinterest_p:
            return 'f231';
        case key.fa_pinterest_square:
            return 'f0d3';
        case key.fa_plane:
            return 'f072';
        case key.fa_play:
            return 'f04b';
        case key.fa_play_circle:
            return 'f144';
        case key.fa_play_circle_o:
            return 'f01d';
        case key.fa_plug:
            return 'f1e6';
        case key.fa_plus:
            return 'f067';
        case key.fa_plus_circle:
            return 'f055';
        case key.fa_plus_square:
            return 'f0fe';
        case key.fa_plus_square_o:
            return 'f196';
        case key.fa_power_off:
            return 'f011';
        case key.fa_print:
            return 'f02f';
        case key.fa_puzzle_piece:
            return 'f12e';
        case key.fa_qq:
            return 'f1d6';
        case key.fa_qrcode:
            return 'f029';
        case key.fa_question:
            return 'f128';
        case key.fa_question_circle:
            return 'f059';
        case key.fa_quote_left:
            return 'f10d';
        case key.fa_quote_right:
            return 'f10e';
        case key.fa_ra:
            return 'f1d0';
        case key.fa_random:
            return 'f074';
        case key.fa_rebel:
            return 'f1d0';
        case key.fa_recycle:
            return 'f1b8';
        case key.fa_reddit:
            return 'f1a1';
        case key.fa_reddit_square:
            return 'f1a2';
        case key.fa_refresh:
            return 'f021';
        case key.fa_registered:
            return 'f25d';
        case key.fa_remove:
            return 'f00d';
        case key.fa_renren:
            return 'f18b';
        case key.fa_reorder:
            return 'f0c9';
        case key.fa_repeat:
            return 'f01e';
        case key.fa_reply:
            return 'f112';
        case key.fa_reply_all:
            return 'f122';
        case key.fa_retweet:
            return 'f079';
        case key.fa_rmb:
            return 'f157';
        case key.fa_road:
            return 'f018';
        case key.fa_rocket:
            return 'f135';
        case key.fa_rotate_left:
            return 'f0e2';
        case key.fa_rotate_right:
            return 'f01e';
        case key.fa_rouble:
            return 'f158';
        case key.fa_rss:
            return 'f09e';
        case key.fa_rss_square:
            return 'f143';
        case key.fa_rub:
            return 'f158';
        case key.fa_ruble:
            return 'f158';
        case key.fa_rupee:
            return 'f156';
        case key.fa_safari:
            return 'f267';
        case key.fa_save:
            return 'f0c7';
        case key.fa_scissors:
            return 'f0c4';
        case key.fa_search:
            return 'f002';
        case key.fa_search_minus:
            return 'f010';
        case key.fa_search_plus:
            return 'f00e';
        case key.fa_sellsy:
            return 'f213';
        case key.fa_send:
            return 'f1d8';
        case key.fa_send_o:
            return 'f1d9';
        case key.fa_server:
            return 'f233';
        case key.fa_share:
            return 'f064';
        case key.fa_share_alt:
            return 'f1e0';
        case key.fa_share_alt_square:
            return 'f1e1';
        case key.fa_share_square:
            return 'f14d';
        case key.fa_share_square_o:
            return 'f045';
        case key.fa_shekel:
            return 'f20b';
        case key.fa_sheqel:
            return 'f20b';
        case key.fa_shield:
            return 'f132';
        case key.fa_ship:
            return 'f21a';
        case key.fa_shirtsinbulk:
            return 'f214';
        case key.fa_shopping_cart:
            return 'f07a';
        case key.fa_sign_in:
            return 'f090';
        case key.fa_sign_out:
            return 'f08b';
        case key.fa_signal:
            return 'f012';
        case key.fa_simplybuilt:
            return 'f215';
        case key.fa_sitemap:
            return 'f0e8';
        case key.fa_skyatlas:
            return 'f216';
        case key.fa_skype:
            return 'f17e';
        case key.fa_slack:
            return 'f198';
        case key.fa_sliders:
            return 'f1de';
        case key.fa_slideshare:
            return 'f1e7';
        case key.fa_smile_o:
            return 'f118';
        case key.fa_soccer_ball_o:
            return 'f1e3';
        case key.fa_sort:
            return 'f0dc';
        case key.fa_sort_alpha_asc:
            return 'f15d';
        case key.fa_sort_alpha_desc:
            return 'f15e';
        case key.fa_sort_amount_asc:
            return 'f160';
        case key.fa_sort_amount_desc:
            return 'f161';
        case key.fa_sort_asc:
            return 'f0de';
        case key.fa_sort_desc:
            return 'f0dd';
        case key.fa_sort_down:
            return 'f0dd';
        case key.fa_sort_numeric_asc:
            return 'f162';
        case key.fa_sort_numeric_desc:
            return 'f163';
        case key.fa_sort_up:
            return 'f0de';
        case key.fa_soundcloud:
            return 'f1be';
        case key.fa_space_shuttle:
            return 'f197';
        case key.fa_spinner:
            return 'f110';
        case key.fa_spoon:
            return 'f1b1';
        case key.fa_spotify:
            return 'f1bc';
        case key.fa_square:
            return 'f0c8';
        case key.fa_square_o:
            return 'f096';
        case key.fa_stack_exchange:
            return 'f18d';
        case key.fa_stack_overflow:
            return 'f16c';
        case key.fa_star:
            return 'f005';
        case key.fa_star_half:
            return 'f089';
        case key.fa_star_half_empty:
            return 'f123';
        case key.fa_star_half_full:
            return 'f123';
        case key.fa_star_half_o:
            return 'f123';
        case key.fa_star_o:
            return 'f006';
        case key.fa_steam:
            return 'f1b6';
        case key.fa_steam_square:
            return 'f1b7';
        case key.fa_step_backward:
            return 'f048';
        case key.fa_step_forward:
            return 'f051';
        case key.fa_stethoscope:
            return 'f0f1';
        case key.fa_sticky_note:
            return 'f249';
        case key.fa_sticky_note_o:
            return 'f24a';
        case key.fa_stop:
            return 'f04d';
        case key.fa_street_view:
            return 'f21d';
        case key.fa_strikethrough:
            return 'f0cc';
        case key.fa_stumbleupon:
            return 'f1a4';
        case key.fa_stumbleupon_circle:
            return 'f1a3';
        case key.fa_subscript:
            return 'f12c';
        case key.fa_subway:
            return 'f239';
        case key.fa_suitcase:
            return 'f0f2';
        case key.fa_sun_o:
            return 'f185';
        case key.fa_superscript:
            return 'f12b';
        case key.fa_support:
            return 'f1cd';
        case key.fa_table:
            return 'f0ce';
        case key.fa_tablet:
            return 'f10a';
        case key.fa_tachometer:
            return 'f0e4';
        case key.fa_tag:
            return 'f02b';
        case key.fa_tags:
            return 'f02c';
        case key.fa_tasks:
            return 'f0ae';
        case key.fa_taxi:
            return 'f1ba';
        case key.fa_television:
            return 'f26c';
        case key.fa_tencent_weibo:
            return 'f1d5';
        case key.fa_terminal:
            return 'f120';
        case key.fa_text_height:
            return 'f034';
        case key.fa_text_width:
            return 'f035';
        case key.fa_th:
            return 'f00a';
        case key.fa_th_large:
            return 'f009';
        case key.fa_th_list:
            return 'f00b';
        case key.fa_thumb_tack:
            return 'f08d';
        case key.fa_thumbs_down:
            return 'f165';
        case key.fa_thumbs_o_down:
            return 'f088';
        case key.fa_thumbs_o_up:
            return 'f087';
        case key.fa_thumbs_up:
            return 'f164';
        case key.fa_ticket:
            return 'f145';
        case key.fa_times:
            return 'f00d';
        case key.fa_times_circle:
            return 'f057';
        case key.fa_times_circle_o:
            return 'f05c';
        case key.fa_tint:
            return 'f043';
        case key.fa_toggle_down:
            return 'f150';
        case key.fa_toggle_left:
            return 'f191';
        case key.fa_toggle_off:
            return 'f204';
        case key.fa_toggle_on:
            return 'f205';
        case key.fa_toggle_right:
            return 'f152';
        case key.fa_toggle_up:
            return 'f151';
        case key.fa_trademark:
            return 'f25c';
        case key.fa_train:
            return 'f238';
        case key.fa_transgender:
            return 'f224';
        case key.fa_transgender_alt:
            return 'f225';
        case key.fa_trash:
            return 'f1f8';
        case key.fa_trash_o:
            return 'f014';
        case key.fa_tree:
            return 'f1bb';
        case key.fa_trello:
            return 'f181';
        case key.fa_tripadvisor:
            return 'f262';
        case key.fa_trophy:
            return 'f091';
        case key.fa_truck:
            return 'f0d1';
        case key.fa_try:
            return 'f195';
        case key.fa_tty:
            return 'f1e4';
        case key.fa_tumblr:
            return 'f173';
        case key.fa_tumblr_square:
            return 'f174';
        case key.fa_turkish_lira:
            return 'f195';
        case key.fa_tv:
            return 'f26c';
        case key.fa_twitch:
            return 'f1e8';
        case key.fa_twitter:
            return 'f099';
        case key.fa_twitter_square:
            return 'f081';
        case key.fa_umbrella:
            return 'f0e9';
        case key.fa_underline:
            return 'f0cd';
        case key.fa_undo:
            return 'f0e2';
        case key.fa_university:
            return 'f19c';
        case key.fa_unlink:
            return 'f127';
        case key.fa_unlock:
            return 'f09c';
        case key.fa_unlock_alt:
            return 'f13e';
        case key.fa_unsorted:
            return 'f0dc';
        case key.fa_upload:
            return 'f093';
        case key.fa_usd:
            return 'f155';
        case key.fa_user:
            return 'f007';
        case key.fa_user_md:
            return 'f0f0';
        case key.fa_user_plus:
            return 'f234';
        case key.fa_user_secret:
            return 'f21b';
        case key.fa_user_times:
            return 'f235';
        case key.fa_users:
            return 'f0c0';
        case key.fa_venus:
            return 'f221';
        case key.fa_venus_double:
            return 'f226';
        case key.fa_venus_mars:
            return 'f228';
        case key.fa_viacoin:
            return 'f237';
        case key.fa_video_camera:
            return 'f03d';
        case key.fa_vimeo:
            return 'f27d';
        case key.fa_vimeo_square:
            return 'f194';
        case key.fa_vine:
            return 'f1ca';
        case key.fa_vk:
            return 'f189';
        case key.fa_volume_down:
            return 'f027';
        case key.fa_volume_off:
            return 'f026';
        case key.fa_volume_up:
            return 'f028';
        case key.fa_warning:
            return 'f071';
        case key.fa_wechat:
            return 'f1d7';
        case key.fa_weibo:
            return 'f18a';
        case key.fa_weixin:
            return 'f1d7';
        case key.fa_whatsapp:
            return 'f232';
        case key.fa_wheelchair:
            return 'f193';
        case key.fa_wifi:
            return 'f1eb';
        case key.fa_wikipedia_w:
            return 'f266';
        case key.fa_windows:
            return 'f17a';
        case key.fa_won:
            return 'f159';
        case key.fa_wordpress:
            return 'f19a';
        case key.fa_wrench:
            return 'f0ad';
        case key.fa_xing:
            return 'f168';
        case key.fa_xing_square:
            return 'f169';
        case key.fa_y_combinator:
            return 'f23b';
        case key.fa_y_combinator_square:
            return 'f1d4';
        case key.fa_yahoo:
            return 'f19e';
        case key.fa_yc:
            return 'f23b';
        case key.fa_yc_square:
            return 'f1d4';
        case key.fa_yelp:
            return 'f1e9';
        case key.fa_yen:
            return 'f157';
        case key.fa_youtube:
            return 'f167';
        case key.fa_youtube_play:
            return 'f16a';
        case key.fa_youtube_square:
            return 'f166';
    }

    return "?";
}

1 comment: