常规功能和模块自定义系统 (cfcmms)—025开发日志(创建iconCls的field)

常规功能和模块自定义系统 (cfcmms)—025开发日志(创建iconCls的field)

　　这一节是临时插入的工作日志。

　　在本系统中可以自定义某些图标，图标的样式都是手工录入的，为了能直观的选择iconCls中的图标，开发了此控件。extjs中内置了font-awesome字体，里面有好几百个字体图标，这种图标象文字一样在放大缩小的时候不会失真。

　　根据extjs的类的继承机制和已有的类，iconclsfield 继承自pickerfield , 在下拉框中展开图标的选择view，双击选中图标，返回给field。选择的界面如下：

　　下面开始创建这个控件类。

1､iconcls 数据组织，根据ext中自带的font-awesome下面的scss文件“_icons.scss”，可以把里面的内容用正则表达式替换成我们需要的数据。根据组织好的数据，生成store类。

/** * 存放FontAwesome 等字体文件的css选择项，可以直接供 iconCls的字段下拉选择 */Ext.define('app.store.IconclsStore', {extend : 'Ext.data.Store',fields : [ 'name' ],proxy : {type : 'ajax',url : 'extradata/iconcls.json',reader : {type : 'json'}},})

　　2､在app.ux中创建目录iconcls，创建Field类。

