• ic_add_line
    
  • ic_account_line
    
  • ic_arrow_dwon
    
  • ic_addfriend
    
  • ic_befriend
    
  • ic_apple_line
    
  • ic_arrow_right
    
  • ic_arrow_left
    
  • ic_bluetoothon
    
  • ic_bluetoothoff
    
  • ic_arrow_up
    
  • ic_camera_line
    
  • ic_deleate_line
    
  • ic_close_line
    
  • ic_down_line
    
  • ic_boy_line
    
  • ic_customerservice
    
  • ic_checked_line
    
  • ic_checkbox_line
    
  • ic_collect_line
    
  • ic_correct_line
    
  • ic_down_line
    
  • ic_edit
    
  • ic_dwonload_line
    
  • ic_cart_line
    
  • ic_down_round
    
  • ic_download
    
  • ic_friendlist
    
  • ic_locate_line
    
  • ic_like_line
    
  • ic_fingerpoint_black
    
  • ic_found_line
    
  • ic_email_line
    
  • ic_like_line_regulary
    
  • ic_list
    
  • ic_left_line的副本
    
  • ic_girl_line
    
  • ic_language_line
    
  • ic_message_line
    
  • ic_hot_line
    
  • ic_left_round
    
  • ic_left_line
    
  • ic_invisible
    
  • ic_emoj
    
  • ic_right_line
    
  • ic_scan_line
    
  • ic_more_across_black
    
  • ic_more_colum_balck
    
  • ic_signin_line
    
  • ic_refresh_line
    
  • ic_quit
    
  • ic_notice_line
    
  • ic_up_line
    
  • ic_upload_line
    
  • ic_right_line
    
  • ic_talk_line
    
  • ic_search_line
    
  • ic_password_line
    
  • ic_upload_square
    
  • ic_wallet_line
    
  • ic_QRcode
    
  • ic_picture_line
    
  • ic_support_line
    
  • ic_star_line
    
  • ic_upload
    
  • ic_reveiw
    
  • ic_setout_line
    
  • ic_safty_line
    
  • ic_test_line
    
  • ic_switch
    
  • ic_up_round
    
  • ic_wifi_black
    
  • ic_right_round
    
  • ic_set_line
    
  • ic_signedin
    
  • ic_up_line的副本
    
  • ic_repost_line
    
  • ic_verifycode
    
  • ic_vip_line
    
  • ic_twitter_line
    
  • ic_visible
    
  • ic_share_line
    
  • ic_add_filled
    
  • ic_acoount_filled
    
  • ic_checked_filled
    
  • ic_email_round
    
  • ic_deleate_filled
    
  • ic_alipay
    
  • ic_buetooth_filled_black
    
  • ic_less_black
    
  • ic_link
    
  • ic_facebook_round
    
  • ic_down_round_filled
    
  • ic_next_black
    
  • ic_help
    
  • ic_close_filled
    
  • ic_down_filled
    
  • ic_up_round_filled
    
  • ic_checked_line_color
    
  • ic_previous_black
    
  • ic_correct_filled
    
  • ic_apple_round
    
  • ic_weblog
    
  • ic_left_round_filled
    
  • ic_more_black
    
  • ic_boy_filled
    
  • ic_set_filled
    
  • ic_play_black
    
  • ic_like_filled_black
    
  • ic_up_filled
    
  • ic_voice_black
    
  • ic_laft_filled
    
  • ic_right_round_filled
    
  • ic_right_fileed
    
  • ic_setout_round
    
  • ic_girl_filled
    
  • ic_mobile
    
  • ic_hot_filled_black
    
  • ic_google_round
    
  • ic_locat_filled_black
    
  • ic_language_round
    
  • ic_password_filled
    
  • ic_twitter_round
    
  • ic_sendmessage_black
    
  • ic_wechat
    
  • ic_verifycode_filled
    
  • ic_vedio_black
    
  • ic_stop_black
    
  • ic_music_black
    
  • ic_share_round_black
    
  • ic_account_transparent
    
  • ic_close_transparent
    
  • ic_correct_transparent
    
  • ic_left_ transparent
    
  • ic_add_transparent
    
  • ic_password_transparent
    
  • ic_right_transparent
    
  • ic_down_transparent
    
  • ic_up_transparent
    
  • ic_left_round_transparent
    
  • ic_down_round_transparent
    
  • ic_up_round_transparent
    
  • ic_right_round_transparent
    
  • ic_deleate_transparent
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • ic_add_line
    .icon-ic_add_line
  • ic_account_line
    .icon-ic_account_line
  • ic_arrow_dwon
    .icon-ic_arrow_dwon
  • ic_addfriend
    .icon-ic_addfriend
  • ic_befriend
    .icon-ic_befriend
  • ic_apple_line
    .icon-ic_apple_line
  • ic_arrow_right
    .icon-ic_arrow_right
  • ic_arrow_left
    .icon-ic_arrow_left
  • ic_bluetoothon
    .icon-ic_bluetoothon
  • ic_bluetoothoff
    .icon-ic_bluetoothoff
  • ic_arrow_up
    .icon-ic_arrow_up
  • ic_camera_line
    .icon-ic_camera_line
  • ic_deleate_line
    .icon-ic_deleate_line
  • ic_close_line
    .icon-ic_close_line
  • ic_down_line
    .icon-ic_down_line
  • ic_boy_line
    .icon-ic_boy_line
  • ic_customerservice
    .icon-ic_customerservice
  • ic_checked_line
    .icon-ic_checked_line
  • ic_checkbox_line
    .icon-ic_checkbox_line
  • ic_collect_line
    .icon-ic_collect_line
  • ic_correct_line
    .icon-ic_correct_line
  • ic_down_line
    .icon-ic_down_line1
  • ic_edit
    .icon-ic_edit
  • ic_dwonload_line
    .icon-ic_dwonload_line
  • ic_cart_line
    .icon-ic_cart_line
  • ic_down_round
    .icon-ic_down_round
  • ic_download
    .icon-ic_download
  • ic_friendlist
    .icon-ic_friendlist
  • ic_locate_line
    .icon-ic_locate_line
  • ic_like_line
    .icon-ic_like_line
  • ic_fingerpoint_black
    .icon-ic_fingerpoint_black
  • ic_found_line
    .icon-ic_found_line
  • ic_email_line
    .icon-ic_email_line
  • ic_like_line_regulary
    .icon-ic_like_line_regulary
  • ic_list
    .icon-ic_list
  • ic_left_line的副本
    .icon-ic_left_linedefuben
  • ic_girl_line
    .icon-ic_girl_line
  • ic_language_line
    .icon-ic_language_line
  • ic_message_line
    .icon-ic_message_line
  • ic_hot_line
    .icon-ic_hot_line
  • ic_left_round
    .icon-ic_left_round
  • ic_left_line
    .icon-ic_left_line
  • ic_invisible
    .icon-ic_invisible
  • ic_emoj
    .icon-ic_emoj
  • ic_right_line
    .icon-ic_right_line
  • ic_scan_line
    .icon-ic_scan_line
  • ic_more_across_black
    .icon-ic_more_across_black
  • ic_more_colum_balck
    .icon-ic_more_colum_balck
  • ic_signin_line
    .icon-ic_signin_line
  • ic_refresh_line
    .icon-ic_refresh_line
  • ic_quit
    .icon-ic_quit
  • ic_notice_line
    .icon-ic_notice_line
  • ic_up_line
    .icon-ic_up_line
  • ic_upload_line
    .icon-ic_upload_line
  • ic_right_line
    .icon-ic_right_line1
  • ic_talk_line
    .icon-ic_talk_line
  • ic_search_line
    .icon-ic_search_line
  • ic_password_line
    .icon-ic_password_line
  • ic_upload_square
    .icon-ic_upload_square
  • ic_wallet_line
    .icon-ic_wallet_line
  • ic_QRcode
    .icon-ic_QRcode
  • ic_picture_line
    .icon-ic_picture_line
  • ic_support_line
    .icon-ic_support_line
  • ic_star_line
    .icon-ic_star_line
  • ic_upload
    .icon-ic_upload
  • ic_reveiw
    .icon-ic_reveiw
  • ic_setout_line
    .icon-ic_setout_line
  • ic_safty_line
    .icon-ic_safty_line
  • ic_test_line
    .icon-ic_test_line
  • ic_switch
    .icon-ic_switch
  • ic_up_round
    .icon-ic_up_round
  • ic_wifi_black
    .icon-ic_wifi_black
  • ic_right_round
    .icon-ic_right_round
  • ic_set_line
    .icon-ic_set_line
  • ic_signedin
    .icon-ic_signedin
  • ic_up_line的副本
    .icon-ic_up_linedefuben
  • ic_repost_line
    .icon-ic_repost_line
  • ic_verifycode
    .icon-ic_verifycode
  • ic_vip_line
    .icon-ic_vip_line
  • ic_twitter_line
    .icon-ic_twitter_line
  • ic_visible
    .icon-ic_visible
  • ic_share_line
    .icon-ic_share_line
  • ic_add_filled
    .icon-ic_add_filled
  • ic_acoount_filled
    .icon-ic_acoount_filled
  • ic_checked_filled
    .icon-ic_checked_filled
  • ic_email_round
    .icon-ic_email_round
  • ic_deleate_filled
    .icon-ic_deleate_filled
  • ic_alipay
    .icon-ic_alipay
  • ic_buetooth_filled_black
    .icon-ic_buetooth_filled_black
  • ic_less_black
    .icon-ic_less_black
  • ic_link
    .icon-ic_link
  • ic_facebook_round
    .icon-ic_facebook_round
  • ic_down_round_filled
    .icon-ic_down_round_filled
  • ic_next_black
    .icon-ic_next_black
  • ic_help
    .icon-ic_help
  • ic_close_filled
    .icon-ic_close_filled
  • ic_down_filled
    .icon-ic_down_filled
  • ic_up_round_filled
    .icon-ic_up_round_filled
  • ic_checked_line_color
    .icon-ic_checked_line_color
  • ic_previous_black
    .icon-ic_previous_black
  • ic_correct_filled
    .icon-ic_correct_filled
  • ic_apple_round
    .icon-ic_apple_round
  • ic_weblog
    .icon-ic_weblog
  • ic_left_round_filled
    .icon-ic_left_round_filled
  • ic_more_black
    .icon-ic_more_black
  • ic_boy_filled
    .icon-ic_boy_filled
  • ic_set_filled
    .icon-ic_set_filled
  • ic_play_black
    .icon-ic_play_black
  • ic_like_filled_black
    .icon-ic_like_filled_black
  • ic_up_filled
    .icon-ic_up_filled
  • ic_voice_black
    .icon-ic_voice_black
  • ic_laft_filled
    .icon-ic_left_filled
  • ic_right_round_filled
    .icon-ic_right_round_filled
  • ic_right_fileed
    .icon-ic_right_fileed
  • ic_setout_round
    .icon-ic_setout_round
  • ic_girl_filled
    .icon-ic_girl_filled
  • ic_mobile
    .icon-ic_mobile
  • ic_hot_filled_black
    .icon-ic_hot_filled_black
  • ic_google_round
    .icon-ic_google_round
  • ic_locat_filled_black
    .icon-ic_locat_filled_black
  • ic_language_round
    .icon-ic_language_round
  • ic_password_filled
    .icon-ic_password_filled
  • ic_twitter_round
    .icon-ic_twitter_round
  • ic_sendmessage_black
    .icon-ic_sendmessage_black
  • ic_wechat
    .icon-ic_wechat
  • ic_verifycode_filled
    .icon-ic_verifycode_filled
  • ic_vedio_black
    .icon-ic_vedio_black
  • ic_stop_black
    .icon-ic_stop_black
  • ic_music_black
    .icon-ic_music_black
  • ic_share_round_black
    .icon-ic_share_round_black
  • ic_account_transparent
    .icon-ic_account_transparent
  • ic_close_transparent
    .icon-ic_close_transparent
  • ic_correct_transparent
    .icon-ic_correct_transparent
  • ic_left_ transparent
    .icon-ic_left_transparent
  • ic_add_transparent
    .icon-ic_add_transparent
  • ic_password_transparent
    .icon-ic_password_transparent
  • ic_right_transparent
    .icon-ic_right_transparent
  • ic_down_transparent
    .icon-ic_down_transparent
  • ic_up_transparent
    .icon-ic_up_transparent
  • ic_left_round_transparent
    .icon-ic_left_round_transparent
  • ic_down_round_transparent
    .icon-ic_down_round_transparent
  • ic_up_round_transparent
    .icon-ic_up_round_transparent
  • ic_right_round_transparent
    .icon-ic_right_round_transparent
  • ic_deleate_transparent
    .icon-ic_deleate_transparent

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • ic_add_line
    #icon-ic_add_line
  • ic_account_line
    #icon-ic_account_line
  • ic_arrow_dwon
    #icon-ic_arrow_dwon
  • ic_addfriend
    #icon-ic_addfriend
  • ic_befriend
    #icon-ic_befriend
  • ic_apple_line
    #icon-ic_apple_line
  • ic_arrow_right
    #icon-ic_arrow_right
  • ic_arrow_left
    #icon-ic_arrow_left
  • ic_bluetoothon
    #icon-ic_bluetoothon
  • ic_bluetoothoff
    #icon-ic_bluetoothoff
  • ic_arrow_up
    #icon-ic_arrow_up
  • ic_camera_line
    #icon-ic_camera_line
  • ic_deleate_line
    #icon-ic_deleate_line
  • ic_close_line
    #icon-ic_close_line
  • ic_down_line
    #icon-ic_down_line
  • ic_boy_line
    #icon-ic_boy_line
  • ic_customerservice
    #icon-ic_customerservice
  • ic_checked_line
    #icon-ic_checked_line
  • ic_checkbox_line
    #icon-ic_checkbox_line
  • ic_collect_line
    #icon-ic_collect_line
  • ic_correct_line
    #icon-ic_correct_line
  • ic_down_line
    #icon-ic_down_line1
  • ic_edit
    #icon-ic_edit
  • ic_dwonload_line
    #icon-ic_dwonload_line
  • ic_cart_line
    #icon-ic_cart_line
  • ic_down_round
    #icon-ic_down_round
  • ic_download
    #icon-ic_download
  • ic_friendlist
    #icon-ic_friendlist
  • ic_locate_line
    #icon-ic_locate_line
  • ic_like_line
    #icon-ic_like_line
  • ic_fingerpoint_black
    #icon-ic_fingerpoint_black
  • ic_found_line
    #icon-ic_found_line
  • ic_email_line
    #icon-ic_email_line
  • ic_like_line_regulary
    #icon-ic_like_line_regulary
  • ic_list
    #icon-ic_list
  • ic_left_line的副本
    #icon-ic_left_linedefuben
  • ic_girl_line
    #icon-ic_girl_line
  • ic_language_line
    #icon-ic_language_line
  • ic_message_line
    #icon-ic_message_line
  • ic_hot_line
    #icon-ic_hot_line
  • ic_left_round
    #icon-ic_left_round
  • ic_left_line
    #icon-ic_left_line
  • ic_invisible
    #icon-ic_invisible
  • ic_emoj
    #icon-ic_emoj
  • ic_right_line
    #icon-ic_right_line
  • ic_scan_line
    #icon-ic_scan_line
  • ic_more_across_black
    #icon-ic_more_across_black
  • ic_more_colum_balck
    #icon-ic_more_colum_balck
  • ic_signin_line
    #icon-ic_signin_line
  • ic_refresh_line
    #icon-ic_refresh_line
  • ic_quit
    #icon-ic_quit
  • ic_notice_line
    #icon-ic_notice_line
  • ic_up_line
    #icon-ic_up_line
  • ic_upload_line
    #icon-ic_upload_line
  • ic_right_line
    #icon-ic_right_line1
  • ic_talk_line
    #icon-ic_talk_line
  • ic_search_line
    #icon-ic_search_line
  • ic_password_line
    #icon-ic_password_line
  • ic_upload_square
    #icon-ic_upload_square
  • ic_wallet_line
    #icon-ic_wallet_line
  • ic_QRcode
    #icon-ic_QRcode
  • ic_picture_line
    #icon-ic_picture_line
  • ic_support_line
    #icon-ic_support_line
  • ic_star_line
    #icon-ic_star_line
  • ic_upload
    #icon-ic_upload
  • ic_reveiw
    #icon-ic_reveiw
  • ic_setout_line
    #icon-ic_setout_line
  • ic_safty_line
    #icon-ic_safty_line
  • ic_test_line
    #icon-ic_test_line
  • ic_switch
    #icon-ic_switch
  • ic_up_round
    #icon-ic_up_round
  • ic_wifi_black
    #icon-ic_wifi_black
  • ic_right_round
    #icon-ic_right_round
  • ic_set_line
    #icon-ic_set_line
  • ic_signedin
    #icon-ic_signedin
  • ic_up_line的副本
    #icon-ic_up_linedefuben
  • ic_repost_line
    #icon-ic_repost_line
  • ic_verifycode
    #icon-ic_verifycode
  • ic_vip_line
    #icon-ic_vip_line
  • ic_twitter_line
    #icon-ic_twitter_line
  • ic_visible
    #icon-ic_visible
  • ic_share_line
    #icon-ic_share_line
  • ic_add_filled
    #icon-ic_add_filled
  • ic_acoount_filled
    #icon-ic_acoount_filled
  • ic_checked_filled
    #icon-ic_checked_filled
  • ic_email_round
    #icon-ic_email_round
  • ic_deleate_filled
    #icon-ic_deleate_filled
  • ic_alipay
    #icon-ic_alipay
  • ic_buetooth_filled_black
    #icon-ic_buetooth_filled_black
  • ic_less_black
    #icon-ic_less_black
  • ic_link
    #icon-ic_link
  • ic_facebook_round
    #icon-ic_facebook_round
  • ic_down_round_filled
    #icon-ic_down_round_filled
  • ic_next_black
    #icon-ic_next_black
  • ic_help
    #icon-ic_help
  • ic_close_filled
    #icon-ic_close_filled
  • ic_down_filled
    #icon-ic_down_filled
  • ic_up_round_filled
    #icon-ic_up_round_filled
  • ic_checked_line_color
    #icon-ic_checked_line_color
  • ic_previous_black
    #icon-ic_previous_black
  • ic_correct_filled
    #icon-ic_correct_filled
  • ic_apple_round
    #icon-ic_apple_round
  • ic_weblog
    #icon-ic_weblog
  • ic_left_round_filled
    #icon-ic_left_round_filled
  • ic_more_black
    #icon-ic_more_black
  • ic_boy_filled
    #icon-ic_boy_filled
  • ic_set_filled
    #icon-ic_set_filled
  • ic_play_black
    #icon-ic_play_black
  • ic_like_filled_black
    #icon-ic_like_filled_black
  • ic_up_filled
    #icon-ic_up_filled
  • ic_voice_black
    #icon-ic_voice_black
  • ic_laft_filled
    #icon-ic_left_filled
  • ic_right_round_filled
    #icon-ic_right_round_filled
  • ic_right_fileed
    #icon-ic_right_fileed
  • ic_setout_round
    #icon-ic_setout_round
  • ic_girl_filled
    #icon-ic_girl_filled
  • ic_mobile
    #icon-ic_mobile
  • ic_hot_filled_black
    #icon-ic_hot_filled_black
  • ic_google_round
    #icon-ic_google_round
  • ic_locat_filled_black
    #icon-ic_locat_filled_black
  • ic_language_round
    #icon-ic_language_round
  • ic_password_filled
    #icon-ic_password_filled
  • ic_twitter_round
    #icon-ic_twitter_round
  • ic_sendmessage_black
    #icon-ic_sendmessage_black
  • ic_wechat
    #icon-ic_wechat
  • ic_verifycode_filled
    #icon-ic_verifycode_filled
  • ic_vedio_black
    #icon-ic_vedio_black
  • ic_stop_black
    #icon-ic_stop_black
  • ic_music_black
    #icon-ic_music_black
  • ic_share_round_black
    #icon-ic_share_round_black
  • ic_account_transparent
    #icon-ic_account_transparent
  • ic_close_transparent
    #icon-ic_close_transparent
  • ic_correct_transparent
    #icon-ic_correct_transparent
  • ic_left_ transparent
    #icon-ic_left_transparent
  • ic_add_transparent
    #icon-ic_add_transparent
  • ic_password_transparent
    #icon-ic_password_transparent
  • ic_right_transparent
    #icon-ic_right_transparent
  • ic_down_transparent
    #icon-ic_down_transparent
  • ic_up_transparent
    #icon-ic_up_transparent
  • ic_left_round_transparent
    #icon-ic_left_round_transparent
  • ic_down_round_transparent
    #icon-ic_down_round_transparent
  • ic_up_round_transparent
    #icon-ic_up_round_transparent
  • ic_right_round_transparent
    #icon-ic_right_round_transparent
  • ic_deleate_transparent
    #icon-ic_deleate_transparent

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>