# IconFont 图标

- folder
  #icon-folder1
- 暂停
  #icon-zanting
- password
  #icon-password
- 暂停
  #icon-zanting1
- 三列列表1
  #icon-icon3
- 列表
  #icon-list
- 渠道列表
  #icon-qudaoliebiao
- 双列列表
  #icon-shuanglieliebiao
- close
  #icon-close
- msg
  #icon-msg
- mini
  #icon-mini
- next
  #icon-next
- search
  #icon-search
- back
  #icon-back
- zoomout
  #icon-zoomout
- zoomin
  #icon-zoomin
- set
  #icon-set
- skin
  #icon-skin
- delete
  #icon-delete
- close
  #icon-close2
- love
  #icon-love
- fav
  #icon-fav
- loved
  #icon-loved
- next
  #icon-next1
- max
  #icon-max
- order
  #icon-order
- pause
  #icon-pause
- play
  #icon-play
- praise
  #icon-praise
- prev
  #icon-prev
- resize
  #icon-resize
- state_pause
  #icon-state_pause
- state_play
  #icon-state_play
- voice
  #icon-voice
- share
  #icon-share
- src
  #icon-src
- crown
  #icon-crown
- love
  #icon-love1
- creator
  #icon-creator
- act
  #icon-act
- newalist
  #icon-newalist
- play_rb
  #icon-play_rb
- subscribe
  #icon-subscribe
- banner_arr
  #icon-banner_arr
- bind_arr
  #icon-bind_arr
- btn_add
  #icon-btn_add
- artist
  #icon-artist
- btn_added
  #icon-btn_added
- btn_addto_list
  #icon-btn_addto_list
- btn_apple
  #icon-btn_apple
- btn_dld
  #icon-btn_dld
- btn_close
  #icon-btn_close
- btn_delete
  #icon-btn_delete
- btn_fav
  #icon-btn_fav
- btn_droparr
  #icon-btn_droparr
- btn_faved
  #icon-btn_faved
- btn_follow_add
  #icon-btn_follow_add
- btn_follow_added
  #icon-btn_follow_added
- btn_loved
  #icon-btn_loved
- btn_love
  #icon-btn_love
- btn_more
  #icon-btn_more
- btn_pause_all
  #icon-btn_pause_all
- btn_play
  #icon-btn_play
- btn_msg
  #icon-btn_msg
- btn_profile
  #icon-btn_profile
- btn_praise
  #icon-btn_praise
- btn_scan
  #icon-btn_scan
- btn_play_sml
  #icon-btn_play_sml
- btn_reflash
  #icon-btn_reflash
- btn_share
  #icon-btn_share
- btn_start_sml
  #icon-btn_start_sml
- btn_start
  #icon-btn_start
- btn_subscribe
  #icon-btn_subscribe
- btn_wp
  #icon-btn_wp
- btn_update
  #icon-btn_update
- btn_write
  #icon-btn_write
- btn_zoom
  #icon-btn_zoom
- checkbox
  #icon-checkbox
- checkbox_checked
  #icon-checkbox_checked
- close_l
  #icon-close_l
- close
  #icon-close3
- cloud
  #icon-cloud
- cmt_at
  #icon-cmt_at
- cmt_pen
  #icon-cmt_pen
- cmt_emt
  #icon-cmt_emt
- cmt_like
  #icon-cmt_like
- cmt_pic
  #icon-cmt_pic
- cmt_topic
  #icon-cmt_topic
- colse
  #icon-colse
- detail_arr
  #icon-detail_arr
- detail_more
  #icon-detail_more
- download_draw
  #icon-download_draw
- edit
  #icon-edit
- download_pause
  #icon-download_pause
- daren_letter
  #icon-daren_letter
- empty_dld
  #icon-empty_dld
- empty_artist
  #icon-empty_artist
- enter
  #icon-enter
- empty_offline
  #icon-empty_offline
- exit
  #icon-exit
- feedback_err
  #icon-feedback_err
- fav
  #icon-fav1
- feedback_ok
  #icon-feedback_ok
- filter
  #icon-filter
- flag
  #icon-flag
- fm_delete
  #icon-fm_delete
- fm_love
  #icon-fm_love
- fm_loved
  #icon-fm_loved
- fm_more
  #icon-fm_more
- fm_pause
  #icon-fm_pause
- fm_next
  #icon-fm_next
