• 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
    
  • same_fill
    
  • same
    
  • deliver
    
  • evaluate
    
  • pay
    
  • send
    
  • shop
    
  • ticket
    
  • wang
    
  • back
    
  • cascades
    
  • discover
    
  • 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
    
  • discover_fill
    
  • home_fill
    
  • message
    
  • address_book
    
  • link
    
  • lock
    
  • unlock
    
  • vip
    
  • weibo
    
  • activity
    
  • big
    
  • friend_add_fill
    
  • friend_add
    
  • friend_famous
    
  • friend
    
  • goods
    
  • selection
    
  • tmall
    
  • explore
    
  • present
    
  • square_check_fill
    
  • square
    
  • square_check
    
  • round
    
  • round_add_fill
    
  • round_add
    
  • add
    
  • notification_forbid_fill
    
  • explore_fill
    
  • fold
    
  • game
    
  • redpacket
    
  • selection_fill
    
  • similar
    
  • appreciate_fill
    
  • info_fill
    
  • info
    
  • tao
    
  • mobile_tao
    
  • 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
    
  • 1212
    
  • down
    
  • mobile
    
  • mobile_fill
    
  • copy
    
  • countdown_fill
    
  • countdown
    
  • notice_fill
    
  • notice
    
  • qiang
    
  • upstage_fill
    
  • upstage
    
  • baby_fill
    
  • baby
    
  • brand_fill
    
  • brand
    
  • choiceness_fill
    
  • choiceness
    
  • clothes_fill
    
  • clothes
    
  • 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
    
  • paint_fill
    
  • paint
    
  • 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
    
  • suan
    
  • hua
    
  • ju
    
  • tian
    
  • calendar
    
  • cut
    
  • magic
    
  • backward_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
    
  • haodian
    
  • mao
    
  • qi
    
  • ye
    
  • juhuasuan
    
  • taoqianggou
    
  • tianmao
    
  • activity_fill
    
  • crown_fill
    
  • crown
    
  • goods_fill
    
  • message_fill
    
  • profile_fill
    
  • sound
    
  • sponsor_fill
    
  • sponsor
    
  • up_block
    
  • we_block
    
  • we_unblock
    
  • 1111
    
  • my
    
  • my_fill
    
  • emoji_fill
    
  • emoji_flash_fill
    
  • flashbuy_fill
    
  • text
    
  • goods_favor
    
  • music_fill
    
  • music_forbid_fill
    
  • xiami_forbid
    
  • xiami
    
  • 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
    
  • cardboard_fill
    
  • cardboard
    
  • form_fill
    
  • coin
    
  • sort_light
    
  • ok
    
  • cardboard_forbid
    
  • circle_fill
    
  • circle
    
  • attention_forbid
    
  • attention_forbid_fill
    
  • attention_favor_fill
    
  • attention_favor
    
  • pic_light
    
  • shop_light
    
  • voice_light
    
  • attention_favor_fill
    
  • 支付宝
    
  • 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
    
  • skin_fill
    
  • skin
    
  • money_bag_fill
    
  • usefull_fill
    
  • usefull
    
  • money_bag
    
  • 下载
    
  • redpacket_fill
    
  • subscription
    
  • 第三方
    
  • 详情
    
  • 数据
    
  • home_light
    
  • my_light
    
  • 第三方 QQ
    
  • 中国地图
    
  • 地图
    
  • set
    
  • 
  • 数据
    
  • 数据
    
  • 第三方
    
  • 数据
    
  • 控制台
    
  • 耳机
    
  • 设 置
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'ok-icon';
  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#ok-icon') format('svg');
}

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

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

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

