• appreciate
    
  • check
    
  • close
    
  • edit
    
  • emoji
    
  • favor_fill
    
  • favor
    
  • loading
    
  • location_fill
    
  • location
    
  • phone
    
  • round_check_fill
    
  • round_check
    
  • round_close_fill
    
  • round_close
    
  • round_right_fill
    
  • round_right
    
  • search
    
  • taxi
    
  • time_fill
    
  • time
    
  • unfold
    
  • warn_fill
    
  • warn
    
  • camera_fill
    
  • camera
    
  • comment_fill
    
  • comment
    
  • like_fill
    
  • like
    
  • notification_fill
    
  • notification
    
  • order
    
  • deliver
    
  • evaluate
    
  • pay
    
  • send
    
  • shop
    
  • wang
    
  • back
    
  • cascades
    
  • list
    
  • more
    
  • scan
    
  • settings
    
  • question_fill
    
  • question
    
  • shop_fill
    
  • form
    
  • wang_fill
    
  • pic
    
  • filter
    
  • footprint
    
  • top
    
  • pull_down
    
  • pull_up
    
  • right
    
  • refresh
    
  • more_android
    
  • delete_fill
    
  • refund
    
  • cart
    
  • qr_code
    
  • remind
    
  • delete
    
  • profile
    
  • home
    
  • cart_fill
    
  • home_fill
    
  • message
    
  • address_book
    
  • link
    
  • lock
    
  • unlock
    
  • vip
    
  • weibo
    
  • activity
    
  • friend_add_fill
    
  • friend_add
    
  • friend_famous
    
  • friend
    
  • goods
    
  • selection
    
  • present
    
  • square_check_fill
    
  • square
    
  • square_check
    
  • round
    
  • round_add_fill
    
  • round_add
    
  • add
    
  • notification_forbid_fill
    
  • fold
    
  • game
    
  • redpacket
    
  • selection_fill
    
  • similar
    
  • appreciate_fill
    
  • info_fill
    
  • info
    
  • forward_fill
    
  • forward
    
  • recharge_fill
    
  • recharge
    
  • vipcard
    
  • voice
    
  • voice_fill
    
  • friend_favor
    
  • wifi
    
  • share
    
  • we_fill
    
  • we
    
  • light_auto
    
  • light_forbid
    
  • light_fill
    
  • camera_rotate
    
  • light
    
  • bar_code
    
  • flashlight_close
    
  • flashlight_open
    
  • search_list
    
  • service
    
  • sort
    
  • down
    
  • mobile
    
  • mobile_fill
    
  • copy
    
  • countdown
    
  • notice_fill
    
  • notice
    
  • upstage_fill
    
  • upstage
    
  • brand_fill
    
  • brand
    
  • choiceness_fill
    
  • choiceness
    
  • creative_fill
    
  • creative
    
  • female
    
  • keyboard
    
  • male
    
  • new_fill
    
  • new
    
  • pull_left
    
  • pull_right
    
  • rank_fill
    
  • rank
    
  • bad
    
  • camera_add
    
  • focus
    
  • friend_fill
    
  • camera_add_fill
    
  • apps
    
  • pic_fill
    
  • refresh_arrow
    
  • mark_fill
    
  • mark
    
  • present_fill
    
  • repeal
    
  • album
    
  • people_fill
    
  • people
    
  • service_fill
    
  • repair
    
  • file
    
  • repair_fill
    
  • taoxiaopu
    
  • attention_fill
    
  • attention
    
  • command_fill
    
  • command
    
  • community_fill
    
  • community
    
  • read
    
  • calendar
    
  • cut
    
  • backward_fill
    
  • forward_fill
    
  • play_fill
    
  • stop
    
  • tag_fill
    
  • tag
    
  • group
    
  • all
    
  • back_delete
    
  • hot_fill
    
  • hot
    
  • post
    
  • radio_box
    
  • round_down
    
  • upload
    
  • write_fill
    
  • write
    
  • radio_box_fill
    
  • punch
    
  • shake
    
  • add
    
  • move
    
  • safe
    
  • activity_fill
    
  • crown_fill
    
  • crown
    
  • goods_fill
    
  • message_fill
    
  • profile_fill
    
  • sound
    
  • sponsor_fill
    
  • sponsor
    
  • up_block
    
  • we_block
    
  • we_unblock
    
  • my
    
  • my_fill
    
  • 微信支付
    
  • 已选择
    
  • emoji_fill
    
  • emoji_flash_fill
    
  • text
    
  • goods_favor
    
  • music_fill
    
  • music_forbid_fill
    
  • 退出
    
  • round_left_fill
    
  • triangle_down_fill
    
  • triangle_up_fill
    
  • round_left_fill
    
  • pull_down
    
  • 支付宝
    
  • 权限
    
  • 下拉框 表单
    
  • 圆点中
    
  • 权限
    
  • emoji_light
    
  • keyboard_light
    
  • record_fill
    
  • record_light
    
  • record
    
  • round_add_light
    
  • sound_light
    
  • form_fill
    
  • 请输入
    
  • sort_light
    
  • cardboard_forbid
    
  • circle_fill
    
  • circle
    
  • pic_light
    
  • shop_light
    
  • voice_light
    
  • full
    
  • mail
    
  • people_list
    
  • 通讯录
    
  • 课堂培训
    
  • goods_new_fill
    
  • goods_new
    
  • medal_fill
    
  • medal
    
  • news_fill
    
  • news_hot_fill
    
  • news_hot
    
  • news
    
  • video_fill
    
  • video
    
  • ask_fill
    
  • ask
    
  • exit
    
  • money_bag_fill
    
  • usefull_fill
    
  • usefull
    
  • money_bag
    
  • icon_login
    
  • redpacket_fill
    
  • subscription
    
  • 标识类_排班管理
    
  • home_light
    
  • my_light
    
  • community_light
    
  • cart_light
    
  • we_light
    
  • home_fill_light
    
  • cart_fill_light
    
  • community_fill_light
    
  • my_fill_light
    
  • we_fill_light
    
  • search_light
    
  • scan_light
    
  • people_list_light
    
  • message_light
    
  • close_light
    
  • add_light
    
  • 列表
    
  • profile_light
    
  • service_light
    
  • friend_add_light
    
  • edit_light
    
  • camera_light
    
  • hot_light
    
  • refresh_light
    
  • back_light
    
  • share_light
    
  • comment_light
    
  • appreciate_light
    
  • favor_light
    
  • appreciate_fill_light
    
  • comment_fill_light
    
  • wang_light
    
  • more_android_light
    
  • friend_light
    
  • more_light
    
  • goods_favor_light
    
  • goods_new_fill_light
    
  • goods_new_light
    
  • goods_light
    
  • medal_fill_light
    
  • medal_light
    
  • news_fill_light
    
  • news_hot_fill_light
    
  • news_hot_light
    
  • news_light
    
  • video_fill_light
    
  • message_fill_light
    
  • form_light
    
  • video_light
    
  • search_list_light
    
  • form_fill_light
    
  • global_light
    
  • global
    
  • favor_fill_light
    
  • delete_light
    
  • back_android
    
  • back_android_light
    
  • down_light
    
  • round_close_light
    
  • round_close_fill_light
    
  • 1010布局_导航栏
    
  • punch_light
    
  • evaluate_fill
    
  • 意见反馈
    
  • 符号-按钮
    
  • 符号-多行输入框
    
  • 符号-选项卡
    
  • furniture
    
  • dress
    
  • coffee
    
  • sports
    
  • 单据签收
    
  • 排班管理-01
    
  • 问卷调查
    
  • 进度条
    
  • 信息查询
    
  • 卡片
    
  • 轮播效果
    
  • 提示框
    
  • 汇报
    
  • 考核记录
    
  • 表格
    
  • 人事档案
    
  • 我的审批
    
  • 表单组件-下拉框
    
  • 我的考勤
    
  • 头像
    
  • 插件参数配置
    
  • AK-YK方块_fill
    
  • 功能管理
    
  • 弹出窗
    
  • 人事信息管理
    
  • 审核
    
  • daishen
    
  • 平台_考试
    
  • 绩效
    
  • 通讯录
    
  • 矩形 9
    
  • bottomleft
    
  • topleft
    
  • bottomright
    
  • topright
    
  • titleright
    
  • titleleft
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'fsiconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#fsiconfont') format('svg');
}