- fm_play
  #icon-fm_play
- guide_close
  #icon-guide_close
- help_arr
  #icon-help_arr
- help
  #icon-help
- img_add
  #icon-img_add
- img_download
  #icon-img_download
- img_del
  #icon-img_del
- img_fold
  #icon-img_fold
- img_full
  #icon-img_full
- img_full_download
  #icon-img_full_download
- mv_comment
  #icon-mv_comment
- mv_big
  #icon-mv_big
- mv_fav
  #icon-mv_fav
- mv_pause
  #icon-mv_pause
- mv_full
  #icon-mv_full
- mv_replay
  #icon-mv_replay
- mv_revert
  #icon-mv_revert
- mv_share
  #icon-mv_share
- play_cloud
  #icon-play_cloud
- pub_stop
  #icon-pub_stop
- radio
  #icon-radio
- radio_i
  #icon-radio_i
- rank_play
  #icon-rank_play
- rank_stop
  #icon-rank_stop
- right_arrow
  #icon-right_arrow
- recycle
  #icon-recycle
- search
  #icon-search1
- search_arr
  #icon-search_arr
- search_artist
  #icon-search_artist
- search_close
  #icon-search_close
- selected
  #icon-selected
- set_back
  #icon-set_back
- selected_sml
  #icon-selected_sml
- set_dot
  #icon-set_dot
- sex_boy
  #icon-sex_boy
- setting
  #icon-setting
- sex_boy_sml
  #icon-sex_boy_sml
- skin_selected
  #icon-skin_selected
- skin_selected_sml
  #icon-skin_selected_sml
- sex_girl
  #icon-sex_girl
- skin_theme
  #icon-skin_theme
- sex_girl_sml
  #icon-sex_girl_sml
- sort_hvr
  #icon-sort_hvr
- sort
  #icon-sort
- sort_reset
  #icon-sort_reset
- stab_down
  #icon-stab_down
- stab_list
  #icon-stab_list
- stab_mix
  #icon-stab_mix
- stab_pic
  #icon-stab_pic
- stab_up
  #icon-stab_up
- store
  #icon-store
- tag_arr
  #icon-tag_arr
- timeline_alert
  #icon-timeline_alert
- timeline_artist_fav
  #icon-timeline_artist_fav
- timeline_artist_page
  #icon-timeline_artist_page
- timeline_add
  #icon-timeline_add
- timeline_artist_unfav
  #icon-timeline_artist_unfav
- timeline_close
  #icon-timeline_close
- timeline_cmt
  #icon-timeline_cmt
- timeline_daren
  #icon-timeline_daren
- timeline_dj
  #icon-timeline_dj
- timeline_link
  #icon-timeline_link
- timeline_forward
  #icon-timeline_forward
- timeline_quo
  #icon-timeline_quo
- timeline_rec_cmt
  #icon-timeline_rec_cmt
- timeline_unknown
  #icon-timeline_unknown
- timeline_rec_artist
  #icon-timeline_rec_artist
- timeline_yyr
  #icon-timeline_yyr
- topic_close
  #icon-topic_close
- topic_share
  #icon-topic_share
- transput_done
  #icon-transput_done
- transcoding
  #icon-transcoding
- transput_leadin
  #icon-transput_leadin
- transput_pause
  #icon-transput_pause
- tree_fold
  #icon-tree_fold
- tree_unfold
  #icon-tree_unfold
- type_emotion
  #icon-type_emotion
- type_selected
  #icon-type_selected
- type_language
  #icon-type_language
- type_scene
  #icon-type_scene
- type_style
  #icon-type_style
- type_theme
  #icon-type_theme
- cloud
  #icon-cloud1
- dld
  #icon-dld
- down
  #icon-down
- friend
  #icon-friend
- love
  #icon-love2
- new_bg
  #icon-new_bg
- up
  #icon-up
- back
  #icon-back1
- close
  #icon-close4
- head_arr
  #icon-head_arr
- msg
  #icon-msg1
- mini
  #icon-mini1
- next
  #icon-next2
- search
  #icon-search2
- zoomin
  #icon-zoomin2
- skin
  #icon-skin1
- zoomout
  #icon-zoomout2
- set
  #icon-set2
- file
  #icon-file1

## symbol引用

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

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

使用步骤如下：

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

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

### 第二步：加入通用css代码（引入一次就行）：

    <style type="text/css">
    .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>