• big
    
  • more_android_light
    
  • friend_add_fill
    
  • friend_light
    
  • friend_add
    
  • more_light
    
  • friend_famous
    
  • goods_favor_light
    
  • friend
    
  • goods_new_fill_light
    
  • goods
    
  • goods_new_light
    
  • selection
    
  • goods_light
    
  • tmall
    
  • medal_fill_light
    
  • explore
    
  • medal_light
    
  • present
    
  • news_fill_light
    
  • square_check_fill
    
  • news_hot_fill_light
    
  • square
    
  • news_hot_light
    
  • square_check
    
  • news_light
    
  • round
    
  • video_fill_light
    
  • round_add_fill
    
  • message_fill_light
    
  • round_add
    
  • form_light
    
  • add
    
  • video_light
    
  • notification_forbid_fill
    
  • search_list_light
    
  • explore_fill
    
  • form_fill_light
    
  • fold
    
  • global_light
    
  • game
    
  • global
    
  • redpacket
    
  • favor_fill_light
    
  • selection_fill
    
  • delete_light
    
  • similar
    
  • back_android
    
  • appreciate_fill
    
  • back_android_light
    
  • info_fill
    
  • down_light
    
  • info
    
  • round_close_light
    
  • tao
    
  • round_close_fill_light
    
  • mobile_tao
    
  • expressman
    
  • forward_fill
    
  • punch_light
    
  • forward
    
  • evaluate_fill
    
  • recharge_fill
    
  • furniture
    
  • recharge
    
  • dress
    
  • vipcard
    
  • coffee
    
  • voice
    
  • sports
    
  • voice_fill
    
  • group_light
    
  • friend_favor
    
  • location_light
    
  • wifi
    
  • attention_light
    
  • share
    
  • group_fill_light
    
  • we_fill
    
  • group_fill
    
  • we
    
  • play_forward_fill
    
  • light_auto
    
  • subscription_light
    
  • light_forbid
    
  • deliver_fill
    
  • light_fill
    
  • notice_forbid_fill
    
  • camera_rotate
    
  • qr_code_light
    
  • light
    
  • settings_light
    
  • bar_code
    
  • pick
    
  • flashlight_close
    
  • form_favor_light
    
  • flashlight_open
    
  • round_comment_light
    
  • search_list
    
  • phone_light
    
  • service
    
  • round_down_light
    
  • sort
    
  • friend_settings_light
    
  • 1212
    
  • change_light
    
  • down
    
  • round_list_light
    
  • mobile
    
  • ticket_fill
    
  • mobile_fill
    
  • round_friend_fill
    
  • copy
    
  • round_crown_fill
    
  • countdown_fill
    
  • round_link_fill
    
  • countdown
    
  • round_light_fill
    
  • notice_fill
    
  • round_favor_fill
    
  • notice
    
  • round_menu_fill
    
  • qiang
    
  • round_location_fill
    
  • upstage_fill
    
  • round_pay_fill
    
  • upstage
    
  • round_like_fill
    
  • baby_fill
    
  • round_people_fill
    
  • baby
    
  • round_pay
    
  • brand_fill
    
  • round_rank_fill
    
  • brand
    
  • round_redpacket_fill
    
  • choiceness_fill
    
  • round_skin_fill
    
  • choiceness
    
  • round_record_fill
    
  • clothes_fill
    
  • round_ticket_fill
    
  • clothes
    
  • round_redpacket
    
  • creative_fill
    
  • round_text_fill
    
  • creative
    
  • round_ticket
    
  • female
    
  • round_transfer_fill
    
  • keyboard
    
  • subtitle_block_light
    
  • male
    
  • warn_light
    
  • new_fill
    
  • round_transfer
    
  • new
    
  • vip_code_light
    
  • pull_left
    
  • subtitle_unblock_light
    
  • pull_right
    
  • round_shop_fill
    
  • rank_fill
    
  • oppose_fill_light
    
  • rank
    
  • oppose_light
    
  • bad
    
  • living
    
  • camera_add
    
  • goods_hot_fill
    
  • focus
    
  • ticket_money_fill
    
  • friend_fill
    
  • arrow_left_fill
    
  • camera_add_fill
    
  • arrow_up_fill
    
  • apps
    
  • xiaoheiqun
    
  • paint_fill
    
  • auction
    
  • paint
    
  • return
    
  • pic_fill
    
  • mall_light
    
  • refresh_arrow
    
  • mall_fill_light
    
  • mark_fill
    
  • broadcast_fill
    
  • mark
    
  • at
    
  • present_fill
    
  • card_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
    
  • appreciate
    
  • triangle_up_fill
    
  • check
    
  • round_left_fill
    
  • close
    
  • pull_down
    
  • edit
    
  • emoji_light
    
  • emoji
    
  • keyboard_light
    
  • favor_fill
    
  • record_fill
    
  • favor
    
  • record_light
    
  • loading
    
  • record
    
  • location_fill
    
  • round_add_light
    
  • location
    
  • sound_light
    
  • phone
    
  • cardboard_fill
    
  • round_check_fill
    
  • cardboard
    
  • round_check
    
  • form_fill
    
  • round_close_fill
    
  • coin
    
  • round_close
    
  • sort_light
    
  • round_right_fill
    
  • cardboard_forbid
    
  • round_right
    
  • circle_fill
    
  • search
    
  • circle
    
  • taxi
    
  • attention_forbid
    
  • time_fill
    
  • attention_forbid_fill
    
  • time
    
  • attention_favor_fill
    
  • unfold
    
  • attention_favor
    
  • warn_fill
    
  • pic_light
    
  • warn
    
  • shop_light
    
  • camera_fill
    
  • voice_light
    
  • camera
    
  • attention_favor_fill
    
  • comment_fill
    
  • full
    
  • comment
    
  • mail
    
  • like_fill
    
  • people_list
    
  • like
    
  • goods_new_fill
    
  • notification_fill
    
  • goods_new
    
  • notification
    
  • medal_fill
    
  • order
    
  • medal
    
  • same_fill
    
  • news_fill
    
  • same
    
  • news_hot_fill
    
  • deliver
    
  • news_hot
    
  • evaluate
    
  • news
    
  • pay
    
  • video_fill
    
  • send
    
  • video
    
  • shop
    
  • ask_fill
    
  • ticket
    
  • ask
    
  • wang
    
  • exit
    
  • back
    
  • skin_fill
    
  • cascades
    
  • skin
    
  • discover
    
  • money_bag_fill
    
  • list
    
  • usefull_fill
    
  • more
    
  • usefull
    
  • scan
    
  • money_bag
    
  • settings
    
  • redpacket_fill
    
  • question_fill
    
  • subscription
    
  • question
    
  • home_light
    
  • shop_fill
    
  • my_light
    
  • form
    
  • community_light
    
  • wang_fill
    
  • cart_light
    
  • pic
    
  • we_light
    
  • filter
    
  • home_fill_light
    
  • footprint
    
  • cart_fill_light
    
  • top
    
  • community_fill_light
    
  • pull_down
    
  • my_fill_light
    
  • pull_up
    
  • we_fill_light
    
  • right
    
  • skin_light
    
  • refresh
    
  • search_light
    
  • more_android
    
  • scan_light
    
  • delete_fill
    
  • people_list_light
    
  • refund
    
  • message_light
    
  • cart
    
  • close_light
    
  • qr_code
    
  • add_light
    
  • remind
    
  • profile_light
    
  • delete
    
  • service_light
    
  • profile
    
  • friend_add_light
    
  • home
    
  • edit_light
    
  • cart_fill
    
  • camera_light
    
  • discover_fill
    
  • hot_light
    
  • home_fill
    
  • refresh_light
    
  • message
    
  • back_light
    
  • address_book
    
  • share_light
    
  • link
    
  • comment_light
    
  • lock
    
  • appreciate_light
    
  • unlock
    
  • favor_light
    
  • vip
    
  • appreciate_fill_light
    
  • weibo
    
  • comment_fill_light
    
  • activity
    
  • wang_light
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • big
    .icon-big
  • more_android_light
    .icon-more_android_light
  • friend_add_fill
    .icon-friendaddfill
  • friend_light
    .icon-friend_light
  • friend_add
    .icon-friendadd
  • more_light
    .icon-more_light
  • friend_famous
    .icon-friendfamous
  • goods_favor_light
    .icon-goods_favor_light
  • friend
    .icon-friend
  • goods_new_fill_light
    .icon-goods_new_fill_light
  • goods
    .icon-goods
  • goods_new_light
    .icon-goods_new_light
  • selection
    .icon-selection
  • goods_light
    .icon-goods_light
  • tmall
    .icon-tmall
  • medal_fill_light
    .icon-medal_fill_light
  • explore
    .icon-explore
  • medal_light
    .icon-medal_light
  • present
    .icon-present
  • news_fill_light
    .icon-news_fill_light
  • square_check_fill
    .icon-squarecheckfill
  • news_hot_fill_light
    .icon-news_hot_fill_light
  • square
    .icon-square
  • news_hot_light
    .icon-news_hot_light
  • square_check
    .icon-squarecheck
  • news_light
    .icon-news_light
  • round
    .icon-round
  • video_fill_light
    .icon-video_fill_light
  • round_add_fill
    .icon-roundaddfill
  • message_fill_light
    .icon-message_fill_light
  • round_add
    .icon-roundadd
  • form_light
    .icon-form_light
  • add
    .icon-add
  • video_light
    .icon-video_light
  • notification_forbid_fill
    .icon-notificationforbidfill
  • search_list_light
    .icon-search_list_light
  • explore_fill
    .icon-explorefill
  • form_fill_light
    .icon-form_fill_light
  • fold
    .icon-fold
  • global_light
    .icon-global_light
  • game
    .icon-game
  • global
    .icon-global
  • redpacket
    .icon-redpacket
  • favor_fill_light
    .icon-favor_fill_light
  • selection_fill
    .icon-selectionfill
  • delete_light
    .icon-delete_light
  • similar
    .icon-similar
  • back_android
    .icon-back_android
  • appreciate_fill
    .icon-appreciatefill
  • back_android_light
    .icon-back_android_light
  • info_fill
    .icon-infofill
  • down_light
    .icon-down_light
  • info
    .icon-info
  • round_close_light
    .icon-round_close_light
  • tao
    .icon-tao
  • round_close_fill_light
    .icon-round_close_fill_light
  • mobile_tao
    .icon-mobiletao
  • expressman
    .icon-expressman
  • forward_fill
    .icon-forwardfill
  • punch_light
    .icon-punch_light
  • forward
    .icon-forward
  • evaluate_fill
    .icon-evaluate_fill
  • recharge_fill
    .icon-rechargefill
  • furniture
    .icon-furniture
  • recharge
    .icon-recharge
  • dress
    .icon-dress
  • vipcard
    .icon-vipcard
  • coffee
    .icon-coffee
  • voice
    .icon-voice
  • sports
    .icon-sports
  • voice_fill
    .icon-voicefill
  • group_light
    .icon-group_light
  • friend_favor
    .icon-friendfavor
  • location_light
    .icon-location_light
  • wifi
    .icon-wifi
  • attention_light
    .icon-attention_light
  • share
    .icon-share
  • group_fill_light
    .icon-group_fill_light
  • we_fill
    .icon-wefill
  • group_fill
    .icon-group_fill
  • we
    .icon-we
  • play_forward_fill
    .icon-play_forward_fill
  • light_auto
    .icon-lightauto
  • subscription_light
    .icon-subscription_light
  • light_forbid
    .icon-lightforbid
  • deliver_fill
    .icon-deliver_fill
  • light_fill
    .icon-lightfill
  • notice_forbid_fill
    .icon-notice_forbid_fill
  • camera_rotate
    .icon-camerarotate
  • qr_code_light
    .icon-qr_code_light
  • light
    .icon-light
  • settings_light
    .icon-settings_light
  • bar_code
    .icon-barcode
  • pick
    .icon-pick
  • flashlight_close
    .icon-flashlightclose
  • form_favor_light
    .icon-form_favor_light
  • flashlight_open
    .icon-flashlightopen
  • round_comment_light
    .icon-round_comment_light
  • search_list
    .icon-searchlist
  • phone_light
    .icon-phone_light
  • service
    .icon-service
  • round_down_light
    .icon-round_down_light
  • sort
    .icon-sort
  • friend_settings_light
    .icon-friend_settings_light
  • 1212
    .icon-1212
  • change_light
    .icon-change
  • down
    .icon-down
  • round_list_light
    .icon-round_list_light
  • mobile
    .icon-mobile
  • ticket_fill
    .icon-ticket_fill
  • mobile_fill
    .icon-mobilefill
  • round_friend_fill
    .icon-round_friend_fill
  • copy
    .icon-copy
  • round_crown_fill
    .icon-round_crown_fill
  • countdown_fill
    .icon-countdownfill
  • round_link_fill
    .icon-round_link_fill
  • countdown
    .icon-countdown
  • round_light_fill
    .icon-round_light_fill
  • notice_fill
    .icon-noticefill
  • round_favor_fill
    .icon-round_favor_fill
  • notice
    .icon-notice
  • round_menu_fill
    .icon-round_menu_fill
  • qiang
    .icon-qiang
  • round_location_fill
    .icon-round_location_fill
  • upstage_fill
    .icon-upstagefill
  • round_pay_fill
    .icon-round_pay_fill
  • upstage
    .icon-upstage
  • round_like_fill
    .icon-round_like_fill
  • baby_fill
    .icon-babyfill
  • round_people_fill
    .icon-round_people_fill
  • baby
    .icon-baby
  • round_pay
    .icon-round_pay
  • brand_fill
    .icon-brandfill
  • round_rank_fill
    .icon-round_rank_fill
  • brand
    .icon-brand
  • round_redpacket_fill
    .icon-round_redpacket_fill
  • choiceness_fill
    .icon-choicenessfill
  • round_skin_fill
    .icon-round_skin_fill
  • choiceness
    .icon-choiceness
  • round_record_fill
    .icon-round_record_fill
  • clothes_fill
    .icon-clothesfill
  • round_ticket_fill
    .icon-round_ticket_fill
  • clothes
    .icon-clothes
  • round_redpacket
    .icon-round_redpacket
  • creative_fill
    .icon-creativefill
  • round_text_fill
    .icon-round_text_fill
  • creative
    .icon-creative
  • round_ticket
    .icon-round_ticket
  • female
    .icon-female
  • round_transfer_fill
    .icon-round_transfer_fill
  • keyboard
    .icon-keyboard
  • subtitle_block_light
    .icon-subtitle_block_light
  • male
    .icon-male
  • warn_light
    .icon-warn_light
  • new_fill
    .icon-newfill
  • round_transfer
    .icon-round_transfer
  • new
    .icon-new
  • vip_code_light
    .icon-vip_code_light
  • pull_left
    .icon-pullleft
  • subtitle_unblock_light
    .icon-subtitle_unblock_light
  • pull_right
    .icon-pullright
  • round_shop_fill
    .icon-round_shop_fill
  • rank_fill
    .icon-rankfill
  • oppose_fill_light
    .icon-oppose_fill_light
  • rank
    .icon-rank
  • oppose_light
    .icon-oppose_light
  • bad
    .icon-bad
  • living
    .icon-living
  • camera_add
    .icon-cameraadd
  • goods_hot_fill
    .icon-goods_hot_fill
  • focus
    .icon-focus
  • ticket_money_fill
    .icon-ticket_money_fill
  • friend_fill
    .icon-friendfill
  • arrow_left_fill
    .icon-arrow_left_fill
  • camera_add_fill
    .icon-cameraaddfill
  • arrow_up_fill
    .icon-arrow_up_fill
  • apps
    .icon-apps
  • xiaoheiqun
    .icon-xiaoheiqun
  • paint_fill
    .icon-paintfill
  • auction
    .icon-auction
  • paint
    .icon-paint
  • return
    .icon-return
  • pic_fill
    .icon-picfill
  • mall_light
    .icon-mall_light
  • refresh_arrow
    .icon-refresharrow
  • mall_fill_light
    .icon-mall_fill_light
  • mark_fill
    .icon-markfill
  • broadcast_fill
    .icon-broadcast_fill
  • mark
    .icon-mark
  • at
    .icon-at
  • present_fill
    .icon-presentfill
  • card_fill
    .icon-card_fill
  • repeal
    .icon-repeal
  • album
    .icon-album
  • people_fill
    .icon-peoplefill
  • people
    .icon-people
  • service_fill
    .icon-servicefill
  • repair
    .icon-repair
  • file
    .icon-file
  • repair_fill
    .icon-repairfill
  • taoxiaopu
    .icon-taoxiaopu
  • attention_fill
    .icon-attentionfill
  • attention
    .icon-attention
  • command_fill
    .icon-commandfill
  • command
    .icon-command
  • community_fill
    .icon-communityfill
  • community
    .icon-community
  • read
    .icon-read
  • suan
    .icon-suan
  • hua
    .icon-hua
  • ju
    .icon-ju
  • tian
    .icon-tian
  • calendar
    .icon-calendar
  • cut
    .icon-cut
  • magic
    .icon-magic
  • backward_fill
    .icon-backwardfill
  • play_fill
    .icon-playfill
  • stop
    .icon-stop
  • tag_fill
    .icon-tagfill
  • tag
    .icon-tag
  • group
    .icon-group
  • all
    .icon-all
  • back_delete
    .icon-backdelete
  • hot_fill
    .icon-hotfill
  • hot
    .icon-hot
  • post
    .icon-post
  • radio_box
    .icon-radiobox
  • round_down
    .icon-rounddown
  • upload
    .icon-upload
  • write_fill
    .icon-writefill
  • write
    .icon-write
  • radio_box_fill
    .icon-radioboxfill
  • punch
    .icon-punch
  • shake
    .icon-shake
  • add
    .icon-add1
  • move
    .icon-move
  • safe
    .icon-safe
  • haodian
    .icon-haodian
  • mao
    .icon-mao
  • qi
    .icon-qi
  • ye
    .icon-ye
  • juhuasuan
    .icon-juhuasuan
  • taoqianggou
    .icon-taoqianggou
  • tianmao
    .icon-tianmao
  • activity_fill
    .icon-activityfill
  • crown_fill
    .icon-crownfill
  • crown
    .icon-crown
  • goods_fill
    .icon-goodsfill
  • message_fill
    .icon-messagefill
  • profile_fill
    .icon-profilefill
  • sound
    .icon-sound
  • sponsor_fill
    .icon-sponsorfill
  • sponsor
    .icon-sponsor
  • up_block
    .icon-upblock
  • we_block
    .icon-weblock
  • we_unblock
    .icon-weunblock
  • 1111
    .icon-1111
  • my
    .icon-my
  • my_fill
    .icon-myfill
  • emoji_fill
    .icon-emojifill
  • emoji_flash_fill
    .icon-emojiflashfill
  • flashbuy_fill
    .icon-flashbuyfill-copy
  • text
    .icon-text
  • goods_favor
    .icon-goodsfavor
  • music_fill
    .icon-musicfill
  • music_forbid_fill
    .icon-musicforbidfill
  • xiami_forbid
    .icon-xiamiforbid
  • xiami
    .icon-xiami
  • round_left_fill
    .icon-roundleftfill
  • triangle_down_fill
    .icon-triangledownfill
  • appreciate
    .icon-appreciate
  • triangle_up_fill
    .icon-triangleupfill
  • check
    .icon-check
  • round_left_fill
    .icon-roundleftfill-copy
  • close
    .icon-close
  • pull_down
    .icon-pulldown1
  • edit
    .icon-edit
  • emoji_light
    .icon-emojilight
  • emoji
    .icon-emoji
  • keyboard_light
    .icon-keyboardlight
  • favor_fill
    .icon-favorfill
  • record_fill
    .icon-recordfill
  • favor
    .icon-favor
  • record_light
    .icon-recordlight
  • loading
    .icon-loading
  • record
    .icon-record
  • location_fill
    .icon-locationfill
  • round_add_light
    .icon-roundaddlight
  • location
    .icon-location
  • sound_light
    .icon-soundlight
  • phone
    .icon-phone
  • cardboard_fill
    .icon-cardboardfill
  • round_check_fill
    .icon-roundcheckfill
  • cardboard
    .icon-cardboard
  • round_check
    .icon-roundcheck
  • form_fill
    .icon-formfill
  • round_close_fill
    .icon-roundclosefill
  • coin
    .icon-coin
  • round_close
    .icon-roundclose
  • sort_light
    .icon-sortlight
  • round_right_fill
    .icon-roundrightfill
  • cardboard_forbid
    .icon-cardboardforbid
  • round_right
    .icon-roundright
  • circle_fill
    .icon-circlefill
  • search
    .icon-search
  • circle
    .icon-circle
  • taxi
    .icon-taxi
  • attention_forbid
    .icon-attentionforbid
  • time_fill
    .icon-timefill
  • attention_forbid_fill
    .icon-attentionforbidfill
  • time
    .icon-time
  • attention_favor_fill
    .icon-attentionfavorfill
  • unfold
    .icon-unfold
  • attention_favor
    .icon-attentionfavor
  • warn_fill
    .icon-warnfill
  • pic_light
    .icon-piclight
  • warn
    .icon-warn
  • shop_light
    .icon-shoplight
  • camera_fill
    .icon-camerafill
  • voice_light
    .icon-voicelight
  • camera
    .icon-camera
  • attention_favor_fill
    .icon-attentionfavorfill-copy
  • comment_fill
    .icon-commentfill
  • full
    .icon-full
  • comment
    .icon-comment
  • mail
    .icon-mail
  • like_fill
    .icon-likefill
  • people_list
    .icon-peoplelist
  • like
    .icon-like
  • goods_new_fill
    .icon-goodsnewfill
  • notification_fill
    .icon-notificationfill
  • goods_new
    .icon-goodsnew
  • notification
    .icon-notification
  • medal_fill
    .icon-medalfill
  • order
    .icon-order
  • medal
    .icon-medal
  • same_fill
    .icon-samefill
  • news_fill
    .icon-newsfill
  • same
    .icon-same
  • news_hot_fill
    .icon-newshotfill
  • deliver
    .icon-deliver
  • news_hot
    .icon-newshot
  • evaluate
    .icon-evaluate
  • news
    .icon-news
  • pay
    .icon-pay
  • video_fill
    .icon-videofill
  • send
    .icon-send
  • video
    .icon-video
  • shop
    .icon-shop
  • ask_fill
    .icon-askfill
  • ticket
    .icon-ticket
  • ask
    .icon-ask
  • wang
    .icon-wang
  • exit
    .icon-exit
  • back
    .icon-back
  • skin_fill
    .icon-skinfill
  • cascades
    .icon-cascades
  • skin
    .icon-skin
  • discover
    .icon-discover
  • money_bag_fill
    .icon-moneybagfill
  • list
    .icon-list
  • usefull_fill
    .icon-usefullfill
  • more
    .icon-more
  • usefull
    .icon-usefull
  • scan
    .icon-scan
  • money_bag
    .icon-moneybag
  • settings
    .icon-settings
  • redpacket_fill
    .icon-redpacket_fill
  • question_fill
    .icon-questionfill
  • subscription
    .icon-subscription
  • question
    .icon-question
  • home_light
    .icon-home_light
  • shop_fill
    .icon-shopfill
  • my_light
    .icon-my_light
  • form
    .icon-form
  • community_light
    .icon-community_light
  • wang_fill
    .icon-wangfill
  • cart_light
    .icon-cart_light
  • pic
    .icon-pic
  • we_light
    .icon-we_light
  • filter
    .icon-filter
  • home_fill_light
    .icon-home_fill_light
  • footprint
    .icon-footprint
  • cart_fill_light
    .icon-cart_fill_light
  • top
    .icon-top
  • community_fill_light
    .icon-community_fill_light
  • pull_down
    .icon-pulldown
  • my_fill_light
    .icon-my_fill_light
  • pull_up
    .icon-pullup
  • we_fill_light
    .icon-we_fill_light
  • right
    .icon-right
  • skin_light
    .icon-skin_light
  • refresh
    .icon-refresh
  • search_light
    .icon-search_light
  • more_android
    .icon-moreandroid
  • scan_light
    .icon-scan_light
  • delete_fill
    .icon-deletefill
  • people_list_light
    .icon-people_list_light
  • refund
    .icon-refund
  • message_light
    .icon-message_light
  • cart
    .icon-cart
  • close_light
    .icon-close_light
  • qr_code
    .icon-qrcode
  • add_light
    .icon-add_light
  • remind
    .icon-remind
  • profile_light
    .icon-profile_light
  • delete
    .icon-delete
  • service_light
    .icon-service_light
  • profile
    .icon-profile
  • friend_add_light
    .icon-friend_add_light
  • home
    .icon-home
  • edit_light
    .icon-edit_light
  • cart_fill
    .icon-cartfill
  • camera_light
    .icon-camera_light
  • discover_fill
    .icon-discoverfill
  • hot_light
    .icon-hot_light
  • home_fill
    .icon-homefill
  • refresh_light
    .icon-refresh_light
  • message
    .icon-message
  • back_light
    .icon-back_light
  • address_book
    .icon-addressbook
  • share_light
    .icon-share_light
  • link
    .icon-link
  • comment_light
    .icon-comment_light
  • lock
    .icon-lock
  • appreciate_light
    .icon-appreciate_light
  • unlock
    .icon-unlock
  • favor_light
    .icon-favor_light
  • vip
    .icon-vip
  • appreciate_fill_light
    .icon-appreciate_fill_light
  • weibo
    .icon-weibo
  • comment_fill_light
    .icon-comment_fill_light
  • activity
    .icon-activity
  • wang_light
    .icon-wang_light

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • big
    #icon-big
  • more_android_light
    #icon-more_android_light
  • friend_add_fill
    #icon-friendaddfill
  • friend_light
    #icon-friend_light
  • friend_add
    #icon-friendadd
  • more_light
    #icon-more_light
  • friend_famous
    #icon-friendfamous
  • goods_favor_light
    #icon-goods_favor_light
  • friend
    #icon-friend
  • goods_new_fill_light
    #icon-goods_new_fill_light
  • goods
    #icon-goods
  • goods_new_light
    #icon-goods_new_light
  • selection
    #icon-selection
  • goods_light
    #icon-goods_light
  • tmall
    #icon-tmall
  • medal_fill_light
    #icon-medal_fill_light
  • explore
    #icon-explore
  • medal_light
    #icon-medal_light
  • present
    #icon-present
  • news_fill_light
    #icon-news_fill_light
  • square_check_fill
    #icon-squarecheckfill
  • news_hot_fill_light
    #icon-news_hot_fill_light
  • square
    #icon-square
  • news_hot_light
    #icon-news_hot_light
  • square_check
    #icon-squarecheck
  • news_light
    #icon-news_light
  • round
    #icon-round
  • video_fill_light
    #icon-video_fill_light
  • round_add_fill
    #icon-roundaddfill
  • message_fill_light
    #icon-message_fill_light
  • round_add
    #icon-roundadd
  • form_light
    #icon-form_light
  • add
    #icon-add
  • video_light
    #icon-video_light
  • notification_forbid_fill
    #icon-notificationforbidfill
  • search_list_light
    #icon-search_list_light
  • explore_fill
    #icon-explorefill
  • form_fill_light
    #icon-form_fill_light
  • fold
    #icon-fold
  • global_light
    #icon-global_light
  • game
    #icon-game
  • global
    #icon-global
  • redpacket
    #icon-redpacket
  • favor_fill_light
    #icon-favor_fill_light
  • selection_fill
    #icon-selectionfill
  • delete_light
    #icon-delete_light
  • similar
    #icon-similar
  • back_android
    #icon-back_android
  • appreciate_fill
    #icon-appreciatefill
  • back_android_light
    #icon-back_android_light
  • info_fill
    #icon-infofill
  • down_light
    #icon-down_light
  • info
    #icon-info
  • round_close_light
    #icon-round_close_light
  • tao
    #icon-tao
  • round_close_fill_light
    #icon-round_close_fill_light
  • mobile_tao
    #icon-mobiletao
  • expressman
    #icon-expressman
  • forward_fill
    #icon-forwardfill
  • punch_light
    #icon-punch_light
  • forward
    #icon-forward
  • evaluate_fill
    #icon-evaluate_fill
  • recharge_fill
    #icon-rechargefill
  • furniture
    #icon-furniture
  • recharge
    #icon-recharge
  • dress
    #icon-dress
  • vipcard
    #icon-vipcard
  • coffee
    #icon-coffee
  • voice
    #icon-voice
  • sports
    #icon-sports
  • voice_fill
    #icon-voicefill
  • group_light
    #icon-group_light
  • friend_favor
    #icon-friendfavor
  • location_light
    #icon-location_light
  • wifi
    #icon-wifi
  • attention_light
    #icon-attention_light
  • share
    #icon-share
  • group_fill_light
    #icon-group_fill_light
  • we_fill
    #icon-wefill
  • group_fill
    #icon-group_fill
  • we
    #icon-we
  • play_forward_fill
    #icon-play_forward_fill
  • light_auto
    #icon-lightauto
  • subscription_light
    #icon-subscription_light
  • light_forbid
    #icon-lightforbid
  • deliver_fill
    #icon-deliver_fill
  • light_fill
    #icon-lightfill
  • notice_forbid_fill
    #icon-notice_forbid_fill
  • camera_rotate
    #icon-camerarotate
  • qr_code_light
    #icon-qr_code_light
  • light
    #icon-light
  • settings_light
    #icon-settings_light
  • bar_code
    #icon-barcode
  • pick
    #icon-pick
  • flashlight_close
    #icon-flashlightclose
  • form_favor_light
    #icon-form_favor_light
  • flashlight_open
    #icon-flashlightopen
  • round_comment_light
    #icon-round_comment_light
  • search_list
    #icon-searchlist
  • phone_light
    #icon-phone_light
  • service
    #icon-service
  • round_down_light
    #icon-round_down_light
  • sort
    #icon-sort
  • friend_settings_light
    #icon-friend_settings_light
  • 1212
    #icon-1212
  • change_light
    #icon-change
  • down
    #icon-down
  • round_list_light
    #icon-round_list_light
  • mobile
    #icon-mobile
  • ticket_fill
    #icon-ticket_fill
  • mobile_fill
    #icon-mobilefill
  • round_friend_fill
    #icon-round_friend_fill
  • copy
    #icon-copy
  • round_crown_fill
    #icon-round_crown_fill
  • countdown_fill
    #icon-countdownfill
  • round_link_fill
    #icon-round_link_fill
  • countdown
    #icon-countdown
  • round_light_fill
    #icon-round_light_fill
  • notice_fill
    #icon-noticefill
  • round_favor_fill
    #icon-round_favor_fill
  • notice
    #icon-notice
  • round_menu_fill
    #icon-round_menu_fill
  • qiang
    #icon-qiang
  • round_location_fill
    #icon-round_location_fill
  • upstage_fill
    #icon-upstagefill
  • round_pay_fill
    #icon-round_pay_fill
  • upstage
    #icon-upstage
  • round_like_fill
    #icon-round_like_fill
  • baby_fill
    #icon-babyfill
  • round_people_fill
    #icon-round_people_fill
  • baby
    #icon-baby
  • round_pay
    #icon-round_pay
  • brand_fill
    #icon-brandfill
  • round_rank_fill
    #icon-round_rank_fill
  • brand
    #icon-brand
  • round_redpacket_fill
    #icon-round_redpacket_fill
  • choiceness_fill
    #icon-choicenessfill
  • round_skin_fill
    #icon-round_skin_fill
  • choiceness
    #icon-choiceness
  • round_record_fill
    #icon-round_record_fill
  • clothes_fill
    #icon-clothesfill
  • round_ticket_fill
    #icon-round_ticket_fill
  • clothes
    #icon-clothes
  • round_redpacket
    #icon-round_redpacket
  • creative_fill
    #icon-creativefill
  • round_text_fill
    #icon-round_text_fill
  • creative
    #icon-creative
  • round_ticket
    #icon-round_ticket
  • female
    #icon-female
  • round_transfer_fill
    #icon-round_transfer_fill
  • keyboard
    #icon-keyboard
  • subtitle_block_light
    #icon-subtitle_block_light
  • male
    #icon-male
  • warn_light
    #icon-warn_light
  • new_fill
    #icon-newfill
  • round_transfer
    #icon-round_transfer
  • new
    #icon-new
  • vip_code_light
    #icon-vip_code_light
  • pull_left
    #icon-pullleft
  • subtitle_unblock_light
    #icon-subtitle_unblock_light
  • pull_right
    #icon-pullright
  • round_shop_fill
    #icon-round_shop_fill
  • rank_fill
    #icon-rankfill
  • oppose_fill_light
    #icon-oppose_fill_light
  • rank
    #icon-rank
  • oppose_light
    #icon-oppose_light
  • bad
    #icon-bad
  • living
    #icon-living
  • camera_add
    #icon-cameraadd
  • goods_hot_fill
    #icon-goods_hot_fill
  • focus
    #icon-focus
  • ticket_money_fill
    #icon-ticket_money_fill
  • friend_fill
    #icon-friendfill
  • arrow_left_fill
    #icon-arrow_left_fill
  • camera_add_fill
    #icon-cameraaddfill
  • arrow_up_fill
    #icon-arrow_up_fill
  • apps
    #icon-apps
  • xiaoheiqun
    #icon-xiaoheiqun
  • paint_fill
    #icon-paintfill
  • auction
    #icon-auction
  • paint
    #icon-paint
  • return
    #icon-return
  • pic_fill
    #icon-picfill
  • mall_light
    #icon-mall_light
  • refresh_arrow
    #icon-refresharrow
  • mall_fill_light
    #icon-mall_fill_light
  • mark_fill
    #icon-markfill
  • broadcast_fill
    #icon-broadcast_fill
  • mark
    #icon-mark
  • at
    #icon-at
  • present_fill
    #icon-presentfill
  • card_fill
    #icon-card_fill
  • repeal
    #icon-repeal
  • album
    #icon-album
  • people_fill
    #icon-peoplefill
  • people
    #icon-people
  • service_fill
    #icon-servicefill
  • repair
    #icon-repair
  • file
    #icon-file
  • repair_fill
    #icon-repairfill
  • taoxiaopu
    #icon-taoxiaopu
  • attention_fill
    #icon-attentionfill
  • attention
    #icon-attention
  • command_fill
    #icon-commandfill
  • command
    #icon-command
  • community_fill
    #icon-communityfill
  • community
    #icon-community
  • read
    #icon-read
  • suan
    #icon-suan
  • hua
    #icon-hua
  • ju
    #icon-ju
  • tian
    #icon-tian
  • calendar
    #icon-calendar
  • cut
    #icon-cut
  • magic
    #icon-magic
  • backward_fill
    #icon-backwardfill
  • play_fill
    #icon-playfill
  • stop
    #icon-stop
  • tag_fill
    #icon-tagfill
  • tag
    #icon-tag
  • group
    #icon-group
  • all
    #icon-all
  • back_delete
    #icon-backdelete
  • hot_fill
    #icon-hotfill
  • hot
    #icon-hot
  • post
    #icon-post
  • radio_box
    #icon-radiobox
  • round_down
    #icon-rounddown
  • upload
    #icon-upload
  • write_fill
    #icon-writefill
  • write
    #icon-write
  • radio_box_fill
    #icon-radioboxfill
  • punch
    #icon-punch
  • shake
    #icon-shake
  • add
    #icon-add1
  • move
    #icon-move
  • safe
    #icon-safe
  • haodian
    #icon-haodian
  • mao
    #icon-mao
  • qi
    #icon-qi
  • ye
    #icon-ye
  • juhuasuan
    #icon-juhuasuan
  • taoqianggou
    #icon-taoqianggou
  • tianmao
    #icon-tianmao
  • activity_fill
    #icon-activityfill
  • crown_fill
    #icon-crownfill
  • crown
    #icon-crown
  • goods_fill
    #icon-goodsfill
  • message_fill
    #icon-messagefill
  • profile_fill
    #icon-profilefill
  • sound
    #icon-sound
  • sponsor_fill
    #icon-sponsorfill
  • sponsor
    #icon-sponsor
  • up_block
    #icon-upblock
  • we_block
    #icon-weblock
  • we_unblock
    #icon-weunblock
  • 1111
    #icon-1111
  • my
    #icon-my
  • my_fill
    #icon-myfill
  • emoji_fill
    #icon-emojifill
  • emoji_flash_fill
    #icon-emojiflashfill
  • flashbuy_fill
    #icon-flashbuyfill-copy
  • text
    #icon-text
  • goods_favor
    #icon-goodsfavor
  • music_fill
    #icon-musicfill
  • music_forbid_fill
    #icon-musicforbidfill
  • xiami_forbid
    #icon-xiamiforbid
  • xiami
    #icon-xiami
  • round_left_fill
    #icon-roundleftfill
  • triangle_down_fill
    #icon-triangledownfill
  • appreciate
    #icon-appreciate
  • triangle_up_fill
    #icon-triangleupfill
  • check
    #icon-check
  • round_left_fill
    #icon-roundleftfill-copy
  • close
    #icon-close
  • pull_down
    #icon-pulldown1
  • edit
    #icon-edit
  • emoji_light
    #icon-emojilight
  • emoji
    #icon-emoji
  • keyboard_light
    #icon-keyboardlight
  • favor_fill
    #icon-favorfill
  • record_fill
    #icon-recordfill
  • favor
    #icon-favor
  • record_light
    #icon-recordlight
  • loading
    #icon-loading
  • record
    #icon-record
  • location_fill
    #icon-locationfill
  • round_add_light
    #icon-roundaddlight
  • location
    #icon-location
  • sound_light
    #icon-soundlight
  • phone
    #icon-phone
  • cardboard_fill
    #icon-cardboardfill
  • round_check_fill
    #icon-roundcheckfill
  • cardboard
    #icon-cardboard
  • round_check
    #icon-roundcheck
  • form_fill
    #icon-formfill
  • round_close_fill
    #icon-roundclosefill
  • coin
    #icon-coin
  • round_close
    #icon-roundclose
  • sort_light
    #icon-sortlight
  • round_right_fill
    #icon-roundrightfill
  • cardboard_forbid
    #icon-cardboardforbid
  • round_right
    #icon-roundright
  • circle_fill
    #icon-circlefill
  • search
    #icon-search
  • circle
    #icon-circle
  • taxi
    #icon-taxi
  • attention_forbid
    #icon-attentionforbid
  • time_fill
    #icon-timefill
  • attention_forbid_fill
    #icon-attentionforbidfill
  • time
    #icon-time
  • attention_favor_fill
    #icon-attentionfavorfill
  • unfold
    #icon-unfold
  • attention_favor
    #icon-attentionfavor
  • warn_fill
    #icon-warnfill
  • pic_light
    #icon-piclight
  • warn
    #icon-warn
  • shop_light
    #icon-shoplight
  • camera_fill
    #icon-camerafill
  • voice_light
    #icon-voicelight
  • camera
    #icon-camera
  • attention_favor_fill
    #icon-attentionfavorfill-copy
  • comment_fill
    #icon-commentfill
  • full
    #icon-full
  • comment
    #icon-comment
  • mail
    #icon-mail
  • like_fill
    #icon-likefill
  • people_list
    #icon-peoplelist
  • like
    #icon-like
  • goods_new_fill
    #icon-goodsnewfill
  • notification_fill
    #icon-notificationfill
  • goods_new
    #icon-goodsnew
  • notification
    #icon-notification
  • medal_fill
    #icon-medalfill
  • order
    #icon-order
  • medal
    #icon-medal
  • same_fill
    #icon-samefill
  • news_fill
    #icon-newsfill
  • same
    #icon-same
  • news_hot_fill
    #icon-newshotfill
  • deliver
    #icon-deliver
  • news_hot
    #icon-newshot
  • evaluate
    #icon-evaluate
  • news
    #icon-news
  • pay
    #icon-pay
  • video_fill
    #icon-videofill
  • send
    #icon-send
  • video
    #icon-video
  • shop
    #icon-shop
  • ask_fill
    #icon-askfill
  • ticket
    #icon-ticket
  • ask
    #icon-ask
  • wang
    #icon-wang
  • exit
    #icon-exit
  • back
    #icon-back
  • skin_fill
    #icon-skinfill
  • cascades
    #icon-cascades
  • skin
    #icon-skin
  • discover
    #icon-discover
  • money_bag_fill
    #icon-moneybagfill
  • list
    #icon-list
  • usefull_fill
    #icon-usefullfill
  • more
    #icon-more
  • usefull
    #icon-usefull
  • scan
    #icon-scan
  • money_bag
    #icon-moneybag
  • settings
    #icon-settings
  • redpacket_fill
    #icon-redpacket_fill
  • question_fill
    #icon-questionfill
  • subscription
    #icon-subscription
  • question
    #icon-question
  • home_light
    #icon-home_light
  • shop_fill
    #icon-shopfill
  • my_light
    #icon-my_light
  • form
    #icon-form
  • community_light
    #icon-community_light
  • wang_fill
    #icon-wangfill
  • cart_light
    #icon-cart_light
  • pic
    #icon-pic
  • we_light
    #icon-we_light
  • filter
    #icon-filter
  • home_fill_light
    #icon-home_fill_light
  • footprint
    #icon-footprint
  • cart_fill_light
    #icon-cart_fill_light
  • top
    #icon-top
  • community_fill_light
    #icon-community_fill_light
  • pull_down
    #icon-pulldown
  • my_fill_light
    #icon-my_fill_light
  • pull_up
    #icon-pullup
  • we_fill_light
    #icon-we_fill_light
  • right
    #icon-right
  • skin_light
    #icon-skin_light
  • refresh
    #icon-refresh
  • search_light
    #icon-search_light
  • more_android
    #icon-moreandroid
  • scan_light
    #icon-scan_light
  • delete_fill
    #icon-deletefill
  • people_list_light
    #icon-people_list_light
  • refund
    #icon-refund
  • message_light
    #icon-message_light
  • cart
    #icon-cart
  • close_light
    #icon-close_light
  • qr_code
    #icon-qrcode
  • add_light
    #icon-add_light
  • remind
    #icon-remind
  • profile_light
    #icon-profile_light
  • delete
    #icon-delete
  • service_light
    #icon-service_light
  • profile
    #icon-profile
  • friend_add_light
    #icon-friend_add_light
  • home
    #icon-home
  • edit_light
    #icon-edit_light
  • cart_fill
    #icon-cartfill
  • camera_light
    #icon-camera_light
  • discover_fill
    #icon-discoverfill
  • hot_light
    #icon-hot_light
  • home_fill
    #icon-homefill
  • refresh_light
    #icon-refresh_light
  • message
    #icon-message
  • back_light
    #icon-back_light
  • address_book
    #icon-addressbook
  • share_light
    #icon-share_light
  • link
    #icon-link
  • comment_light
    #icon-comment_light
  • lock
    #icon-lock
  • appreciate_light
    #icon-appreciate_light
  • unlock
    #icon-unlock
  • favor_light
    #icon-favor_light
  • vip
    #icon-vip
  • appreciate_fill_light
    #icon-appreciate_fill_light
  • weibo
    #icon-weibo
  • comment_fill_light
    #icon-comment_fill_light
  • activity
    #icon-activity
  • wang_light
    #icon-wang_light

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>