/** * font-awesome 的图标字体选择字段，会在下拉框中显示所有的font-awesome(4.2版)图标，双击图标选中 *  * 作者：蒋锋 2015-12-15 *  */Ext.define('app.ux.iconcls.Field', {extend : 'Ext.form.field.Picker',alias : 'widget.iconclsfield',mixins : [ 'app.ux.iconcls.Selection' ],requires : [ 'app.ux.iconcls.Selector' ],// 是否可以手动输入iconCls, 应该是可以的，除了font-awesome的字体之外，// 还可以加入自定义的css或是其他字体文件的csseditable : true,matchFieldWidth : false,cls : Ext.baseCSSPrefix + 'iconclspicker-field',_iconClass : Ext.baseCSSPrefix + 'iconclspicker-field-swatch-inner ',// 在iconcls text 前面加上你所选择的图标beforeBodyEl : [ '<div class="' + Ext.baseCSSPrefix+ 'iconclspicker-field-swatch">' + '<div id="{id}_icon" class="'+ this._iconClass + '"></div>' + '</div>' ],// 下拉框中选择iconcls的界面配置config : {popup : {lazy : true,$value : {xtype : 'window',closeAction : 'hide',referenceHolder : true,minWidth : 400,minHeight : 300,width : 500,height : 400,layout : 'fit',header : false,resizable : true,items : [ {xtype : 'iconclsselector',reference : 'selector'} ]}}},// 创建下拉框createPicker : function() {var me = this, popup = me.getPopup(), picker;me.iconclsPickerWindow = popup = Ext.create(popup);me.iconclsPicker = picker = popup.lookupReference('selector');me.iconclsPicker.setIconcls(me.getIconcls());// 双击下拉框中的图标选择picker.on({selected : 'onIconclsPickerSelect',scope : me});popup.on({close : 'onIconclsPickerCancel',scope : me})return me.iconclsPickerWindow;},// 放弃了选择onIconclsPickerCancel : function() {this.collapse();},setValue : function(iconcls) {var me = this;me.callParent([ iconcls ]);me.updateValue(iconcls);},onIconclsPickerSelect : function(iconclsPicker, iconcls) {this.setValue(iconcls);this.collapse();},// 在iconcls变更之后，把text前面的图标换掉，还有下拉框中的选择的图标也选中到当前值updateValue : function(iconcls) {var me = this, c;if (!me.syncing) {me.syncing = true;me.setIconcls(iconcls);me.syncing = false;}c = me.getIconcls();var inner = document.getElementById(this.id + '_icon');if (inner)inner.className = this._iconClass + c;if (me.iconclsPicker) {me.iconclsPicker.setIconcls(c);}},afterRender : function() {this.callParent();this.updateValue(this.value);},})

/** *  */Ext.define('app.ux.iconcls.Selection', {mixinId : 'iconclsselection',config : {value : null,iconcls : null}});

　　3､继承自view,创建选择图标的view控件。这个控件有一个控制器SelectorController。

/** * 选择图标的view,用来显示所有的图标，双击可以选中，在view显示的时候，会自动定义到当前图标，此类用了mvvm *  * 作者：蒋锋 2015－12-15 */Ext.define('app.ux.iconcls.Selector', {extend : 'Ext.view.View',alias : 'widget.iconclsselector',controller : 'iconcls-selectorcontroller',requires : [ 'app.ux.iconcls.SelectorController' ],defaultBindProperty : 'value',twoWayBindable : [ 'value' ],layout : 'fit',baseCls : 'iconcls-view',store : 'IconclsStore',autoScroll : true,trackOver : true,overItemCls : 'x-item-over',itemSelector : 'div.iconclsSelector',tpl : new Ext.XTemplate('<tpl for=".">','<div class="iconclsSelector {name}" data-qtip="{name}">', '</div>','</tpl>'),listeners : {itemdblclick : 'onItemdblClick',render : function() {if (this.getStore().getCount() == 0)this.getStore().load();}},setIconcls : function(iconcls) {this.getSelectionModel().select(this.getStore().findRecord('name', iconcls));}})

　　控制器：

/** * 选择图标的view 的 controller *  */Ext.define('app.ux.iconcls.SelectorController', {extend : 'Ext.app.ViewController',alias : 'controller.iconcls-selectorcontroller',onItemdblClick : function(view, record, item, index, e, eOpts) {// 双击选中view.fireEvent('selected', view, record.get('name'));},initViewModel : function() {var me = this, view = me.getView();view.childViewModel.bind('{selectedIconcls}', function(iconcls) {view.setIconcls(iconcls);});}})

　　4､用到的css

.iconcls-view .iconclsSelector {float: left;margin: 4px;margin-right: 0;padding: 5px;font-size: 16px;text-align: center;vertical-align: middle;width: 25px;height: 25px;}.iconcls-view .x-item-over {border: 1px solid #dddddd;background: #efefef repeat-x left top;padding: 4px;}.iconcls-view .x-item-selected {background: #eff5fb no-repeat right bottom;border: 1px solid #99bbe8;padding: 4px;}.x-iconclspicker-field .x-form-item-body {    position: relative;}.x-iconclspicker-field input {    padding-left: 26px;}.x-iconclspicker-field-swatch-inner {position: absolute;height: 100%;width: 100%;font-size: 18px;color: #919191;}.x-iconclspicker-field-swatch {position: absolute;width: 20px;height: 20px;left: 4px;top: 4px;bottom: 0px;margin: auto;}

　　5､iconcls的数据。iconcls.json

[ {name : 'fa fa-glass'}, {name : 'fa fa-music'}, {name : 'fa fa-search'}, {name : 'fa fa-envelope-o'}, {name : 'fa fa-heart'}, {name : 'fa fa-star'}, {name : 'fa fa-star-o'}, {name : 'fa fa-user'}, {name : 'fa fa-film'}, {name : 'fa fa-th-large'}, {name : 'fa fa-th'}, {name : 'fa fa-th-list'}, {name : 'fa fa-check'}, {name : 'fa fa-remove'}, {name : 'fa fa-close'}, {name : 'fa fa-times'}, {name : 'fa fa-search-plus'}, {name : 'fa fa-search-minus'}, {name : 'fa fa-power-off'}, {name : 'fa fa-signal'}, {name : 'fa fa-gear'}, {name : 'fa fa-cog'}, {name : 'fa fa-trash-o'}, {name : 'fa fa-home'}, {name : 'fa fa-file-o'}, {name : 'fa fa-clock-o'}, {name : 'fa fa-road'}, {name : 'fa fa-download'}, {name : 'fa fa-arrow-circle-o-down'}, {name : 'fa fa-arrow-circle-o-up'}, {name : 'fa fa-inbox'}, {name : 'fa fa-play-circle-o'}, {name : 'fa fa-rotate-right'}, {name : 'fa fa-repeat'}, {name : 'fa fa-refresh'}, {name : 'fa fa-list-alt'}, {name : 'fa fa-lock'}, {name : 'fa fa-flag'}, {name : 'fa fa-headphones'}, {name : 'fa fa-volume-off'}, {name : 'fa fa-volume-down'}, {name : 'fa fa-volume-up'}, {name : 'fa fa-qrcode'}, {name : 'fa fa-barcode'}, {name : 'fa fa-tag'}, {name : 'fa fa-tags'}, {name : 'fa fa-book'}, {name : 'fa fa-bookmark'}, {name : 'fa fa-print'}, {name : 'fa fa-camera'}, {name : 'fa fa-font'}, {name : 'fa fa-bold'}, {name : 'fa fa-italic'}, {name : 'fa fa-text-height'}, {name : 'fa fa-text-width'}, {name : 'fa fa-align-left'}, {name : 'fa fa-align-center'}, {name : 'fa fa-align-right'}, {name : 'fa fa-align-justify'}, {name : 'fa fa-list'}, {name : 'fa fa-dedent'}, {name : 'fa fa-outdent'}, {name : 'fa fa-indent'}, {name : 'fa fa-video-camera'}, {name : 'fa fa-photo'}, {name : 'fa fa-image'}, {name : 'fa fa-picture-o'}, {name : 'fa fa-pencil'}, {name : 'fa fa-map-marker'}, {name : 'fa fa-adjust'}, {name : 'fa fa-tint'}, {name : 'fa fa-edit'}, {name : 'fa fa-pencil-square-o'}, {name : 'fa fa-share-square-o'}, {name : 'fa fa-check-square-o'}, {name : 'fa fa-arrows'}, {name : 'fa fa-step-backward'}, {name : 'fa fa-fast-backward'}, {name : 'fa fa-backward'}, {name : 'fa fa-play'}, {name : 'fa fa-pause'}, {name : 'fa fa-stop'}, {name : 'fa fa-forward'}, {name : 'fa fa-fast-forward'}, {name : 'fa fa-step-forward'}, {name : 'fa fa-eject'}, {name : 'fa fa-chevron-left'}, {name : 'fa fa-chevron-right'}, {name : 'fa fa-plus-circle'}, {name : 'fa fa-minus-circle'}, {name : 'fa fa-times-circle'}, {name : 'fa fa-check-circle'}, {name : 'fa fa-question-circle'}, {name : 'fa fa-info-circle'}, {name : 'fa fa-crosshairs'}, {name : 'fa fa-times-circle-o'}, {name : 'fa fa-check-circle-o'}, {name : 'fa fa-ban'}, {name : 'fa fa-arrow-left'}, {name : 'fa fa-arrow-right'}, {name : 'fa fa-arrow-up'}, {name : 'fa fa-arrow-down'}, {name : 'fa fa-mail-forward'}, {name : 'fa fa-share'}, {name : 'fa fa-expand'}, {name : 'fa fa-compress'}, {name : 'fa fa-plus'}, {name : 'fa fa-minus'}, {name : 'fa fa-asterisk'}, {name : 'fa fa-exclamation-circle'}, {name : 'fa fa-gift'}, {name : 'fa fa-leaf'}, {name : 'fa fa-fire'}, {name : 'fa fa-eye'}, {name : 'fa fa-eye-slash'}, {name : 'fa fa-warning'}, {name : 'fa fa-exclamation-triangle'}, {name : 'fa fa-plane'}, {name : 'fa fa-calendar'}, {name : 'fa fa-random'}, {name : 'fa fa-comment'}, {name : 'fa fa-magnet'}, {name : 'fa fa-chevron-up'}, {name : 'fa fa-chevron-down'}, {name : 'fa fa-retweet'}, {name : 'fa fa-shopping-cart'}, {name : 'fa fa-folder'}, {name : 'fa fa-folder-open'}, {name : 'fa fa-arrows-v'}, {name : 'fa fa-arrows-h'}, {name : 'fa fa-bar-chart-o'}, {name : 'fa fa-bar-chart'}, {name : 'fa fa-twitter-square'}, {name : 'fa fa-facebook-square'}, {name : 'fa fa-camera-retro'}, {name : 'fa fa-key'}, {name : 'fa fa-gears'}, {name : 'fa fa-cogs'}, {name : 'fa fa-comments'}, {name : 'fa fa-thumbs-o-up'}, {name : 'fa fa-thumbs-o-down'}, {name : 'fa fa-star-half'}, {name : 'fa fa-heart-o'}, {name : 'fa fa-sign-out'}, {name : 'fa fa-linkedin-square'}, {name : 'fa fa-thumb-tack'}, {name : 'fa fa-external-link'}, {name : 'fa fa-sign-in'}, {name : 'fa fa-trophy'}, {name : 'fa fa-github-square'}, {name : 'fa fa-upload'}, {name : 'fa fa-lemon-o'}, {name : 'fa fa-phone'}, {name : 'fa fa-square-o'}, {name : 'fa fa-bookmark-o'}, {name : 'fa fa-phone-square'}, {name : 'fa fa-twitter'}, {name : 'fa fa-facebook-f'}, {name : 'fa fa-facebook'}, {name : 'fa fa-github'}, {name : 'fa fa-unlock'}, {name : 'fa fa-credit-card'}, {name : 'fa fa-rss'}, {name : 'fa fa-hdd-o'}, {name : 'fa fa-bullhorn'}, {name : 'fa fa-bell'}, {name : 'fa fa-certificate'}, {name : 'fa fa-hand-o-right'}, {name : 'fa fa-hand-o-left'}, {name : 'fa fa-hand-o-up'}, {name : 'fa fa-hand-o-down'}, {name : 'fa fa-arrow-circle-left'}, {name : 'fa fa-arrow-circle-right'}, {name : 'fa fa-arrow-circle-up'}, {name : 'fa fa-arrow-circle-down'}, {name : 'fa fa-globe'}, {name : 'fa fa-wrench'}, {name : 'fa fa-tasks'}, {name : 'fa fa-filter'}, {name : 'fa fa-briefcase'}, {name : 'fa fa-arrows-alt'}, {name : 'fa fa-group'}, {name : 'fa fa-users'}, {name : 'fa fa-chain'}, {name : 'fa fa-link'}, {name : 'fa fa-cloud'}, {name : 'fa fa-flask'}, {name : 'fa fa-cut'}, {name : 'fa fa-scissors'}, {name : 'fa fa-copy'}, {name : 'fa fa-files-o'}, {name : 'fa fa-paperclip'}, {name : 'fa fa-save'}, {name : 'fa fa-floppy-o'}, {name : 'fa fa-square'}, {name : 'fa fa-navicon'}, {name : 'fa fa-reorder'}, {name : 'fa fa-bars'}, {name : 'fa fa-list-ul'}, {name : 'fa fa-list-ol'}, {name : 'fa fa-strikethrough'}, {name : 'fa fa-underline'}, {name : 'fa fa-table'}, {name : 'fa fa-magic'}, {name : 'fa fa-truck'}, {name : 'fa fa-pinterest'}, {name : 'fa fa-pinterest-square'}, {name : 'fa fa-google-plus-square'}, {name : 'fa fa-google-plus'}, {name : 'fa fa-money'}, {name : 'fa fa-caret-down'}, {name : 'fa fa-caret-up'}, {name : 'fa fa-caret-left'}, {name : 'fa fa-caret-right'}, {name : 'fa fa-columns'}, {name : 'fa fa-unsorted'}, {name : 'fa fa-sort'}, {name : 'fa fa-sort-down'}, {name : 'fa fa-sort-desc'}, {name : 'fa fa-sort-up'}, {name : 'fa fa-sort-asc'}, {name : 'fa fa-envelope'}, {name : 'fa fa-linkedin'}, {name : 'fa fa-rotate-left'}, {name : 'fa fa-undo'}, {name : 'fa fa-legal'}, {name : 'fa fa-gavel'}, {name : 'fa fa-dashboard'}, {name : 'fa fa-tachometer'}, {name : 'fa fa-comment-o'}, {name : 'fa fa-comments-o'}, {name : 'fa fa-flash'}, {name : 'fa fa-bolt'}, {name : 'fa fa-sitemap'}, {name : 'fa fa-umbrella'}, {name : 'fa fa-paste'}, {name : 'fa fa-clipboard'}, {name : 'fa fa-lightbulb-o'}, {name : 'fa fa-exchange'}, {name : 'fa fa-cloud-download'}, {name : 'fa fa-cloud-upload'}, {name : 'fa fa-user-md'}, {name : 'fa fa-stethoscope'}, {name : 'fa fa-suitcase'}, {name : 'fa fa-bell-o'}, {name : 'fa fa-coffee'}, {name : 'fa fa-cutlery'}, {name : 'fa fa-file-text-o'}, {name : 'fa fa-building-o'}, {name : 'fa fa-hospital-o'}, {name : 'fa fa-ambulance'}, {name : 'fa fa-medkit'}, {name : 'fa fa-fighter-jet'}, {name : 'fa fa-beer'}, {name : 'fa fa-h-square'}, {name : 'fa fa-plus-square'}, {name : 'fa fa-angle-double-left'}, {name : 'fa fa-angle-double-right'}, {name : 'fa fa-angle-double-up'}, {name : 'fa fa-angle-double-down'}, {name : 'fa fa-angle-left'}, {name : 'fa fa-angle-right'}, {name : 'fa fa-angle-up'}, {name : 'fa fa-angle-down'}, {name : 'fa fa-desktop'}, {name : 'fa fa-laptop'}, {name : 'fa fa-tablet'}, {name : 'fa fa-mobile-phone'}, {name : 'fa fa-mobile'}, {name : 'fa fa-circle-o'}, {name : 'fa fa-quote-left'}, {name : 'fa fa-quote-right'}, {name : 'fa fa-spinner'}, {name : 'fa fa-circle'}, {name : 'fa fa-mail-reply'}, {name : 'fa fa-reply'}, {name : 'fa fa-github-alt'}, {name : 'fa fa-folder-o'}, {name : 'fa fa-folder-open-o'}, {name : 'fa fa-smile-o'}, {name : 'fa fa-frown-o'}, {name : 'fa fa-meh-o'}, {name : 'fa fa-gamepad'}, {name : 'fa fa-keyboard-o'}, {name : 'fa fa-flag-o'}, {name : 'fa fa-flag-checkered'}, {name : 'fa fa-terminal'}, {name : 'fa fa-code'}, {name : 'fa fa-mail-reply-all'}, {name : 'fa fa-reply-all'}, {name : 'fa fa-star-half-empty'}, {name : 'fa fa-star-half-full'}, {name : 'fa fa-star-half-o'}, {name : 'fa fa-location-arrow'}, {name : 'fa fa-crop'}, {name : 'fa fa-code-fork'}, {name : 'fa fa-unlink'}, {name : 'fa fa-chain-broken'}, {name : 'fa fa-question'}, {name : 'fa fa-info'}, {name : 'fa fa-exclamation'}, {name : 'fa fa-superscript'}, {name : 'fa fa-subscript'}, {name : 'fa fa-eraser'}, {name : 'fa fa-puzzle-piece'}, {name : 'fa fa-microphone'}, {name : 'fa fa-microphone-slash'}, {name : 'fa fa-shield'}, {name : 'fa fa-calendar-o'}, {name : 'fa fa-fire-extinguisher'}, {name : 'fa fa-rocket'}, {name : 'fa fa-maxcdn'}, {name : 'fa fa-chevron-circle-left'}, {name : 'fa fa-chevron-circle-right'}, {name : 'fa fa-chevron-circle-up'}, {name : 'fa fa-chevron-circle-down'}, {name : 'fa fa-html5'}, {name : 'fa fa-css3'}, {name : 'fa fa-anchor'}, {name : 'fa fa-unlock-alt'}, {name : 'fa fa-bullseye'}, {name : 'fa fa-ellipsis-h'}, {name : 'fa fa-ellipsis-v'}, {name : 'fa fa-rss-square'}, {name : 'fa fa-play-circle'}, {name : 'fa fa-ticket'}, {name : 'fa fa-minus-square'}, {name : 'fa fa-minus-square-o'}, {name : 'fa fa-level-up'}, {name : 'fa fa-level-down'}, {name : 'fa fa-check-square'}, {name : 'fa fa-pencil-square'}, {name : 'fa fa-external-link-square'}, {name : 'fa fa-share-square'}, {name : 'fa fa-compass'}, {name : 'fa fa-toggle-down'}, {name : 'fa fa-caret-square-o-down'}, {name : 'fa fa-toggle-up'}, {name : 'fa fa-caret-square-o-up'}, {name : 'fa fa-toggle-right'}, {name : 'fa fa-caret-square-o-right'}, {name : 'fa fa-euro'}, {name : 'fa fa-eur'}, {name : 'fa fa-gbp'}, {name : 'fa fa-dollar'}, {name : 'fa fa-usd'}, {name : 'fa fa-rupee'}, {name : 'fa fa-inr'}, {name : 'fa fa-cny'}, {name : 'fa fa-rmb'}, {name : 'fa fa-yen'}, {name : 'fa fa-jpy'}, {name : 'fa fa-ruble'}, {name : 'fa fa-rouble'}, {name : 'fa fa-rub'}, {name : 'fa fa-won'}, {name : 'fa fa-krw'}, {name : 'fa fa-bitcoin'}, {name : 'fa fa-btc'}, {name : 'fa fa-file'}, {name : 'fa fa-file-text'}, {name : 'fa fa-sort-alpha-asc'}, {name : 'fa fa-sort-alpha-desc'}, {name : 'fa fa-sort-amount-asc'}, {name : 'fa fa-sort-amount-desc'}, {name : 'fa fa-sort-numeric-asc'}, {name : 'fa fa-sort-numeric-desc'}, {name : 'fa fa-thumbs-up'}, {name : 'fa fa-thumbs-down'}, {name : 'fa fa-youtube-square'}, {name : 'fa fa-youtube'}, {name : 'fa fa-xing'}, {name : 'fa fa-xing-square'}, {name : 'fa fa-youtube-play'}, {name : 'fa fa-dropbox'}, {name : 'fa fa-stack-overflow'}, {name : 'fa fa-instagram'}, {name : 'fa fa-flickr'}, {name : 'fa fa-adn'}, {name : 'fa fa-bitbucket'}, {name : 'fa fa-bitbucket-square'}, {name : 'fa fa-tumblr'}, {name : 'fa fa-tumblr-square'}, {name : 'fa fa-long-arrow-down'}, {name : 'fa fa-long-arrow-up'}, {name : 'fa fa-long-arrow-left'}, {name : 'fa fa-long-arrow-right'}, {name : 'fa fa-apple'}, {name : 'fa fa-windows'}, {name : 'fa fa-android'}, {name : 'fa fa-linux'}, {name : 'fa fa-dribbble'}, {name : 'fa fa-skype'}, {name : 'fa fa-foursquare'}, {name : 'fa fa-trello'}, {name : 'fa fa-female'}, {name : 'fa fa-male'}, {name : 'fa fa-gittip'}, {name : 'fa fa-gratipay'}, {name : 'fa fa-sun-o'}, {name : 'fa fa-moon-o'}, {name : 'fa fa-archive'}, {name : 'fa fa-bug'}, {name : 'fa fa-vk'}, {name : 'fa fa-weibo'}, {name : 'fa fa-renren'}, {name : 'fa fa-pagelines'}, {name : 'fa fa-stack-exchange'}, {name : 'fa fa-arrow-circle-o-right'}, {name : 'fa fa-arrow-circle-o-left'}, {name : 'fa fa-toggle-left'}, {name : 'fa fa-caret-square-o-left'}, {name : 'fa fa-dot-circle-o'}, {name : 'fa fa-wheelchair'}, {name : 'fa fa-vimeo-square'}, {name : 'fa fa-turkish-lira'}, {name : 'fa fa-try'}, {name : 'fa fa-plus-square-o'}, {name : 'fa fa-space-shuttle'}, {name : 'fa fa-slack'}, {name : 'fa fa-envelope-square'}, {name : 'fa fa-wordpress'}, {name : 'fa fa-openid'}, {name : 'fa fa-institution'}, {name : 'fa fa-bank'}, {name : 'fa fa-university'}, {name : 'fa fa-mortar-board'}, {name : 'fa fa-graduation-cap'}, {name : 'fa fa-yahoo'}, {name : 'fa fa-google'}, {name : 'fa fa-reddit'}, {name : 'fa fa-reddit-square'}, {name : 'fa fa-stumbleupon-circle'}, {name : 'fa fa-stumbleupon'}, {name : 'fa fa-delicious'}, {name : 'fa fa-digg'}, {name : 'fa fa-pied-piper'}, {name : 'fa fa-pied-piper-alt'}, {name : 'fa fa-drupal'}, {name : 'fa fa-joomla'}, {name : 'fa fa-language'}, {name : 'fa fa-fax'}, {name : 'fa fa-building'}, {name : 'fa fa-child'}, {name : 'fa fa-paw'}, {name : 'fa fa-spoon'}, {name : 'fa fa-cube'}, {name : 'fa fa-cubes'}, {name : 'fa fa-behance'}, {name : 'fa fa-behance-square'}, {name : 'fa fa-steam'}, {name : 'fa fa-steam-square'}, {name : 'fa fa-recycle'}, {name : 'fa fa-automobile'}, {name : 'fa fa-car'}, {name : 'fa fa-cab'}, {name : 'fa fa-taxi'}, {name : 'fa fa-tree'}, {name : 'fa fa-spotify'}, {name : 'fa fa-deviantart'}, {name : 'fa fa-soundcloud'}, {name : 'fa fa-database'}, {name : 'fa fa-file-pdf-o'}, {name : 'fa fa-file-word-o'}, {name : 'fa fa-file-excel-o'}, {name : 'fa fa-file-powerpoint-o'}, {name : 'fa fa-file-photo-o'}, {name : 'fa fa-file-picture-o'}, {name : 'fa fa-file-image-o'}, {name : 'fa fa-file-zip-o'}, {name : 'fa fa-file-archive-o'}, {name : 'fa fa-file-sound-o'}, {name : 'fa fa-file-audio-o'}, {name : 'fa fa-file-movie-o'}, {name : 'fa fa-file-video-o'}, {name : 'fa fa-file-code-o'}, {name : 'fa fa-vine'}, {name : 'fa fa-codepen'}, {name : 'fa fa-jsfiddle'}, {name : 'fa fa-life-bouy'}, {name : 'fa fa-life-buoy'}, {name : 'fa fa-life-saver'}, {name : 'fa fa-support'}, {name : 'fa fa-life-ring'}, {name : 'fa fa-circle-o-notch'}, {name : 'fa fa-ra'}, {name : 'fa fa-rebel'}, {name : 'fa fa-ge'}, {name : 'fa fa-empire'}, {name : 'fa fa-git-square'}, {name : 'fa fa-git'}, {name : 'fa fa-hacker-news'}, {name : 'fa fa-tencent-weibo'}, {name : 'fa fa-qq'}, {name : 'fa fa-wechat'}, {name : 'fa fa-weixin'}, {name : 'fa fa-send'}, {name : 'fa fa-paper-plane'}, {name : 'fa fa-send-o'}, {name : 'fa fa-paper-plane-o'}, {name : 'fa fa-history'}, {name : 'fa fa-genderless'}, {name : 'fa fa-circle-thin'}, {name : 'fa fa-header'}, {name : 'fa fa-paragraph'}, {name : 'fa fa-sliders'}, {name : 'fa fa-share-alt'}, {name : 'fa fa-share-alt-square'}, {name : 'fa fa-bomb'}, {name : 'fa fa-soccer-ball-o'}, {name : 'fa fa-futbol-o'}, {name : 'fa fa-tty'}, {name : 'fa fa-binoculars'}, {name : 'fa fa-plug'}, {name : 'fa fa-slideshare'}, {name : 'fa fa-twitch'}, {name : 'fa fa-yelp'}, {name : 'fa fa-newspaper-o'}, {name : 'fa fa-wifi'}, {name : 'fa fa-calculator'}, {name : 'fa fa-paypal'}, {name : 'fa fa-google-wallet'}, {name : 'fa fa-cc-visa'}, {name : 'fa fa-cc-mastercard'}, {name : 'fa fa-cc-discover'}, {name : 'fa fa-cc-amex'}, {name : 'fa fa-cc-paypal'}, {name : 'fa fa-cc-stripe'}, {name : 'fa fa-bell-slash'}, {name : 'fa fa-bell-slash-o'}, {name : 'fa fa-trash'}, {name : 'fa fa-copyright'}, {name : 'fa fa-at'}, {name : 'fa fa-eyedropper'}, {name : 'fa fa-paint-brush'}, {name : 'fa fa-birthday-cake'}, {name : 'fa fa-area-chart'}, {name : 'fa fa-pie-chart'}, {name : 'fa fa-line-chart'}, {name : 'fa fa-lastfm'}, {name : 'fa fa-lastfm-square'}, {name : 'fa fa-toggle-off'}, {name : 'fa fa-toggle-on'}, {name : 'fa fa-bicycle'}, {name : 'fa fa-bus'}, {name : 'fa fa-ioxhost'}, {name : 'fa fa-angellist'}, {name : 'fa fa-cc'}, {name : 'fa fa-shekel'}, {name : 'fa fa-sheqel'}, {name : 'fa fa-ils'}, {name : 'fa fa-meanpath'}, {name : 'fa fa-buysellads'}, {name : 'fa fa-connectdevelop'}, {name : 'fa fa-dashcube'}, {name : 'fa fa-forumbee'}, {name : 'fa fa-leanpub'}, {name : 'fa fa-sellsy'}, {name : 'fa fa-shirtsinbulk'}, {name : 'fa fa-simplybuilt'}, {name : 'fa fa-skyatlas'}, {name : 'fa fa-cart-plus'}, {name : 'fa fa-cart-arrow-down'}, {name : 'fa fa-diamond'}, {name : 'fa fa-ship'}, {name : 'fa fa-user-secret'}, {name : 'fa fa-motorcycle'}, {name : 'fa fa-street-view'}, {name : 'fa fa-heartbeat'}, {name : 'fa fa-venus'}, {name : 'fa fa-mars'}, {name : 'fa fa-mercury'}, {name : 'fa fa-transgender'}, {name : 'fa fa-transgender-alt'}, {name : 'fa fa-venus-double'}, {name : 'fa fa-mars-double'}, {name : 'fa fa-venus-mars'}, {name : 'fa fa-mars-stroke'}, {name : 'fa fa-mars-stroke-v'}, {name : 'fa fa-mars-stroke-h'}, {name : 'fa fa-neuter'}, {name : 'fa fa-facebook-official'}, {name : 'fa fa-pinterest-p'}, {name : 'fa fa-whatsapp'}, {name : 'fa fa-server'}, {name : 'fa fa-user-plus'}, {name : 'fa fa-user-times'}, {name : 'fa fa-hotel'}, {name : 'fa fa-bed'}, {name : 'fa fa-viacoin'}, {name : 'fa fa-train'}, {name : 'fa fa-subway'}, {name : 'fa fa-medium'} ]