第二步:定义使用 iconfont 的样式

.fsiconfont {
  font-family: "fsiconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="fsiconfont">&#x33;</span>

"fsiconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • appreciate
    .fsicon-appreciate
  • check
    .fsicon-check
  • close
    .fsicon-close
  • edit
    .fsicon-edit
  • emoji
    .fsicon-emoji
  • favor_fill
    .fsicon-favorfill
  • favor
    .fsicon-favor
  • loading
    .fsicon-loading
  • location_fill
    .fsicon-locationfill
  • location
    .fsicon-location
  • phone
    .fsicon-phone
  • round_check_fill
    .fsicon-roundcheckfill
  • round_check
    .fsicon-roundcheck
  • round_close_fill
    .fsicon-roundclosefill
  • round_close
    .fsicon-roundclose
  • round_right_fill
    .fsicon-roundrightfill
  • round_right
    .fsicon-roundright
  • search
    .fsicon-search
  • taxi
    .fsicon-taxi
  • time_fill
    .fsicon-timefill
  • time
    .fsicon-time
  • unfold
    .fsicon-unfold
  • warn_fill
    .fsicon-warnfill
  • warn
    .fsicon-warn
  • camera_fill
    .fsicon-camerafill
  • camera
    .fsicon-camera
  • comment_fill
    .fsicon-commentfill
  • comment
    .fsicon-comment
  • like_fill
    .fsicon-likefill
  • like
    .fsicon-like
  • notification_fill
    .fsicon-notificationfill
  • notification
    .fsicon-notification
  • order
    .fsicon-order
  • deliver
    .fsicon-deliver
  • evaluate
    .fsicon-evaluate
  • pay
    .fsicon-pay
  • send
    .fsicon-send
  • shop
    .fsicon-shop
  • wang
    .fsicon-wang
  • back
    .fsicon-back
  • cascades
    .fsicon-cascades
  • list
    .fsicon-list
  • more
    .fsicon-more
  • scan
    .fsicon-scan
  • settings
    .fsicon-settings
  • question_fill
    .fsicon-questionfill
  • question
    .fsicon-question
  • shop_fill
    .fsicon-shopfill
  • form
    .fsicon-form
  • wang_fill
    .fsicon-wangfill
  • pic
    .fsicon-pic
  • filter
    .fsicon-filter
  • footprint
    .fsicon-footprint
  • top
    .fsicon-top
  • pull_down
    .fsicon-pulldown
  • pull_up
    .fsicon-pullup
  • right
    .fsicon-right
  • refresh
    .fsicon-refresh
  • more_android
    .fsicon-moreandroid
  • delete_fill
    .fsicon-deletefill
  • refund
    .fsicon-refund
  • cart
    .fsicon-cart
  • qr_code
    .fsicon-qrcode
  • remind
    .fsicon-remind
  • delete
    .fsicon-delete
  • profile
    .fsicon-profile
  • home
    .fsicon-home
  • cart_fill
    .fsicon-cartfill
  • home_fill
    .fsicon-homefill
  • message
    .fsicon-message
  • address_book
    .fsicon-addressbook
  • link
    .fsicon-link
  • lock
    .fsicon-lock
  • unlock
    .fsicon-unlock
  • vip
    .fsicon-vip
  • weibo
    .fsicon-weibo
  • activity
    .fsicon-activity
  • friend_add_fill
    .fsicon-friendaddfill
  • friend_add
    .fsicon-friendadd
  • friend_famous
    .fsicon-friendfamous
  • friend
    .fsicon-friend
  • goods
    .fsicon-goods
  • selection
    .fsicon-selection
  • present
    .fsicon-present
  • square_check_fill
    .fsicon-squarecheckfill
  • square
    .fsicon-square
  • square_check
    .fsicon-squarecheck
  • round
    .fsicon-round
  • round_add_fill
    .fsicon-roundaddfill
  • round_add
    .fsicon-roundadd
  • add
    .fsicon-add
  • notification_forbid_fill
    .fsicon-notificationforbidfill
  • fold
    .fsicon-fold
  • game
    .fsicon-game
  • redpacket
    .fsicon-redpacket
  • selection_fill
    .fsicon-selectionfill
  • similar
    .fsicon-similar
  • appreciate_fill
    .fsicon-appreciatefill
  • info_fill
    .fsicon-infofill
  • info
    .fsicon-info
  • forward_fill
    .fsicon-forwardfill
  • forward
    .fsicon-forward
  • recharge_fill
    .fsicon-rechargefill
  • recharge
    .fsicon-recharge
  • vipcard
    .fsicon-vipcard
  • voice
    .fsicon-voice
  • voice_fill
    .fsicon-voicefill
  • friend_favor
    .fsicon-friendfavor
  • wifi
    .fsicon-wifi
  • share
    .fsicon-share
  • we_fill
    .fsicon-wefill
  • we
    .fsicon-we
  • light_auto
    .fsicon-lightauto
  • light_forbid
    .fsicon-lightforbid
  • light_fill
    .fsicon-lightfill
  • camera_rotate
    .fsicon-camerarotate
  • light
    .fsicon-light
  • bar_code
    .fsicon-barcode
  • flashlight_close
    .fsicon-flashlightclose
  • flashlight_open
    .fsicon-flashlightopen
  • search_list
    .fsicon-searchlist
  • service
    .fsicon-service
  • sort
    .fsicon-sort
  • down
    .fsicon-down
  • mobile
    .fsicon-mobile
  • mobile_fill
    .fsicon-mobilefill
  • copy
    .fsicon-copy
  • countdown
    .fsicon-countdown
  • notice_fill
    .fsicon-noticefill
  • notice
    .fsicon-notice
  • upstage_fill
    .fsicon-upstagefill
  • upstage
    .fsicon-upstage
  • brand_fill
    .fsicon-brandfill
  • brand
    .fsicon-brand
  • choiceness_fill
    .fsicon-choicenessfill
  • choiceness
    .fsicon-choiceness
  • creative_fill
    .fsicon-creativefill
  • creative
    .fsicon-creative
  • female
    .fsicon-female
  • keyboard
    .fsicon-keyboard
  • male
    .fsicon-male
  • new_fill
    .fsicon-newfill
  • new
    .fsicon-new
  • pull_left
    .fsicon-pullleft
  • pull_right
    .fsicon-pullright
  • rank_fill
    .fsicon-rankfill
  • rank
    .fsicon-rank
  • bad
    .fsicon-bad
  • camera_add
    .fsicon-cameraadd
  • focus
    .fsicon-focus
  • friend_fill
    .fsicon-friendfill
  • camera_add_fill
    .fsicon-cameraaddfill
  • apps
    .fsicon-apps
  • pic_fill
    .fsicon-picfill
  • refresh_arrow
    .fsicon-refresharrow
  • mark_fill
    .fsicon-markfill
  • mark
    .fsicon-mark
  • present_fill
    .fsicon-presentfill
  • repeal
    .fsicon-repeal
  • album
    .fsicon-album
  • people_fill
    .fsicon-peoplefill
  • people
    .fsicon-people
  • service_fill
    .fsicon-servicefill
  • repair
    .fsicon-repair
  • file
    .fsicon-file
  • repair_fill
    .fsicon-repairfill
  • taoxiaopu
    .fsicon-taoxiaopu
  • attention_fill
    .fsicon-attentionfill
  • attention
    .fsicon-attention
  • command_fill
    .fsicon-commandfill
  • command
    .fsicon-command
  • community_fill
    .fsicon-communityfill
  • community
    .fsicon-community
  • read
    .fsicon-read
  • calendar
    .fsicon-calendar
  • cut
    .fsicon-cut
  • backward_fill
    .fsicon-backwardfill
  • forward_fill
    .fsicon-forwardfill1
  • play_fill
    .fsicon-playfill
  • stop
    .fsicon-stop
  • tag_fill
    .fsicon-tagfill
  • tag
    .fsicon-tag
  • group
    .fsicon-group
  • all
    .fsicon-all
  • back_delete
    .fsicon-backdelete
  • hot_fill
    .fsicon-hotfill
  • hot
    .fsicon-hot
  • post
    .fsicon-post
  • radio_box
    .fsicon-radiobox
  • round_down
    .fsicon-rounddown
  • upload
    .fsicon-upload
  • write_fill
    .fsicon-writefill
  • write
    .fsicon-write
  • radio_box_fill
    .fsicon-radioboxfill
  • punch
    .fsicon-punch
  • shake
    .fsicon-shake
  • add
    .fsicon-add1
  • move
    .fsicon-move
  • safe
    .fsicon-safe
  • activity_fill
    .fsicon-activityfill
  • crown_fill
    .fsicon-crownfill
  • crown
    .fsicon-crown
  • goods_fill
    .fsicon-goodsfill
  • message_fill
    .fsicon-messagefill
  • profile_fill
    .fsicon-profilefill
  • sound
    .fsicon-sound
  • sponsor_fill
    .fsicon-sponsorfill
  • sponsor
    .fsicon-sponsor
  • up_block
    .fsicon-upblock
  • we_block
    .fsicon-weblock
  • we_unblock
    .fsicon-weunblock
  • my
    .fsicon-my
  • my_fill
    .fsicon-myfill
  • 微信支付
    .fsicon-weixinzhifu
  • 已选择
    .fsicon-yixuanze
  • emoji_fill
    .fsicon-emojifill
  • emoji_flash_fill
    .fsicon-emojiflashfill
  • text
    .fsicon-text
  • goods_favor
    .fsicon-goodsfavor
  • music_fill
    .fsicon-musicfill
  • music_forbid_fill
    .fsicon-musicforbidfill
  • 退出
    .fsicon-tuichu
  • round_left_fill
    .fsicon-roundleftfill
  • triangle_down_fill
    .fsicon-triangledownfill
  • triangle_up_fill
    .fsicon-triangleupfill
  • round_left_fill
    .fsicon-roundleftfill-copy
  • pull_down
    .fsicon-pulldown1
  • 支付宝
    .fsicon-zhifubao
  • 权限
    .fsicon-icon1460191801768
  • 下拉框 表单
    .fsicon-xialakuangbiaodan
  • 圆点中
    .fsicon-yuandianzhong
  • 权限
    .fsicon-quanxian-copy-copy
  • emoji_light
    .fsicon-emojilight
  • keyboard_light
    .fsicon-keyboardlight
  • record_fill
    .fsicon-recordfill
  • record_light
    .fsicon-recordlight
  • record
    .fsicon-record
  • round_add_light
    .fsicon-roundaddlight
  • sound_light
    .fsicon-soundlight
  • form_fill
    .fsicon-formfill
  • 请输入
    .fsicon-input
  • sort_light
    .fsicon-sortlight
  • cardboard_forbid
    .fsicon-cardboardforbid
  • circle_fill
    .fsicon-circlefill
  • circle
    .fsicon-circle
  • pic_light
    .fsicon-piclight
  • shop_light
    .fsicon-shoplight
  • voice_light
    .fsicon-voicelight
  • full
    .fsicon-full
  • mail
    .fsicon-mail
  • people_list
    .fsicon-peoplelist
  • 通讯录
    .fsicon-addressbook1
  • 课堂培训
    .fsicon-ketangpeixun
  • goods_new_fill
    .fsicon-goodsnewfill
  • goods_new
    .fsicon-goodsnew
  • medal_fill
    .fsicon-medalfill
  • medal
    .fsicon-medal
  • news_fill
    .fsicon-newsfill
  • news_hot_fill
    .fsicon-newshotfill
  • news_hot
    .fsicon-newshot
  • news
    .fsicon-news
  • video_fill
    .fsicon-videofill
  • video
    .fsicon-video
  • ask_fill
    .fsicon-askfill
  • ask
    .fsicon-ask
  • exit
    .fsicon-exit
  • money_bag_fill
    .fsicon-moneybagfill
  • usefull_fill
    .fsicon-usefullfill
  • usefull
    .fsicon-usefull
  • money_bag
    .fsicon-moneybag
  • icon_login
    .fsicon-iconlogin
  • redpacket_fill
    .fsicon-redpacket_fill
  • subscription
    .fsicon-subscription
  • 标识类_排班管理
    .fsicon-biaoshilei_paibanguanli
  • home_light
    .fsicon-home_light
  • my_light
    .fsicon-my_light
  • community_light
    .fsicon-community_light
  • cart_light
    .fsicon-cart_light
  • we_light
    .fsicon-we_light
  • home_fill_light
    .fsicon-home_fill_light
  • cart_fill_light
    .fsicon-cart_fill_light
  • community_fill_light
    .fsicon-community_fill_light
  • my_fill_light
    .fsicon-my_fill_light
  • we_fill_light
    .fsicon-we_fill_light
  • search_light
    .fsicon-search_light
  • scan_light
    .fsicon-scan_light
  • people_list_light
    .fsicon-people_list_light
  • message_light
    .fsicon-message_light
  • close_light
    .fsicon-close_light
  • add_light
    .fsicon-add_light
  • 列表
    .fsicon-liebiao
  • profile_light
    .fsicon-profile_light
  • service_light
    .fsicon-service_light
  • friend_add_light
    .fsicon-friend_add_light
  • edit_light
    .fsicon-edit_light
  • camera_light
    .fsicon-camera_light
  • hot_light
    .fsicon-hot_light
  • refresh_light
    .fsicon-refresh_light
  • back_light
    .fsicon-back_light
  • share_light
    .fsicon-share_light
  • comment_light
    .fsicon-comment_light
  • appreciate_light
    .fsicon-appreciate_light
  • favor_light
    .fsicon-favor_light
  • appreciate_fill_light
    .fsicon-appreciate_fill_light
  • comment_fill_light
    .fsicon-comment_fill_light
  • wang_light
    .fsicon-wang_light
  • more_android_light
    .fsicon-more_android_light
  • friend_light
    .fsicon-friend_light
  • more_light
    .fsicon-more_light
  • goods_favor_light
    .fsicon-goods_favor_light
  • goods_new_fill_light
    .fsicon-goods_new_fill_light
  • goods_new_light
    .fsicon-goods_new_light
  • goods_light
    .fsicon-goods_light
  • medal_fill_light
    .fsicon-medal_fill_light
  • medal_light
    .fsicon-medal_light
  • news_fill_light
    .fsicon-news_fill_light
  • news_hot_fill_light
    .fsicon-news_hot_fill_light
  • news_hot_light
    .fsicon-news_hot_light
  • news_light
    .fsicon-news_light
  • video_fill_light
    .fsicon-video_fill_light
  • message_fill_light
    .fsicon-message_fill_light
  • form_light
    .fsicon-form_light
  • video_light
    .fsicon-video_light
  • search_list_light
    .fsicon-search_list_light
  • form_fill_light
    .fsicon-form_fill_light
  • global_light
    .fsicon-global_light
  • global
    .fsicon-global
  • favor_fill_light
    .fsicon-favor_fill_light
  • delete_light
    .fsicon-delete_light
  • back_android
    .fsicon-back_android
  • back_android_light
    .fsicon-back_android_light
  • down_light
    .fsicon-down_light
  • round_close_light
    .fsicon-round_close_light
  • round_close_fill_light
    .fsicon-round_close_fill_light
  • 1010布局_导航栏
    .fsicon-buju_daohanglan
  • punch_light
    .fsicon-punch_light
  • evaluate_fill
    .fsicon-evaluate_fill
  • 意见反馈
    .fsicon-ziyuan
  • 符号-按钮
    .fsicon-anniu
  • 符号-多行输入框
    .fsicon-duohangshurukuang
  • 符号-选项卡
    .fsicon-xuanxiangqia
  • furniture
    .fsicon-furniture
  • dress
    .fsicon-dress
  • coffee
    .fsicon-coffee
  • sports
    .fsicon-sports
  • 单据签收
    .fsicon-danjuqianshou
  • 排班管理-01
    .fsicon-paibanguanli-
  • 问卷调查
    .fsicon-wenjuantiaocha
  • 进度条
    .fsicon-jindutiao
  • 信息查询
    .fsicon-xinxichaxun
  • 卡片
    .fsicon-qiapian
  • 轮播效果
    .fsicon-lunboxiaoguo
  • 提示框
    .fsicon-tishikuang
  • 汇报
    .fsicon-huibao
  • 考核记录
    .fsicon-kaohejilu
  • 表格
    .fsicon-biaoge
  • 人事档案
    .fsicon-renshidangan
  • 我的审批
    .fsicon-wodeshenpi
  • 表单组件-下拉框
    .fsicon-biaodanzujian-xialakuang
  • 我的考勤
    .fsicon-wodekaoqin
  • 头像
    .fsicon-touxiang
  • 插件参数配置
    .fsicon-chajiancanshupeizhi
  • AK-YK方块_fill
    .fsicon-yk_fangkuai_fill
  • 功能管理
    .fsicon-gongnengguanli
  • 弹出窗
    .fsicon-danchuchuang
  • 人事信息管理
    .fsicon-HRrenshirenshiguanli
  • 审核
    .fsicon-shenhe
  • daishen
    .fsicon-daishen
  • 平台_考试
    .fsicon-pingtai_kaoshi
  • 绩效
    .fsicon-jixiao
  • 通讯录
    .fsicon-tongxunlu
  • 矩形 9
    .fsicon-juxing
  • bottomleft
    .fsicon-bottomleft
  • topleft
    .fsicon-topleft
  • bottomright
    .fsicon-bottomright
  • topright
    .fsicon-topright
  • titleright
    .fsicon-titleright
  • titleleft
    .fsicon-titleleft

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="fsiconfont fsicon-xxx"></span>

" fsiconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • appreciate
    #fsicon-appreciate
  • check
    #fsicon-check
  • close
    #fsicon-close
  • edit
    #fsicon-edit
  • emoji
    #fsicon-emoji
  • favor_fill
    #fsicon-favorfill
  • favor
    #fsicon-favor
  • loading
    #fsicon-loading
  • location_fill
    #fsicon-locationfill
  • location
    #fsicon-location
  • phone
    #fsicon-phone
  • round_check_fill
    #fsicon-roundcheckfill
  • round_check
    #fsicon-roundcheck
  • round_close_fill
    #fsicon-roundclosefill
  • round_close
    #fsicon-roundclose
  • round_right_fill
    #fsicon-roundrightfill
  • round_right
    #fsicon-roundright
  • search
    #fsicon-search
  • taxi
    #fsicon-taxi
  • time_fill
    #fsicon-timefill
  • time
    #fsicon-time
  • unfold
    #fsicon-unfold
  • warn_fill
    #fsicon-warnfill
  • warn
    #fsicon-warn
  • camera_fill
    #fsicon-camerafill
  • camera
    #fsicon-camera
  • comment_fill
    #fsicon-commentfill
  • comment
    #fsicon-comment
  • like_fill
    #fsicon-likefill
  • like
    #fsicon-like
  • notification_fill
    #fsicon-notificationfill
  • notification
    #fsicon-notification
  • order
    #fsicon-order
  • deliver
    #fsicon-deliver
  • evaluate
    #fsicon-evaluate
  • pay
    #fsicon-pay
  • send
    #fsicon-send
  • shop
    #fsicon-shop
  • wang
    #fsicon-wang
  • back
    #fsicon-back
  • cascades
    #fsicon-cascades
  • list
    #fsicon-list
  • more
    #fsicon-more
  • scan
    #fsicon-scan
  • settings
    #fsicon-settings
  • question_fill
    #fsicon-questionfill
  • question
    #fsicon-question
  • shop_fill
    #fsicon-shopfill
  • form
    #fsicon-form
  • wang_fill
    #fsicon-wangfill
  • pic
    #fsicon-pic
  • filter
    #fsicon-filter
  • footprint
    #fsicon-footprint
  • top
    #fsicon-top
  • pull_down
    #fsicon-pulldown
  • pull_up
    #fsicon-pullup
  • right
    #fsicon-right
  • refresh
    #fsicon-refresh
  • more_android
    #fsicon-moreandroid
  • delete_fill
    #fsicon-deletefill
  • refund
    #fsicon-refund
  • cart
    #fsicon-cart
  • qr_code
    #fsicon-qrcode
  • remind
    #fsicon-remind
  • delete
    #fsicon-delete
  • profile
    #fsicon-profile
  • home
    #fsicon-home
  • cart_fill
    #fsicon-cartfill
  • home_fill
    #fsicon-homefill
  • message
    #fsicon-message
  • address_book
    #fsicon-addressbook
  • link
    #fsicon-link
  • lock
    #fsicon-lock
  • unlock
    #fsicon-unlock
  • vip
    #fsicon-vip
  • weibo
    #fsicon-weibo
  • activity
    #fsicon-activity
  • friend_add_fill
    #fsicon-friendaddfill
  • friend_add
    #fsicon-friendadd
  • friend_famous
    #fsicon-friendfamous
  • friend
    #fsicon-friend
  • goods
    #fsicon-goods
  • selection
    #fsicon-selection
  • present
    #fsicon-present
  • square_check_fill
    #fsicon-squarecheckfill
  • square
    #fsicon-square
  • square_check
    #fsicon-squarecheck
  • round
    #fsicon-round
  • round_add_fill
    #fsicon-roundaddfill
  • round_add
    #fsicon-roundadd
  • add
    #fsicon-add
  • notification_forbid_fill
    #fsicon-notificationforbidfill
  • fold
    #fsicon-fold
  • game
    #fsicon-game
  • redpacket
    #fsicon-redpacket
  • selection_fill
    #fsicon-selectionfill
  • similar
    #fsicon-similar
  • appreciate_fill
    #fsicon-appreciatefill
  • info_fill
    #fsicon-infofill
  • info
    #fsicon-info
  • forward_fill
    #fsicon-forwardfill
  • forward
    #fsicon-forward
  • recharge_fill
    #fsicon-rechargefill
  • recharge
    #fsicon-recharge
  • vipcard
    #fsicon-vipcard
  • voice
    #fsicon-voice
  • voice_fill
    #fsicon-voicefill
  • friend_favor
    #fsicon-friendfavor
  • wifi
    #fsicon-wifi
  • share
    #fsicon-share
  • we_fill
    #fsicon-wefill
  • we
    #fsicon-we
  • light_auto
    #fsicon-lightauto
  • light_forbid
    #fsicon-lightforbid
  • light_fill
    #fsicon-lightfill
  • camera_rotate
    #fsicon-camerarotate
  • light
    #fsicon-light
  • bar_code
    #fsicon-barcode
  • flashlight_close
    #fsicon-flashlightclose
  • flashlight_open
    #fsicon-flashlightopen
  • search_list
    #fsicon-searchlist
  • service
    #fsicon-service
  • sort
    #fsicon-sort
  • down
    #fsicon-down
  • mobile
    #fsicon-mobile
  • mobile_fill
    #fsicon-mobilefill
  • copy
    #fsicon-copy
  • countdown
    #fsicon-countdown
  • notice_fill
    #fsicon-noticefill
  • notice
    #fsicon-notice
  • upstage_fill
    #fsicon-upstagefill
  • upstage
    #fsicon-upstage
  • brand_fill
    #fsicon-brandfill
  • brand
    #fsicon-brand
  • choiceness_fill
    #fsicon-choicenessfill
  • choiceness
    #fsicon-choiceness
  • creative_fill
    #fsicon-creativefill
  • creative
    #fsicon-creative
  • female
    #fsicon-female
  • keyboard
    #fsicon-keyboard
  • male
    #fsicon-male
  • new_fill
    #fsicon-newfill
  • new
    #fsicon-new
  • pull_left
    #fsicon-pullleft
  • pull_right
    #fsicon-pullright
  • rank_fill
    #fsicon-rankfill
  • rank
    #fsicon-rank
  • bad
    #fsicon-bad
  • camera_add
    #fsicon-cameraadd
  • focus
    #fsicon-focus
  • friend_fill
    #fsicon-friendfill
  • camera_add_fill
    #fsicon-cameraaddfill
  • apps
    #fsicon-apps
  • pic_fill
    #fsicon-picfill
  • refresh_arrow
    #fsicon-refresharrow
  • mark_fill
    #fsicon-markfill
  • mark
    #fsicon-mark
  • present_fill
    #fsicon-presentfill
  • repeal
    #fsicon-repeal
  • album
    #fsicon-album
  • people_fill
    #fsicon-peoplefill
  • people
    #fsicon-people
  • service_fill
    #fsicon-servicefill
  • repair
    #fsicon-repair
  • file
    #fsicon-file
  • repair_fill
    #fsicon-repairfill
  • taoxiaopu
    #fsicon-taoxiaopu
  • attention_fill
    #fsicon-attentionfill
  • attention
    #fsicon-attention
  • command_fill
    #fsicon-commandfill
  • command
    #fsicon-command
  • community_fill
    #fsicon-communityfill
  • community
    #fsicon-community
  • read
    #fsicon-read
  • calendar
    #fsicon-calendar
  • cut
    #fsicon-cut
  • backward_fill
    #fsicon-backwardfill
  • forward_fill
    #fsicon-forwardfill1
  • play_fill
    #fsicon-playfill
  • stop
    #fsicon-stop
  • tag_fill
    #fsicon-tagfill
  • tag
    #fsicon-tag
  • group
    #fsicon-group
  • all
    #fsicon-all
  • back_delete
    #fsicon-backdelete
  • hot_fill
    #fsicon-hotfill
  • hot
    #fsicon-hot
  • post
    #fsicon-post
  • radio_box
    #fsicon-radiobox
  • round_down
    #fsicon-rounddown
  • upload
    #fsicon-upload
  • write_fill
    #fsicon-writefill
  • write
    #fsicon-write
  • radio_box_fill
    #fsicon-radioboxfill
  • punch
    #fsicon-punch
  • shake
    #fsicon-shake
  • add
    #fsicon-add1
  • move
    #fsicon-move
  • safe
    #fsicon-safe
  • activity_fill
    #fsicon-activityfill
  • crown_fill
    #fsicon-crownfill
  • crown
    #fsicon-crown
  • goods_fill
    #fsicon-goodsfill
  • message_fill
    #fsicon-messagefill
  • profile_fill
    #fsicon-profilefill
  • sound
    #fsicon-sound
  • sponsor_fill
    #fsicon-sponsorfill
  • sponsor
    #fsicon-sponsor
  • up_block
    #fsicon-upblock
  • we_block
    #fsicon-weblock
  • we_unblock
    #fsicon-weunblock
  • my
    #fsicon-my
  • my_fill
    #fsicon-myfill
  • 微信支付
    #fsicon-weixinzhifu
  • 已选择
    #fsicon-yixuanze
  • emoji_fill
    #fsicon-emojifill
  • emoji_flash_fill
    #fsicon-emojiflashfill
  • text
    #fsicon-text
  • goods_favor
    #fsicon-goodsfavor
  • music_fill
    #fsicon-musicfill
  • music_forbid_fill
    #fsicon-musicforbidfill
  • 退出
    #fsicon-tuichu
  • round_left_fill
    #fsicon-roundleftfill
  • triangle_down_fill
    #fsicon-triangledownfill
  • triangle_up_fill
    #fsicon-triangleupfill
  • round_left_fill
    #fsicon-roundleftfill-copy
  • pull_down
    #fsicon-pulldown1
  • 支付宝
    #fsicon-zhifubao
  • 权限
    #fsicon-icon1460191801768
  • 下拉框 表单
    #fsicon-xialakuangbiaodan
  • 圆点中
    #fsicon-yuandianzhong
  • 权限
    #fsicon-quanxian-copy-copy
  • emoji_light
    #fsicon-emojilight
  • keyboard_light
    #fsicon-keyboardlight
  • record_fill
    #fsicon-recordfill
  • record_light
    #fsicon-recordlight
  • record
    #fsicon-record
  • round_add_light
    #fsicon-roundaddlight
  • sound_light
    #fsicon-soundlight
  • form_fill
    #fsicon-formfill
  • 请输入
    #fsicon-input
  • sort_light
    #fsicon-sortlight
  • cardboard_forbid
    #fsicon-cardboardforbid
  • circle_fill
    #fsicon-circlefill
  • circle
    #fsicon-circle
  • pic_light
    #fsicon-piclight
  • shop_light
    #fsicon-shoplight
  • voice_light
    #fsicon-voicelight
  • full
    #fsicon-full
  • mail
    #fsicon-mail
  • people_list
    #fsicon-peoplelist
  • 通讯录
    #fsicon-addressbook1
  • 课堂培训
    #fsicon-ketangpeixun
  • goods_new_fill
    #fsicon-goodsnewfill
  • goods_new
    #fsicon-goodsnew
  • medal_fill
    #fsicon-medalfill
  • medal
    #fsicon-medal
  • news_fill
    #fsicon-newsfill
  • news_hot_fill
    #fsicon-newshotfill
  • news_hot
    #fsicon-newshot
  • news
    #fsicon-news
  • video_fill
    #fsicon-videofill
  • video
    #fsicon-video
  • ask_fill
    #fsicon-askfill
  • ask
    #fsicon-ask
  • exit
    #fsicon-exit
  • money_bag_fill
    #fsicon-moneybagfill
  • usefull_fill
    #fsicon-usefullfill
  • usefull
    #fsicon-usefull
  • money_bag
    #fsicon-moneybag
  • icon_login
    #fsicon-iconlogin
  • redpacket_fill
    #fsicon-redpacket_fill
  • subscription
    #fsicon-subscription
  • 标识类_排班管理
    #fsicon-biaoshilei_paibanguanli
  • home_light
    #fsicon-home_light
  • my_light
    #fsicon-my_light
  • community_light
    #fsicon-community_light
  • cart_light
    #fsicon-cart_light
  • we_light
    #fsicon-we_light
  • home_fill_light
    #fsicon-home_fill_light
  • cart_fill_light
    #fsicon-cart_fill_light
  • community_fill_light
    #fsicon-community_fill_light
  • my_fill_light
    #fsicon-my_fill_light
  • we_fill_light
    #fsicon-we_fill_light
  • search_light
    #fsicon-search_light
  • scan_light
    #fsicon-scan_light
  • people_list_light
    #fsicon-people_list_light
  • message_light
    #fsicon-message_light
  • close_light
    #fsicon-close_light
  • add_light
    #fsicon-add_light
  • 列表
    #fsicon-liebiao
  • profile_light
    #fsicon-profile_light
  • service_light
    #fsicon-service_light
  • friend_add_light
    #fsicon-friend_add_light
  • edit_light
    #fsicon-edit_light
  • camera_light
    #fsicon-camera_light
  • hot_light
    #fsicon-hot_light
  • refresh_light
    #fsicon-refresh_light
  • back_light
    #fsicon-back_light
  • share_light
    #fsicon-share_light
  • comment_light
    #fsicon-comment_light
  • appreciate_light
    #fsicon-appreciate_light
  • favor_light
    #fsicon-favor_light
  • appreciate_fill_light
    #fsicon-appreciate_fill_light
  • comment_fill_light
    #fsicon-comment_fill_light
  • wang_light
    #fsicon-wang_light
  • more_android_light
    #fsicon-more_android_light
  • friend_light
    #fsicon-friend_light
  • more_light
    #fsicon-more_light
  • goods_favor_light
    #fsicon-goods_favor_light
  • goods_new_fill_light
    #fsicon-goods_new_fill_light
  • goods_new_light
    #fsicon-goods_new_light
  • goods_light
    #fsicon-goods_light
  • medal_fill_light
    #fsicon-medal_fill_light
  • medal_light
    #fsicon-medal_light
  • news_fill_light
    #fsicon-news_fill_light
  • news_hot_fill_light
    #fsicon-news_hot_fill_light
  • news_hot_light
    #fsicon-news_hot_light
  • news_light
    #fsicon-news_light
  • video_fill_light
    #fsicon-video_fill_light
  • message_fill_light
    #fsicon-message_fill_light
  • form_light
    #fsicon-form_light
  • video_light
    #fsicon-video_light
  • search_list_light
    #fsicon-search_list_light
  • form_fill_light
    #fsicon-form_fill_light
  • global_light
    #fsicon-global_light
  • global
    #fsicon-global
  • favor_fill_light
    #fsicon-favor_fill_light
  • delete_light
    #fsicon-delete_light
  • back_android
    #fsicon-back_android
  • back_android_light
    #fsicon-back_android_light
  • down_light
    #fsicon-down_light
  • round_close_light
    #fsicon-round_close_light
  • round_close_fill_light
    #fsicon-round_close_fill_light
  • 1010布局_导航栏
    #fsicon-buju_daohanglan
  • punch_light
    #fsicon-punch_light
  • evaluate_fill
    #fsicon-evaluate_fill
  • 意见反馈
    #fsicon-ziyuan
  • 符号-按钮
    #fsicon-anniu
  • 符号-多行输入框
    #fsicon-duohangshurukuang
  • 符号-选项卡
    #fsicon-xuanxiangqia
  • furniture
    #fsicon-furniture
  • dress
    #fsicon-dress
  • coffee
    #fsicon-coffee
  • sports
    #fsicon-sports
  • 单据签收
    #fsicon-danjuqianshou
  • 排班管理-01
    #fsicon-paibanguanli-
  • 问卷调查
    #fsicon-wenjuantiaocha
  • 进度条
    #fsicon-jindutiao
  • 信息查询
    #fsicon-xinxichaxun
  • 卡片
    #fsicon-qiapian
  • 轮播效果
    #fsicon-lunboxiaoguo
  • 提示框
    #fsicon-tishikuang
  • 汇报
    #fsicon-huibao
  • 考核记录
    #fsicon-kaohejilu
  • 表格
    #fsicon-biaoge
  • 人事档案
    #fsicon-renshidangan
  • 我的审批
    #fsicon-wodeshenpi
  • 表单组件-下拉框
    #fsicon-biaodanzujian-xialakuang
  • 我的考勤
    #fsicon-wodekaoqin
  • 头像
    #fsicon-touxiang
  • 插件参数配置
    #fsicon-chajiancanshupeizhi
  • AK-YK方块_fill
    #fsicon-yk_fangkuai_fill
  • 功能管理
    #fsicon-gongnengguanli
  • 弹出窗
    #fsicon-danchuchuang
  • 人事信息管理
    #fsicon-HRrenshirenshiguanli
  • 审核
    #fsicon-shenhe
  • daishen
    #fsicon-daishen
  • 平台_考试
    #fsicon-pingtai_kaoshi
  • 绩效
    #fsicon-jixiao
  • 通讯录
    #fsicon-tongxunlu
  • 矩形 9
    #fsicon-juxing
  • bottomleft
    #fsicon-bottomleft
  • topleft
    #fsicon-topleft
  • bottomright
    #fsicon-bottomright
  • topright
    #fsicon-topright
  • titleright
    #fsicon-titleright
  • titleleft
    #fsicon-titleleft

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>