IconFont 图标
-
检查更新#icon-jianchagengxin
-
循环#icon-loop
-
设置#icon-05
-
会议#icon-huiyi
-
通讯录#icon-tongxunlu
-
下载#icon-xiazai
-
确认#icon-iconfontcolor94
-
编辑#icon-bianji
-
下载#icon-xiazai1
-
编辑#icon-bianji1
-
九宫格显示#icon-jiugonggexianshi
-
密码#icon-unie604
-
安全中心#icon-anquanzhongxin
-
加#icon-jia
-
菜单#icon-caidan
-
日程#icon-richeng
-
检查更新#icon-update
-
返回#icon-fanhui
-
九宫格#icon-jiugongge
-
检查更新#icon-jianchagengxin1
-
安全中心#icon-anquanzhongxin1
-
会议室#icon-huiyishi
-
五角星#icon-wujiaoxing
-
任务#icon-renwu-copy
-
人#icon-ren
-
用户#icon-yonghu
-
公文#icon-gongwen
-
热线电话#icon-rexiandianhua
-
闹钟#icon-naozhong
-
提示#icon-icon
-
限购#icon-xiangou
-
饼图#icon-bingtu
-
手势密码#icon-shoushimima
-
指纹解锁#icon-zhiwenjiesuo
-
循环#icon-xunhuan
-
限#icon-xian
-
加#icon-jia1
-
确认#icon-queren
-
PPT#icon-PPT
-
文件#icon-_png
-
菜单#icon-caidan1
-
密码#icon-mima
-
公文#icon-gongwen1
-
资料#icon-jinjian1
-
确认#icon-queren1
-
加#icon-jia2
-
发送#icon-fasong
-
部门#icon-bumen
-
个人中心#icon-gerenzhongxin
-
任务 线#icon-renwuxian
-
饼图#icon-bingtu1
-
通知公告#icon-tongzhigonggao
-
云端#icon-yunduan
-
指纹#icon-fingerprint__
-
菜单#icon-caidan2
-
发送#icon-fasong1
-
word#icon-word
-
用户#icon-yonghu1
-
放大#icon-fangda
-
附件#icon-fujian
-
material,双重对勾#icon-ic_done_all_px
-
限图标#icon-xiantubiao
-
铃铛#icon-lingdang
-
限#icon-xian1
-
word#icon-wordwendang
-
excel#icon-excel
-
日程#icon-richeng1
-
检查更新#icon-jianchagengxin2
-
热线电话#icon-rexiandianhua1
-
文件#icon-wenjian
-
pdf#icon-pdf
-
五角星#icon-wujiaoxing1
-
删除筛选项#icon-delete2
-
绩效#icon-jixiao
-
登录超时#icon-dengluchaoshi
-
请求超时#icon-qingqiuchaoshi
-
发送#icon-svg35
-
提示#icon-tishi
-
删 除#icon-shanchu
-
循环#icon-xunhuan1
-
icon_pdf#icon-pdf1
-
个人中心#icon-gerenzhongxin1
-
附件#icon-fujian1
-
加#icon-jia3
-
放大#icon-fangda1
-
通讯录#icon-tongxunlu1
-
附件#icon-fujian2
-
演示apk#icon-yanshiapk
-
会议#icon-huiyi1
-
删 除#icon-delete
-
九宫格#icon-jiugongge1
-
附件#icon-fujian3
-
关于#icon-guanyu1
-
删 除#icon-delete-copy
-
excel#icon-excel1
-
下载#icon-xiazai2
-
PPT#icon-PPT1
-
绩效#icon-jixiao1
-
加#icon-jia4
-
公文#icon-gongwen2
-
关于#icon-guanyu
-
通讯录#icon-tongxunlu2
-
删 除#icon-shanchu1
-
部门#icon-bumen1
-
插件#icon-chajian
-
铃铛#icon-jingbao
-
删除筛选项#icon-Delete
-
解决超时#icon-jiejuechaoshi
-
图标-合计#icon-tubiao-heji
-
责任清单#icon-zerenqingdan
-
图片文件#icon-filepicture
-
我的秘书#icon-wodemishu
-
云#icon-05yongyouyunpan
-
apk版本管理#icon-apkbanbenguanli
-
图片文件 0.1#icon-tupianwenjian
-
限时#icon-xianshi
-
意见#icon-Icon_yijian
-
文件#icon-wenjian1
-
加#icon-jia5
-
领导#icon-lingdao
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>