<span class="ok-icon">&#x33;</span>

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

  • appreciate
    .ok-icon-appreciate
  • check
    .ok-icon-check
  • close
    .ok-icon-close
  • edit
    .ok-icon-edit
  • emoji
    .ok-icon-emoji
  • favor_fill
    .ok-icon-favorfill
  • favor
    .ok-icon-favor
  • loading
    .ok-icon-loading
  • location_fill
    .ok-icon-locationfill
  • location
    .ok-icon-location
  • phone
    .ok-icon-phone
  • round_check_fill
    .ok-icon-roundcheckfill
  • round_check
    .ok-icon-roundcheck
  • round_close_fill
    .ok-icon-roundclosefill
  • round_close
    .ok-icon-roundclose
  • round_right_fill
    .ok-icon-roundrightfill
  • round_right
    .ok-icon-roundright
  • search
    .ok-icon-search
  • taxi
    .ok-icon-taxi
  • time_fill
    .ok-icon-timefill
  • time
    .ok-icon-time
  • unfold
    .ok-icon-unfold
  • warn_fill
    .ok-icon-warnfill
  • warn
    .ok-icon-warn
  • camera_fill
    .ok-icon-camerafill
  • camera
    .ok-icon-camera
  • comment_fill
    .ok-icon-commentfill
  • comment
    .ok-icon-comment
  • like_fill
    .ok-icon-likefill
  • like
    .ok-icon-like
  • notification_fill
    .ok-icon-notificationfill
  • notification
    .ok-icon-notification
  • order
    .ok-icon-order
  • same_fill
    .ok-icon-samefill
  • same
    .ok-icon-same
  • deliver
    .ok-icon-deliver
  • evaluate
    .ok-icon-evaluate
  • pay
    .ok-icon-pay
  • send
    .ok-icon-send
  • shop
    .ok-icon-shop
  • ticket
    .ok-icon-ticket
  • wang
    .ok-icon-wang
  • back
    .ok-icon-back
  • cascades
    .ok-icon-cascades
  • discover
    .ok-icon-discover
  • list
    .ok-icon-list
  • more
    .ok-icon-more
  • scan
    .ok-icon-scan
  • settings
    .ok-icon-settings
  • question_fill
    .ok-icon-questionfill
  • question
    .ok-icon-question
  • shop_fill
    .ok-icon-shopfill
  • form
    .ok-icon-form
  • wang_fill
    .ok-icon-wangfill
  • pic
    .ok-icon-pic
  • filter
    .ok-icon-filter
  • footprint
    .ok-icon-footprint
  • top
    .ok-icon-top
  • pull_down
    .ok-icon-pulldown
  • pull_up
    .ok-icon-pullup
  • right
    .ok-icon-right
  • refresh
    .ok-icon-refresh
  • more_android
    .ok-icon-moreandroid
  • delete_fill
    .ok-icon-deletefill
  • refund
    .ok-icon-refund
  • cart
    .ok-icon-cart
  • qr_code
    .ok-icon-qrcode
  • remind
    .ok-icon-remind
  • delete
    .ok-icon-delete
  • profile
    .ok-icon-profile
  • home
    .ok-icon-home
  • cart_fill
    .ok-icon-cartfill
  • discover_fill
    .ok-icon-discoverfill
  • home_fill
    .ok-icon-homefill
  • message
    .ok-icon-message
  • address_book
    .ok-icon-addressbook
  • link
    .ok-icon-link
  • lock
    .ok-icon-lock
  • unlock
    .ok-icon-unlock
  • vip
    .ok-icon-vip
  • weibo
    .ok-icon-weibo
  • activity
    .ok-icon-activity
  • big
    .ok-icon-big
  • friend_add_fill
    .ok-icon-friendaddfill
  • friend_add
    .ok-icon-friendadd
  • friend_famous
    .ok-icon-friendfamous
  • friend
    .ok-icon-friend
  • goods
    .ok-icon-goods
  • selection
    .ok-icon-selection
  • tmall
    .ok-icon-tmall
  • explore
    .ok-icon-explore
  • present
    .ok-icon-present
  • square_check_fill
    .ok-icon-squarecheckfill
  • square
    .ok-icon-square
  • square_check
    .ok-icon-squarecheck
  • round
    .ok-icon-round
  • round_add_fill
    .ok-icon-roundaddfill
  • round_add
    .ok-icon-roundadd
  • add
    .ok-icon-add
  • notification_forbid_fill
    .ok-icon-notificationforbidfill
  • explore_fill
    .ok-icon-explorefill
  • fold
    .ok-icon-fold
  • game
    .ok-icon-game
  • redpacket
    .ok-icon-redpacket
  • selection_fill
    .ok-icon-selectionfill
  • similar
    .ok-icon-similar
  • appreciate_fill
    .ok-icon-appreciatefill
  • info_fill
    .ok-icon-infofill
  • info
    .ok-icon-info
  • tao
    .ok-icon-tao
  • mobile_tao
    .ok-icon-mobiletao
  • forward_fill
    .ok-icon-forwardfill
  • forward
    .ok-icon-forward
  • recharge_fill
    .ok-icon-rechargefill
  • recharge
    .ok-icon-recharge
  • vipcard
    .ok-icon-vipcard
  • voice
    .ok-icon-voice
  • voice_fill
    .ok-icon-voicefill
  • friend_favor
    .ok-icon-friendfavor
  • wifi
    .ok-icon-wifi
  • share
    .ok-icon-share
  • we_fill
    .ok-icon-wefill
  • we
    .ok-icon-we
  • light_auto
    .ok-icon-lightauto
  • light_forbid
    .ok-icon-lightforbid
  • light_fill
    .ok-icon-lightfill
  • camera_rotate
    .ok-icon-camerarotate
  • light
    .ok-icon-light
  • bar_code
    .ok-icon-barcode
  • flashlight_close
    .ok-icon-flashlightclose
  • flashlight_open
    .ok-icon-flashlightopen
  • search_list
    .ok-icon-searchlist
  • service
    .ok-icon-service
  • sort
    .ok-icon-sort
  • 1212
    .ok-icon-1212
  • down
    .ok-icon-down
  • mobile
    .ok-icon-mobile
  • mobile_fill
    .ok-icon-mobilefill
  • copy
    .ok-icon-copy
  • countdown_fill
    .ok-icon-countdownfill
  • countdown
    .ok-icon-countdown
  • notice_fill
    .ok-icon-noticefill
  • notice
    .ok-icon-notice
  • qiang
    .ok-icon-qiang
  • upstage_fill
    .ok-icon-upstagefill
  • upstage
    .ok-icon-upstage
  • baby_fill
    .ok-icon-babyfill
  • baby
    .ok-icon-baby
  • brand_fill
    .ok-icon-brandfill
  • brand
    .ok-icon-brand
  • choiceness_fill
    .ok-icon-choicenessfill
  • choiceness
    .ok-icon-choiceness
  • clothes_fill
    .ok-icon-clothesfill
  • clothes
    .ok-icon-clothes
  • creative_fill
    .ok-icon-creativefill
  • creative
    .ok-icon-creative
  • female
    .ok-icon-female
  • keyboard
    .ok-icon-keyboard
  • male
    .ok-icon-male
  • new_fill
    .ok-icon-newfill
  • new
    .ok-icon-new
  • pull_left
    .ok-icon-pullleft
  • pull_right
    .ok-icon-pullright
  • rank_fill
    .ok-icon-rankfill
  • rank
    .ok-icon-rank
  • bad
    .ok-icon-bad
  • camera_add
    .ok-icon-cameraadd
  • focus
    .ok-icon-focus
  • friend_fill
    .ok-icon-friendfill
  • camera_add_fill
    .ok-icon-cameraaddfill
  • apps
    .ok-icon-apps
  • paint_fill
    .ok-icon-paintfill
  • paint
    .ok-icon-paint
  • pic_fill
    .ok-icon-picfill
  • refresh_arrow
    .ok-icon-refresharrow
  • mark_fill
    .ok-icon-markfill
  • mark
    .ok-icon-mark
  • present_fill
    .ok-icon-presentfill
  • repeal
    .ok-icon-repeal
  • album
    .ok-icon-album
  • people_fill
    .ok-icon-peoplefill
  • people
    .ok-icon-people
  • service_fill
    .ok-icon-servicefill
  • repair
    .ok-icon-repair
  • file
    .ok-icon-file
  • repair_fill
    .ok-icon-repairfill
  • taoxiaopu
    .ok-icon-taoxiaopu
  • attention_fill
    .ok-icon-attentionfill
  • attention
    .ok-icon-attention
  • command_fill
    .ok-icon-commandfill
  • command
    .ok-icon-command
  • community_fill
    .ok-icon-communityfill
  • community
    .ok-icon-community
  • read
    .ok-icon-read
  • suan
    .ok-icon-suan
  • hua
    .ok-icon-hua
  • ju
    .ok-icon-ju
  • tian
    .ok-icon-tian
  • calendar
    .ok-icon-calendar
  • cut
    .ok-icon-cut
  • magic
    .ok-icon-magic
  • backward_fill
    .ok-icon-backwardfill
  • play_fill
    .ok-icon-playfill
  • stop
    .ok-icon-stop
  • tag_fill
    .ok-icon-tagfill
  • tag
    .ok-icon-tag
  • group
    .ok-icon-group
  • all
    .ok-icon-all
  • back_delete
    .ok-icon-backdelete
  • hot_fill
    .ok-icon-hotfill
  • hot
    .ok-icon-hot
  • post
    .ok-icon-post
  • radio_box
    .ok-icon-radiobox
  • round_down
    .ok-icon-rounddown
  • upload
    .ok-icon-upload
  • write_fill
    .ok-icon-writefill
  • write
    .ok-icon-write
  • radio_box_fill
    .ok-icon-radioboxfill
  • punch
    .ok-icon-punch
  • shake
    .ok-icon-shake
  • 第三方 微博
    .ok-icon-disanfangweibo
  • 第三方 微信
    .ok-icon-disanfangweixin
  • add
    .ok-icon-add1
  • move
    .ok-icon-move
  • safe
    .ok-icon-safe
  • haodian
    .ok-icon-haodian
  • mao
    .ok-icon-mao
  • qi
    .ok-icon-qi
  • ye
    .ok-icon-ye
  • juhuasuan
    .ok-icon-juhuasuan
  • taoqianggou
    .ok-icon-taoqianggou
  • tianmao
    .ok-icon-tianmao
  • activity_fill
    .ok-icon-activityfill
  • crown_fill
    .ok-icon-crownfill
  • crown
    .ok-icon-crown
  • goods_fill
    .ok-icon-goodsfill
  • message_fill
    .ok-icon-messagefill
  • profile_fill
    .ok-icon-profilefill
  • sound
    .ok-icon-sound
  • sponsor_fill
    .ok-icon-sponsorfill
  • sponsor
    .ok-icon-sponsor
  • up_block
    .ok-icon-upblock
  • we_block
    .ok-icon-weblock
  • we_unblock
    .ok-icon-weunblock
  • 1111
    .ok-icon-1111
  • my
    .ok-icon-my
  • my_fill
    .ok-icon-myfill
  • emoji_fill
    .ok-icon-emojifill
  • emoji_flash_fill
    .ok-icon-emojiflashfill
  • flashbuy_fill
    .ok-icon-flashbuyfill-copy
  • text
    .ok-icon-text
  • goods_favor
    .ok-icon-goodsfavor
  • music_fill
    .ok-icon-musicfill
  • music_forbid_fill
    .ok-icon-musicforbidfill
  • xiami_forbid
    .ok-icon-xiamiforbid
  • xiami
    .ok-icon-xiami
  • round_left_fill
    .ok-icon-roundleftfill
  • triangle_down_fill
    .ok-icon-triangledownfill
  • triangle_up_fill
    .ok-icon-triangleupfill
  • round_left_fill
    .ok-icon-roundleftfill-copy
  • pull_down
    .ok-icon-pulldown1
  • emoji_light
    .ok-icon-emojilight
  • keyboard_light
    .ok-icon-keyboardlight
  • record_fill
    .ok-icon-recordfill
  • record_light
    .ok-icon-recordlight
  • record
    .ok-icon-record
  • round_add_light
    .ok-icon-roundaddlight
  • sound_light
    .ok-icon-soundlight
  • cardboard_fill
    .ok-icon-cardboardfill
  • cardboard
    .ok-icon-cardboard
  • form_fill
    .ok-icon-formfill
  • coin
    .ok-icon-coin
  • sort_light
    .ok-icon-sortlight
  • ok
    .ok-icon-yooxi
  • cardboard_forbid
    .ok-icon-cardboardforbid
  • circle_fill
    .ok-icon-circlefill
  • circle
    .ok-icon-circle
  • attention_forbid
    .ok-icon-attentionforbid
  • attention_forbid_fill
    .ok-icon-attentionforbidfill
  • attention_favor_fill
    .ok-icon-attentionfavorfill
  • attention_favor
    .ok-icon-attentionfavor
  • pic_light
    .ok-icon-piclight
  • shop_light
    .ok-icon-shoplight
  • voice_light
    .ok-icon-voicelight
  • attention_favor_fill
    .ok-icon-attentionfavorfill-copy
  • 支付宝
    .ok-icon-umidd17
  • full
    .ok-icon-full
  • mail
    .ok-icon-mail
  • people_list
    .ok-icon-peoplelist
  • goods_new_fill
    .ok-icon-goodsnewfill
  • goods_new
    .ok-icon-goodsnew
  • medal_fill
    .ok-icon-medalfill
  • medal
    .ok-icon-medal
  • news_fill
    .ok-icon-newsfill
  • news_hot_fill
    .ok-icon-newshotfill
  • news_hot
    .ok-icon-newshot
  • news
    .ok-icon-news
  • video_fill
    .ok-icon-videofill
  • video
    .ok-icon-video
  • ask_fill
    .ok-icon-askfill
  • ask
    .ok-icon-ask
  • exit
    .ok-icon-exit
  • skin_fill
    .ok-icon-skinfill
  • skin
    .ok-icon-skin
  • money_bag_fill
    .ok-icon-moneybagfill
  • usefull_fill
    .ok-icon-usefullfill
  • usefull
    .ok-icon-usefull
  • money_bag
    .ok-icon-moneybag
  • 下载
    .ok-icon-download
  • redpacket_fill
    .ok-icon-redpacket_fill
  • subscription
    .ok-icon-subscription
  • 第三方
    .ok-icon-weibiaoti-
  • 详情
    .ok-icon-xiangqing
  • 数据
    .ok-icon-shuju
  • home_light
    .ok-icon-home_light
  • my_light
    .ok-icon-my_light
  • 第三方 QQ
    .ok-icon-disanfangQQ
  • 中国地图
    .ok-icon-chinamap-chart
  • 地图
    .ok-icon-tubiaozhizuomoban
  • set
    .ok-icon-set
  • .ok-icon-yun
  • 数据
    .ok-icon-shuju1
  • 数据
    .ok-icon-shuju2
  • 第三方
    .ok-icon-disanfang
  • 数据
    .ok-icon-shuju3
  • 控制台
    .ok-icon-kongzhitai
  • 耳机
    .ok-icon-headset
  • 设 置
    .ok-icon-shezhi

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="ok-icon ok-icon-xxx"></span>

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

  • appreciate
    #ok-icon-appreciate
  • check
    #ok-icon-check
  • close
    #ok-icon-close
  • edit
    #ok-icon-edit
  • emoji
    #ok-icon-emoji
  • favor_fill
    #ok-icon-favorfill
  • favor
    #ok-icon-favor
  • loading
    #ok-icon-loading
  • location_fill
    #ok-icon-locationfill
  • location
    #ok-icon-location
  • phone
    #ok-icon-phone
  • round_check_fill
    #ok-icon-roundcheckfill
  • round_check
    #ok-icon-roundcheck
  • round_close_fill
    #ok-icon-roundclosefill
  • round_close
    #ok-icon-roundclose
  • round_right_fill
    #ok-icon-roundrightfill
  • round_right
    #ok-icon-roundright
  • search
    #ok-icon-search
  • taxi
    #ok-icon-taxi
  • time_fill
    #ok-icon-timefill
  • time
    #ok-icon-time
  • unfold
    #ok-icon-unfold
  • warn_fill
    #ok-icon-warnfill
  • warn
    #ok-icon-warn
  • camera_fill
    #ok-icon-camerafill
  • camera
    #ok-icon-camera
  • comment_fill
    #ok-icon-commentfill
  • comment
    #ok-icon-comment
  • like_fill
    #ok-icon-likefill
  • like
    #ok-icon-like
  • notification_fill
    #ok-icon-notificationfill
  • notification
    #ok-icon-notification
  • order
    #ok-icon-order
  • same_fill
    #ok-icon-samefill
  • same
    #ok-icon-same
  • deliver
    #ok-icon-deliver
  • evaluate
    #ok-icon-evaluate
  • pay
    #ok-icon-pay
  • send
    #ok-icon-send
  • shop
    #ok-icon-shop
  • ticket
    #ok-icon-ticket
  • wang
    #ok-icon-wang
  • back
    #ok-icon-back
  • cascades
    #ok-icon-cascades
  • discover
    #ok-icon-discover
  • list
    #ok-icon-list
  • more
    #ok-icon-more
  • scan
    #ok-icon-scan
  • settings
    #ok-icon-settings
  • question_fill
    #ok-icon-questionfill
  • question
    #ok-icon-question
  • shop_fill
    #ok-icon-shopfill
  • form
    #ok-icon-form
  • wang_fill
    #ok-icon-wangfill
  • pic
    #ok-icon-pic
  • filter
    #ok-icon-filter
  • footprint
    #ok-icon-footprint
  • top
    #ok-icon-top
  • pull_down
    #ok-icon-pulldown
  • pull_up
    #ok-icon-pullup
  • right
    #ok-icon-right
  • refresh
    #ok-icon-refresh
  • more_android
    #ok-icon-moreandroid
  • delete_fill
    #ok-icon-deletefill
  • refund
    #ok-icon-refund
  • cart
    #ok-icon-cart
  • qr_code
    #ok-icon-qrcode
  • remind
    #ok-icon-remind
  • delete
    #ok-icon-delete
  • profile
    #ok-icon-profile
  • home
    #ok-icon-home
  • cart_fill
    #ok-icon-cartfill
  • discover_fill
    #ok-icon-discoverfill
  • home_fill
    #ok-icon-homefill
  • message
    #ok-icon-message
  • address_book
    #ok-icon-addressbook
  • link
    #ok-icon-link
  • lock
    #ok-icon-lock
  • unlock
    #ok-icon-unlock
  • vip
    #ok-icon-vip
  • weibo
    #ok-icon-weibo
  • activity
    #ok-icon-activity
  • big
    #ok-icon-big
  • friend_add_fill
    #ok-icon-friendaddfill
  • friend_add
    #ok-icon-friendadd
  • friend_famous
    #ok-icon-friendfamous
  • friend
    #ok-icon-friend
  • goods
    #ok-icon-goods
  • selection
    #ok-icon-selection
  • tmall
    #ok-icon-tmall
  • explore
    #ok-icon-explore
  • present
    #ok-icon-present
  • square_check_fill
    #ok-icon-squarecheckfill
  • square
    #ok-icon-square
  • square_check
    #ok-icon-squarecheck
  • round
    #ok-icon-round
  • round_add_fill
    #ok-icon-roundaddfill
  • round_add
    #ok-icon-roundadd
  • add
    #ok-icon-add
  • notification_forbid_fill
    #ok-icon-notificationforbidfill
  • explore_fill
    #ok-icon-explorefill
  • fold
    #ok-icon-fold
  • game
    #ok-icon-game
  • redpacket
    #ok-icon-redpacket
  • selection_fill
    #ok-icon-selectionfill
  • similar
    #ok-icon-similar
  • appreciate_fill
    #ok-icon-appreciatefill
  • info_fill
    #ok-icon-infofill
  • info
    #ok-icon-info
  • tao
    #ok-icon-tao
  • mobile_tao
    #ok-icon-mobiletao
  • forward_fill
    #ok-icon-forwardfill
  • forward
    #ok-icon-forward
  • recharge_fill
    #ok-icon-rechargefill
  • recharge
    #ok-icon-recharge
  • vipcard
    #ok-icon-vipcard
  • voice
    #ok-icon-voice
  • voice_fill
    #ok-icon-voicefill
  • friend_favor
    #ok-icon-friendfavor
  • wifi
    #ok-icon-wifi
  • share
    #ok-icon-share
  • we_fill
    #ok-icon-wefill
  • we
    #ok-icon-we
  • light_auto
    #ok-icon-lightauto
  • light_forbid
    #ok-icon-lightforbid
  • light_fill
    #ok-icon-lightfill
  • camera_rotate
    #ok-icon-camerarotate
  • light
    #ok-icon-light
  • bar_code
    #ok-icon-barcode
  • flashlight_close
    #ok-icon-flashlightclose
  • flashlight_open
    #ok-icon-flashlightopen
  • search_list
    #ok-icon-searchlist
  • service
    #ok-icon-service
  • sort
    #ok-icon-sort
  • 1212
    #ok-icon-1212
  • down
    #ok-icon-down
  • mobile
    #ok-icon-mobile
  • mobile_fill
    #ok-icon-mobilefill
  • copy
    #ok-icon-copy
  • countdown_fill
    #ok-icon-countdownfill
  • countdown
    #ok-icon-countdown
  • notice_fill
    #ok-icon-noticefill
  • notice
    #ok-icon-notice
  • qiang
    #ok-icon-qiang
  • upstage_fill
    #ok-icon-upstagefill
  • upstage
    #ok-icon-upstage
  • baby_fill
    #ok-icon-babyfill
  • baby
    #ok-icon-baby
  • brand_fill
    #ok-icon-brandfill
  • brand
    #ok-icon-brand
  • choiceness_fill
    #ok-icon-choicenessfill
  • choiceness
    #ok-icon-choiceness
  • clothes_fill
    #ok-icon-clothesfill
  • clothes
    #ok-icon-clothes
  • creative_fill
    #ok-icon-creativefill
  • creative
    #ok-icon-creative
  • female
    #ok-icon-female
  • keyboard
    #ok-icon-keyboard
  • male
    #ok-icon-male
  • new_fill
    #ok-icon-newfill
  • new
    #ok-icon-new
  • pull_left
    #ok-icon-pullleft
  • pull_right
    #ok-icon-pullright
  • rank_fill
    #ok-icon-rankfill
  • rank
    #ok-icon-rank
  • bad
    #ok-icon-bad
  • camera_add
    #ok-icon-cameraadd
  • focus
    #ok-icon-focus
  • friend_fill
    #ok-icon-friendfill
  • camera_add_fill
    #ok-icon-cameraaddfill
  • apps
    #ok-icon-apps
  • paint_fill
    #ok-icon-paintfill
  • paint
    #ok-icon-paint
  • pic_fill
    #ok-icon-picfill
  • refresh_arrow
    #ok-icon-refresharrow
  • mark_fill
    #ok-icon-markfill
  • mark
    #ok-icon-mark
  • present_fill
    #ok-icon-presentfill
  • repeal
    #ok-icon-repeal
  • album
    #ok-icon-album
  • people_fill
    #ok-icon-peoplefill
  • people
    #ok-icon-people
  • service_fill
    #ok-icon-servicefill
  • repair
    #ok-icon-repair
  • file
    #ok-icon-file
  • repair_fill
    #ok-icon-repairfill
  • taoxiaopu
    #ok-icon-taoxiaopu
  • attention_fill
    #ok-icon-attentionfill
  • attention
    #ok-icon-attention
  • command_fill
    #ok-icon-commandfill
  • command
    #ok-icon-command
  • community_fill
    #ok-icon-communityfill
  • community
    #ok-icon-community
  • read
    #ok-icon-read
  • suan
    #ok-icon-suan
  • hua
    #ok-icon-hua
  • ju
    #ok-icon-ju
  • tian
    #ok-icon-tian
  • calendar
    #ok-icon-calendar
  • cut
    #ok-icon-cut
  • magic
    #ok-icon-magic
  • backward_fill
    #ok-icon-backwardfill
  • play_fill
    #ok-icon-playfill
  • stop
    #ok-icon-stop
  • tag_fill
    #ok-icon-tagfill
  • tag
    #ok-icon-tag
  • group
    #ok-icon-group
  • all
    #ok-icon-all
  • back_delete
    #ok-icon-backdelete
  • hot_fill
    #ok-icon-hotfill
  • hot
    #ok-icon-hot
  • post
    #ok-icon-post
  • radio_box
    #ok-icon-radiobox
  • round_down
    #ok-icon-rounddown
  • upload
    #ok-icon-upload
  • write_fill
    #ok-icon-writefill
  • write
    #ok-icon-write
  • radio_box_fill
    #ok-icon-radioboxfill
  • punch
    #ok-icon-punch
  • shake
    #ok-icon-shake
  • 第三方 微博
    #ok-icon-disanfangweibo
  • 第三方 微信
    #ok-icon-disanfangweixin
  • add
    #ok-icon-add1
  • move
    #ok-icon-move
  • safe
    #ok-icon-safe
  • haodian
    #ok-icon-haodian
  • mao
    #ok-icon-mao
  • qi
    #ok-icon-qi
  • ye
    #ok-icon-ye
  • juhuasuan
    #ok-icon-juhuasuan
  • taoqianggou
    #ok-icon-taoqianggou
  • tianmao
    #ok-icon-tianmao
  • activity_fill
    #ok-icon-activityfill
  • crown_fill
    #ok-icon-crownfill
  • crown
    #ok-icon-crown
  • goods_fill
    #ok-icon-goodsfill
  • message_fill
    #ok-icon-messagefill
  • profile_fill
    #ok-icon-profilefill
  • sound
    #ok-icon-sound
  • sponsor_fill
    #ok-icon-sponsorfill
  • sponsor
    #ok-icon-sponsor
  • up_block
    #ok-icon-upblock
  • we_block
    #ok-icon-weblock
  • we_unblock
    #ok-icon-weunblock
  • 1111
    #ok-icon-1111
  • my
    #ok-icon-my
  • my_fill
    #ok-icon-myfill
  • emoji_fill
    #ok-icon-emojifill
  • emoji_flash_fill
    #ok-icon-emojiflashfill
  • flashbuy_fill
    #ok-icon-flashbuyfill-copy
  • text
    #ok-icon-text
  • goods_favor
    #ok-icon-goodsfavor
  • music_fill
    #ok-icon-musicfill
  • music_forbid_fill
    #ok-icon-musicforbidfill
  • xiami_forbid
    #ok-icon-xiamiforbid
  • xiami
    #ok-icon-xiami
  • round_left_fill
    #ok-icon-roundleftfill
  • triangle_down_fill
    #ok-icon-triangledownfill
  • triangle_up_fill
    #ok-icon-triangleupfill
  • round_left_fill
    #ok-icon-roundleftfill-copy
  • pull_down
    #ok-icon-pulldown1
  • emoji_light
    #ok-icon-emojilight
  • keyboard_light
    #ok-icon-keyboardlight
  • record_fill
    #ok-icon-recordfill
  • record_light
    #ok-icon-recordlight
  • record
    #ok-icon-record
  • round_add_light
    #ok-icon-roundaddlight
  • sound_light
    #ok-icon-soundlight
  • cardboard_fill
    #ok-icon-cardboardfill
  • cardboard
    #ok-icon-cardboard
  • form_fill
    #ok-icon-formfill
  • coin
    #ok-icon-coin
  • sort_light
    #ok-icon-sortlight
  • ok
    #ok-icon-yooxi
  • cardboard_forbid
    #ok-icon-cardboardforbid
  • circle_fill
    #ok-icon-circlefill
  • circle
    #ok-icon-circle
  • attention_forbid
    #ok-icon-attentionforbid
  • attention_forbid_fill
    #ok-icon-attentionforbidfill
  • attention_favor_fill
    #ok-icon-attentionfavorfill
  • attention_favor
    #ok-icon-attentionfavor
  • pic_light
    #ok-icon-piclight
  • shop_light
    #ok-icon-shoplight
  • voice_light
    #ok-icon-voicelight
  • attention_favor_fill
    #ok-icon-attentionfavorfill-copy
  • 支付宝
    #ok-icon-umidd17
  • full
    #ok-icon-full
  • mail
    #ok-icon-mail
  • people_list
    #ok-icon-peoplelist
  • goods_new_fill
    #ok-icon-goodsnewfill
  • goods_new
    #ok-icon-goodsnew
  • medal_fill
    #ok-icon-medalfill
  • medal
    #ok-icon-medal
  • news_fill
    #ok-icon-newsfill
  • news_hot_fill
    #ok-icon-newshotfill
  • news_hot
    #ok-icon-newshot
  • news
    #ok-icon-news
  • video_fill
    #ok-icon-videofill
  • video
    #ok-icon-video
  • ask_fill
    #ok-icon-askfill
  • ask
    #ok-icon-ask
  • exit
    #ok-icon-exit
  • skin_fill
    #ok-icon-skinfill
  • skin
    #ok-icon-skin
  • money_bag_fill
    #ok-icon-moneybagfill
  • usefull_fill
    #ok-icon-usefullfill
  • usefull
    #ok-icon-usefull
  • money_bag
    #ok-icon-moneybag
  • 下载
    #ok-icon-download
  • redpacket_fill
    #ok-icon-redpacket_fill
  • subscription
    #ok-icon-subscription
  • 第三方
    #ok-icon-weibiaoti-
  • 详情
    #ok-icon-xiangqing
  • 数据
    #ok-icon-shuju
  • home_light
    #ok-icon-home_light
  • my_light
    #ok-icon-my_light
  • 第三方 QQ
    #ok-icon-disanfangQQ
  • 中国地图
    #ok-icon-chinamap-chart
  • 地图
    #ok-icon-tubiaozhizuomoban
  • set
    #ok-icon-set
  • #ok-icon-yun
  • 数据
    #ok-icon-shuju1
  • 数据
    #ok-icon-shuju2
  • 第三方
    #ok-icon-disanfang
  • 数据
    #ok-icon-shuju3
  • 控制台
    #ok-icon-kongzhitai
  • 耳机
    #ok-icon-headset
  • 设 置
    #ok-icon-shezhi

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>