IconFont 图标
-
银行卡#vip-bankcard_icon
-
包#vip-bag_icon
-
地址#vip-address_icon
-
确认#vip-affirm_icon
-
添加#vip-add_icon
-
条形图#vip-bar-chart_icon
-
相机#vip-camera_icon
-
购物车#vip-cart_icon
-
分类#vip-classify_icon
-
聊天#vip-conversation_icon
-
复制#vip-copy_icon
-
编辑#vip-edit_icon
-
删除#vip-dustbin_icon
-
礼物#vip-gift_icon
-
折线图#vip-line-chart_icon
-
喜欢#vip-love_icon
-
更多#vip-more_icon
-
密码#vip-password_icon
-
手机#vip-phone_icon
-
图片#vip-picture_icon
-
饼状图#vip-pie-chart_icon
-
赞#vip-praise_icon
-
减少#vip-reduce_icon
-
扫一扫#vip-richscan_icon
-
筛选#vip-screen_icon
-
分享#vip-share_icon
-
文本#vip-text_icon
-
商城#vip-store_icon
-
时间#vip-time_icon
-
转发#vip-transmit_icon
-
钱包#vip-wallet_icon
-
无线网#vip-wifi_icon
-
文件夹#vip-folder_icon
-
放大#vip-amplification_icon
-
日历#vip-calendar_icon
-
标签#vip-label_icon
-
好友列表#vip-linkman-contacts_ico
-
禁音#vip-mute_icon
-
播放#vip-play_icon
-
客服#vip-service_icon
-
刷新#vip-refresh_icon
-
订单#vip-order_icon
-
红包#vip-red-packet_icon
-
新闻#vip-news_icon
-
缩小#vip-shrink_icon
-
置顶#vip-stick_icon
-
录像#vip-video_icon
-
排序#vip-sort_icon
-
暂停#vip-suspend_icon
-
语音#vip-voice_icon
-
声音#vip-volume_icon
-
注意#vip-warning_icon
-
活动#vip-activity_icon
-
书籍#vip-book_icon
-
添加好友#vip-add-friends_icon
-
下载#vip-download_icon
-
电#vip-electricity_icon
-
表情#vip-emoji_icon
-
女#vip-female_icon
-
直播#vip-live_icon
-
男#vip-male_icon
-
列表#vip-list_icon
-
搜索#vip-search_icon
-
键盘#vip-keyboard_icon
-
会员#vip-member_icon
-
水#vip-water_icon
-
上传#vip-upload_icon
-
电脑#vip-computer_icon
-
邮件#vip-e-mail_icon
-
教育#vip-education_icon
-
奖章#vip-decoration_icon
-
大雨#vip-heavy-rain_icon
-
晴天#vip-fine_icon
-
暴雨#vip-intense-fall_icon
-
大雪#vip-heavy-snow_icon
-
会员卡#vip-membership-card_icon
-
奖牌#vip-medal_icon
-
中雨#vip-moderate-rain_icon
-
铅笔#vip-pan_icon
-
打印机#vip-printer_icon
-
阴天#vip-overcast-sky_icon
-
中雪#vip-moderate-snow_icon
-
温度#vip-thermometer_icon
-
小雨#vip-spit_icon
-
雷阵雨#vip-thundershower_icon
-
工具箱#vip-tool-cabinet_icon
-
奖杯#vip-trophy_icon
-
多云#vip-broken-sky_icon
-
airplane_icon#vip-airplane_icon
-
air_condition_icon#vip-air_condition_icon
-
alarm_clock_icon#vip-alarm_clock_icon
-
atm_icon#vip-atm_icon
-
alarm_icon#vip-alarm_icon
-
bank_icon#vip-bank_icon
-
balance_scale_icon#vip-balance_scale_icon
-
ban_barrage_icon#vip-ban_barrage_icon
-
barrage_icon#vip-barrage_icon
-
batch_processing_ico#vip-batch_processing_ico
-
bath_towel_icon#vip-bath_towel_icon
-
beverage_icon#vip-beverage_icon
-
bedroom_icon#vip-bedroom_icon
-
bike_icon#vip-bike_icon
-
battery_charging_ico#vip-battery_charging_ico
-
bathroom_icon#vip-bathroom_icon
-
capsule_icon#vip-capsule_icon
-
boat_icon#vip-boat_icon
-
car_icon#vip-car_icon
-
category_find_icon#vip-category_find_icon
-
circulation_icon#vip-circulation_icon
-
cold_icon#vip-cold_icon
-
code_icon#vip-code_icon
-
concentrate_icon#vip-concentrate_icon
-
controller_icon#vip-controller_icon
-
cup_icon#vip-cup_icon
-
collect_icon#vip-collect_icon
-
cpu_icon#vip-cpu_icon
-
droplight_icon#vip-droplight_icon
-
flashlight_icon#vip-flashlight_icon
-
forbid_icon#vip-forbid_icon
-
game_icon#vip-game_icon
-
fruit_icon#vip-fruit_icon
-
fitness_icon#vip-fitness_icon
-
fire_hydrant_icon#vip-fire_hydrant_icon
-
government_icon#vip-government_icon
-
ice_box_icon#vip-ice_box_icon
-
hotel_icon#vip-hotel_icon
-
integral_icon#vip-integral_icon
-
law_icon#vip-law_icon
-
link_icon#vip-link_icon
-
loading_icon#vip-loading_icon
-
menu_icon#vip-menu_icon
-
map_icon#vip-map_icon
-
money_icon#vip-money_icon
-
network_icon#vip-network_icon
-
organization_icon#vip-organization_icon
-
pet_icon#vip-pet_icon
-
ppt_files_icon#vip-ppt_files_icon
-
qr_code_icon#vip-qr_code_icon
-
plug_icon#vip-plug_icon
-
repeal_icon#vip-repeal_icon
-
quit_icon#vip-quit_icon
-
resource_icon#vip-resource_icon
-
restaurant_icon#vip-restaurant_icon
-
rule_icon#vip-rule_icon
-
router_icon#vip-router_icon
-
rocket_icon#vip-rocket_icon
-
salary_icon#vip-salary_icon
-
server_icon#vip-server_icon
-
sd_card_icon#vip-sd_card_icon
-
show_icon#vip-show_icon
-
shield_icon#vip-shield_icon
-
speed_icon#vip-speed_icon
-
steamer_icon#vip-steamer_icon
-
tablet_computer_icon#vip-tablet_computer_icon
-
tailor_icon#vip-tailor_icon
-
timer_icon#vip-timer_icon
-
toy_icon#vip-toy_icon
-
train_icon#vip-train_icon
-
transition_icon#vip-transition_icon
-
translate_icon#vip-translate_icon
-
tree_icon#vip-tree_icon
-
tv_icon#vip-tv_icon
-
u_disk_icon#vip-u_disk_icon
-
umbrella_icon#vip-umbrella_icon
-
wait_sending_icon#vip-wait_sending_icon
-
warehouse_icon#vip-warehouse_icon
-
watermelon_icon#vip-watermelon_icon
-
wireframe_icon#vip-wireframe_icon
-
word_files_icon#vip-word_files_icon
-
workbench_icon#vip-workbench_icon
-
编辑#vip-bianji1
-
安全#vip-anquan
-
撤销#vip-chexiao
-
笔记本#vip-bijiben
-
茶杯#vip-chabei
-
待发货#vip-daifahuo
-
待付款#vip-daifukuan
-
待收货#vip-daishouhuo
-
点赞#vip-dianzan
-
电脑#vip-diannao
-
电话#vip-dianhua
-
定位#vip-dingwei
-
返回#vip-fanhui1
-
返回2#vip-fanhui2
-
分类#vip-fenlei
-
分类2#vip-fenlei1
-
返现#vip-fanxian
-
分享#vip-fenxiang1
-
分享2#vip-fenxiang2
-
个人#vip-geren
-
工具箱#vip-gongjuxiang
-
更多2#vip-gengduo
-
购物#vip-gouwu
-
购物车#vip-gouwuche
-
更多#vip-gengduo1
-
关闭#vip-guanbi1
-
关闭2#vip-guanbi2
-
关闭3#vip-guanbi3
-
减少#vip-jianshao
-
减少2#vip-jianshao1
-
客服#vip-kefu
-
链接#vip-lianjie
-
计时#vip-jishi
-
礼物#vip-liwu
-
列表2#vip-liebiao1
-
排行#vip-paihang
-
列表#vip-liebiao2
-
热门#vip-remen
-
删除#vip-shanchu1
-
上传#vip-shangchuan
-
日历#vip-rili
-
上一步#vip-shangyibu
-
收藏2#vip-shoucang1
-
设置#vip-shezhi1
-
收藏#vip-shoucang2
-
视频#vip-shipin1
-
手机#vip-shouji
-
书#vip-shu
-
搜索#vip-sousuo
-
提示#vip-tishi3
-
锁#vip-suo
-
天气#vip-tianqi
-
添加2#vip-tianjia1
-
通知#vip-tongzhi
-
退款#vip-tuikuan
-
文件#vip-wenjian1
-
团队#vip-tuandui
-
通知2#vip-tongzhi1
-
添加#vip-tianjia2
-
文件2#vip-wenjian2
-
文章#vip-wenzhang
-
问题#vip-wenti
-
下载#vip-xiazai
-
问题2#vip-wenti1
-
相机#vip-xiangji
-
消息#vip-xiaoxi
-
消息2#vip-xiaoxi1
-
信封#vip-xinfeng
-
信息#vip-xinxi
-
循环#vip-xunhuan
-
音乐#vip-yinle
-
音量#vip-yinliang
-
账单#vip-zhangdan
-
优惠券2#vip-youhuiquan
-
照片#vip-zhaopian
-
正确#vip-zhengque
-
优惠券#vip-youhuiquan1
-
正确2#vip-zhengque1
-
主页#vip-zhuye
-
文件#vip-wenjian
-
文件夹#vip-wenjianjia
-
新文件夹#vip-xinwenjianjia
-
开文件夹#vip-kaiwenjianjia
-
列表#vip-liebiao
-
范例#vip-fanli
-
模版#vip-moban
-
业务#vip-yewu
-
集合#vip-jihe
-
可见#vip-kejian
-
关联#vip-guanlian
-
数据#vip-shuju
-
新数据#vip-xinshuju
-
新建文件#vip-xinjianwenjian
-
文件类型#vip-wenjianleixing
-
云存储#vip-yuncunchu
-
日志#vip-rizhi
-
不可见#vip-bukejian
-
发布#vip-fabu
-
预警#vip-yujing
-
预览#vip-yulan
-
线上#vip-xianshang
-
测试#vip-ceshi
-
暂停#vip-zanting
-
停止#vip-tingzhi
-
播放#vip-bofang
-
新用户#vip-xinyonghu
-
用户#vip-yonghu
-
用户编辑#vip-yonghubianji
-
保存#vip-baocun
-
设置#vip-shezhi
-
编辑#vip-bianji
-
删除#vip-shanchu
-
关闭#vip-guanbi
-
粘贴#vip-niantie
-
复制#vip-fuzhi
-
退出#vip-tuichu
-
续费#vip-xufei
-
另存为#vip-lingcunwei
-
添加#vip-tianjia
-
手机解绑#vip-shoujijiebang
-
手机绑定#vip-shoujibangding
-
备案#vip-beian
-
首页#vip-shouye
-
剪切#vip-jianqie
-
放大镜#vip-fangdajing
-
放大#vip-fangda
-
导出#vip-daochu
-
导入#vip-daoru
-
时间#vip-shijian
-
日期#vip-riqi
-
时间日期#vip-shijianriqi
-
解锁#vip-jiesuo
-
锁定#vip-suoding
-
返回#vip-fanhui
-
刷新#vip-shuaxin
-
移动#vip-yidong
-
筛选#vip-shaixuan
-
安装包#vip-anzhuangbao
-
分享#vip-fenxiang
-
喜欢#vip-xihuan
-
收藏#vip-shoucang
-
邮件#vip-youjian
-
位置#vip-weizhi
-
社区#vip-shequ
-
反馈#vip-fankui
-
管理员#vip-guanliyuan
-
表格#vip-biaoge
-
仪表板#vip-yibiaoban
-
数据表#vip-shujubiao
-
数据集#vip-shujuji
-
演示#vip-yanshi
-
柱状图#vip-zhuzhuangtu
-
折线图#vip-zhexiantu
-
散点图#vip-sandiantu
-
大饼图#vip-dabingtu
-
地图#vip-ditu
-
关系图#vip-guanxitu
-
图层#vip-tuceng
-
设计#vip-sheji
-
左对齐#vip-zuoduiqi
-
右对齐#vip-youduiqi
-
上对齐#vip-shangduiqi
-
下对齐#vip-xiaduiqi
-
垂直居中#vip-chuizhijuzhong
-
水平居中#vip-shuipingjuzhong
-
横向平分#vip-hengxiangpingfen
-
纵向平分#vip-zongxiangpingfen
-
上移一层#vip-shangyiyiceng
-
下移一层#vip-xiayiyiceng
-
底层#vip-diceng
-
顶层#vip-dingceng
-
英文#vip-yingwen
-
中文#vip-zhongwen
-
loading#vip-loading
-
对#vip-dui
-
错#vip-cuo
-
感叹号#vip-gantanhao
-
问号#vip-wenhao
-
提示1#vip-tishi
-
回滚#vip-huigun
-
密钥#vip-miyue
-
旗子#vip-qizi
-
图钉#vip-tuding
-
云上传#vip-yunshangchuan
-
云下载#vip-yunxiazai
-
列表展开#vip-liebiaozhankai
-
返回旧版#vip-fanhuijiuban
-
新手引导#vip-xinshouyindao
-
耳麦#vip-ermai
-
列表收起#vip-liebiaoshouqi
-
资讯#vip-zixun
-
电源#vip-dianyuan
-
传输#vip-chuanshu
-
开发#vip-kaifa
-
灯泡#vip-dengpao
-
配置#vip-peizhi
-
在线#vip-zaixian
-
指标#vip-zhibiao
-
虫子#vip-chongzi
-
API#vip-API
-
A-B#vip-A-B
-
接口#vip-jiekou
-
总图#vip-zongtu
-
下钻#vip-xiazuan
-
订阅#vip-dingyue
-
查询#vip-chaxun
-
清洗#vip-qingxi
-
监控#vip-jiankong
-
视频#vip-shipin
-
过滤#vip-guolv
-
障碍#vip-zhangai
-
提示2#vip-tishi2
-
扫描#vip-saomiao
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="#vip-xxx"></use>
</svg>