IconFont 图标
-
网络信号#icon-wangluoxinhao
-
前进#icon-48
-
向上翻页#icon-iconfontup
-
向下翻页#icon-iconfontdown
-
维修扳手#icon-weixiubanshou
-
登陆#icon-denglu
-
退出#icon-tuichu1
-
维修#icon-weixiu
-
前进#icon-qianjin
-
缩小#icon-suoxiao
-
前进#icon-qianjin1
-
返回#icon-fanhui
-
版本更新#icon-banbengengxin
-
出库管理#icon-chukuguanli
-
检验#icon-icon-inspect
-
收银图标_交接班#icon-shouyintubiaojiaojieban
-
首页#icon-shouye
-
i-设备版本#icon-shebeibanben
-
前进#icon-qianjin2
-
生产加工#icon-shengchanjiagong
-
外协加工#icon-webicon307
-
维修#icon-buoumaotubiao46
-
版本升级#icon-banbenshengji
-
新增入库#icon-xinzengruku
-
待出库#icon-daichuku
-
入库#icon-iconfontzhizuobiaozhunbduan15
-
关闭#icon-guanbi
-
配件入库统计#icon-peijianrukutongji
-
配件出库统计#icon-peijianchukutongji
-
无网络#icon-wuwangluo
-
密码#icon-mima
-
放大#icon-fangda
-
左翻页#icon-zuofanye-xue
-
右翻页#icon-youfanye-xue
-
登陆#icon-denglu1
-
商品入库#icon-shangpinruku
-
前进#icon-qianjin3
-
当前版本#icon-ziyuan
-
901巡检、检验#icon-xunjianjianyan
-
添加#icon-tianjia-yin
-
成品入库与出库管理#icon-chengpinrukuyuchukuguanli
-
订单物料采购入库#icon-dingdanwuliaocaigouruku
-
生产领料与退料#icon-shengchanlingliaoyutuiliao
-
委外加工采购#icon-weiwaijiagongcaigou
-
委外加工采购入库#icon-weiwaijiagongcaigouruku
-
维修#icon-weixiu1
-
版本检测40#icon-banbenjiance
-
检验单#icon-jianyandan
-
子公司#icon-zigongsi
-
网络错误#icon-wangluocuowu
-
登陆密码-白色#icon-denglumima-baise
-
车间用电报表#icon-chejianyongdianbaobiao
-
返回#icon-fanhui1
-
工作车间#icon-web-icon-
-
放大#icon-fangda1
-
缩小#icon-suoxiao1
-
返回#icon-fanhui2
-
加工中心#icon-jiagongzhongxin
-
退料#icon-tuiliao
-
返回#icon-fanhui3
-
设置#icon-shezhi
-
返回#icon-fanhui4
-
密码#icon-password
-
加工进度#icon-web-icon-1
-
制作加工#icon-web-icon-2
-
退出#icon-icon-
-
称重#icon-chengzhong
-
出库#icon-chuku
-
库内加工#icon-kuneijiagong
-
入库#icon-ruku
-
调拨出库#icon-tiaobochuku
-
调拨入库#icon-tiaoboruku
-
出库复核#icon-chukufuhe
-
工厂车间管理#icon-gongchangchejianguanli
-
检验报告查询#icon-jianyanbaogaochaxun
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>