IconFont 图标
-
导出#icon-daochu8
-
用户信息#icon-yonghuxinxi
-
发送#icon-fasong
-
app#icon-app
-
code#icon-code
-
copy#icon-copy1
-
delete#icon-delete
-
display#icon-display
-
download#icon-download
-
edit#icon-edit
-
enclosure#icon-enclosure
-
favor#icon-favor
-
file#icon-file
-
folder#icon-folder
-
tag#icon-tag
-
编辑#icon-bianji2
-
form#icon-form
-
价格#icon-price
-
地图#icon-ditu
-
3.1类目#icon-list
-
删除#icon-shanchu4
-
添加#icon-tianjia
-
excel#icon-excel
-
帮助#icon-bangzhu
-
经营分析#icon-jingyingfenxi
-
设置#icon-shezhi1
-
删除#icon-shanchu1
-
开,关#icon-no
-
组织部门#icon-zuzhibumen
-
销售体系#icon-xiaoshoutixi
-
自定义页面#icon-zidingyiyemian
-
系统操作日志#icon-xitongcaozuorizhi
-
打印报表#icon-dayinbaobiao
-
自定义报表#icon-zidingyibaobiao
-
新建#icon-xinjian
-
修改#icon-xiugai
-
查看#icon-chakan
-
刷新#icon-shuaxin
-
完成#icon-wancheng
-
审核#icon-shenhe
-
驳回#icon-bohui
-
作废#icon-zuofei
-
删除#icon-shanchu2
-
导入#icon-daoru2
-
导出#icon-daochu
-
添加子节点#icon-tianjiazijiedian
-
删除(子节点)#icon-shanchuzijiedian
-
复制配置#icon-fuzhipeizhi
-
菜单#icon-caidan
-
更多#icon-gengduo
-
list#icon-list1
-
list2#icon-list2
-
窗口#icon-chuangkou
-
删除#icon-shanchu5
-
数据导入#icon-daoru4
-
关闭#icon-shanchu
-
刷新#icon-shuaxin1
-
copy#icon-copy
-
下载#icon-xiazai
-
controller-fast-backward#icon-controllerfastbackward
-
controller-fast-forward#icon-controllerfastforward
-
controller-jump-to-start#icon-controllerjumptostart
-
controller-next#icon-controllernext
-
align-left#icon-alignleft
-
align-right#icon-alignright
-
align-top#icon-aligntop
-
align-vertical-middle#icon-alignverticalmiddle
-
删除#icon-shanchu3
-
设置#icon-shezhi
-
综合#icon-zonghe
-
caretright#icon-caretright
-
caretleft#icon-caretleft
-
caretdown#icon-caretdown
-
caretup#icon-caretup
-
forward#icon-forward
-
banckward#icon-banckward
-
fastbackward#icon-fastbackward
-
fastforward#icon-fastforward
-
stepforward#icon-stepforward
-
stepbackward#icon-stepbackward
-
down#icon-down
-
up#icon-up
-
right#icon-right
-
left#icon-left
-
arrowdown#icon-arrowdown
-
arrowup#icon-arrowup
-
arrowright#icon-arrowright
-
arrowleft#icon-arrowleft
-
close#icon-close
-
check#icon-check1
-
采购审批#icon-spsp
-
还原#icon-huanyuan
-
编辑#icon-ai-edit
-
用户#icon-ai-user
-
分享#icon-ai-share
-
热门#icon-ai-hot
-
删除#icon-ai-delete
-
搜索#icon-ai-search
-
人员信息#icon-renyuanxinxi-copy
-
返回顶部#icon-ai-top
-
消息#icon-ai-message
-
人脉#icon-ai-connection
-
点赞#icon-ai-like
-
收藏#icon-ai-mark
-
上传图片#icon-ai-up-img
-
往期回顾#icon-sphg
-
企业信息#icon-shiliangzhinengduixiang1
-
档案维护#icon-danganweihu
-
报告管理#icon-baogaoguanli
-
企业信息#icon-gaiqiyexinxi
-
维护#icon-weihu
-
复选框-未选中#icon-uncheck
-
复选框-选中#icon-check
-
我发起#icon-spzd
-
录入-03#icon-luru03
-
最大化#icon-max
-
上传#icon-shangchuan
-
print#icon-print
-
审核通过#icon-shenhetongguo
-
关闭#icon-guanbi
-
收起菜单#icon-shouqicaidan
-
提醒#icon-tixing
-
应用中心#icon-yingyongzhongxin
-
邮件#icon-youjian
-
展开菜单#icon-zhankaicaidan
-
注意#icon-zhuyi
-
任务#icon-renwu
-
配置管理#icon-peizhiguanli
-
日历#icon-rili
-
主页#icon-ziyuan
-
旋转#icon-xuanzhuan
-
审核#icon-shenhe1
-
审核办理情况#icon-baobei
-
订单查询#icon-spcx1
-
客户投诉录入#icon-kehutousuluru
-
订单查询#icon-spcx
-
上箭头#icon-shangjiantou
-
下箭头#icon-xiajiantou
-
右箭头#icon-youjiantou
-
左箭头#icon-zuojiantou
-
删除#icon-shanchu7
-
摄像头#icon-shexiangtou
-
上传#icon-shangchuan1
-
上传#icon-shangchuan2
-
预览#icon-yulan
-
上传#icon-shangchuan3
-
放大#icon-enlarge
-
缩小#icon-suoxiao
-
还原#icon-huanyuan1
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>