IconFont 图标
-
bg_row_index#icon-bg_row_index
-
ic_card_binding#icon-ic_card_binding
-
ic_clean#icon-ic_clean
-
ic_cinema_loaction#icon-ic_cinema_loaction
-
ic_cinema_phone_number#icon-ic_cinema_phone_number
-
ic_comment#icon-ic_comment
-
ic_dropdown_arrow#icon-ic_dropdown_arrow
-
ic_download#icon-ic_download
-
ic_enlarge#icon-ic_enlarge
-
ic_follow#icon-ic_follow
-
ic_fullscreen#icon-ic_fullscreen
-
ic_coupon_binding#icon-ic_coupon_binding
-
ic_like_normal#icon-ic_like_normal
-
ic_like_selected#icon-ic_like_selected
-
ic_me_customer_sevice#icon-ic_me_customer_sevice
-
ic_login_weibo#icon-ic_login_weibo
-
ic_gothere#icon-ic_gothere
-
ic_me_feedback#icon-ic_me_feedback
-
ic_me_gender_male#icon-ic_me_gender_male
-
ic_me_gender_female#icon-ic_me_gender_female
-
ic_me_login_qq#icon-ic_me_login_qq
-
ic_me_message_center#icon-ic_me_message_center
-
ic_me_login_weixin#icon-ic_me_login_weixin
-
ic_me_movie#icon-ic_me_movie
-
ic_me_mywallet#icon-ic_me_mywallet
-
ic_me_myorder#icon-ic_me_myorder
-
ic_me_prize#icon-ic_me_prize
-
ic_more_arrow#icon-ic_more_arrow
-
ic_me_setting#icon-ic_me_setting
-
ic_pause#icon-ic_pause
-
ic_narrow#icon-ic_narrow
-
ic_play_video#icon-ic_play_video
-
ic_more_performer#icon-ic_more_performer
-
ic_prompt_dot#icon-ic_prompt_dot
-
ic_refresh#icon-ic_refresh
-
ic_research#icon-ic_research
-
ic_score_selected#icon-ic_score_selected
-
ic_score_normal#icon-ic_score_normal
-
ic_switch_times#icon-ic_switch_times
-
ic_tabbar_activity_normal#icon-ic_tabbar_activity_normal
-
ic_tabbar_film_selected#icon-ic_tabbar_film_selected
-
ic_tabbar_film_normal#icon-ic_tabbar_film_normal
-
ic_tabbar_activity_selected#icon-ic_tabbar_activity_selected
-
ic_tabbar_shop_normal#icon-ic_tabbar_shop_normal
-
ic_tabbar_me_normal#icon-ic_tabbar_me_normal
-
ic_tabbar_talk_normal#icon-ic_tabbar_talk_normal
-
ic_tabbar_me_selected#icon-ic_tabbar_me_selected
-
ic_tabbar_shop_selectedsvg#icon-ic_tabbar_shop_selectedsvg
-
ic_tabbar_talk_selected#icon-ic_tabbar_talk_selected
-
ic_time#icon-ic_time
-
ic_ticket_fail#icon-ic_ticket_fail
-
ic_traffic#icon-ic_traffic
-
ic_wantosee_selected#icon-ic_wantosee_selected
-
ic_wantosee_normal#icon-ic_wantosee_normal
-
slider_progressbar#icon-slider_progressbar
-
ic_foldup_arrow#icon-ic_foldup_arrow
-
ic_delete_ticket#icon-ic_delete_ticket
-
ic_me_honor#icon-ic_me_honor
-
ic_me_rights#icon-ic_me_rights
-
ic_me_points#icon-ic_me_points
-
ic_titlebar_back#icon-ic_titlebar_back
-
ic_refund#icon-ic_refund
-
ic_unrefund#icon-ic_unrefund
-
ic_card_traffic#icon-ic_card_traffic
-
ic_card_phone#icon-ic_card_phone
-
ic_card_info#icon-ic_card_info
-
ic_mine_xiaobailing#icon-ic_mine_xiaobailing
-
ic_titlebar_qs#icon-ic_titlebar_qs
-
ic_event_share#icon-ic_event_share
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>