IconFont 图标
-
删除#icon-shanchu
-
删除#icon-shanchu1
-
导出#icon-daochu
-
自动投标#icon-1
-
导入#icon-iconfontxiazai
-
导入#icon-daoru
-
导入#icon-daoru1
-
13排列01#icon-13pailie01
-
按钮#icon-anniu
-
复制#icon-fuzhi3
-
名称#icon-mingcheng
-
图层#icon-tuceng
-
删除#icon-icon27
-
删除#icon-shanchu2
-
宗地_分割#icon-zd_fenge
-
最大化#icon-msnui-maximize
-
最小化#icon-msnui-minimize
-
icon合并#icon-icon
-
题型-矩阵多选#icon-tixingjuzhenduoxuan
-
排列-full#icon-pailiefull
-
合并uMerger#icon-hebingumerger
-
删除#icon-1shanchu
-
名称#icon-mingcheng1
-
头像#icon-4
-
操作 按钮#icon-hekriconzhuijiaanniuanniu
-
头像#icon-touxiang
-
选择#icon-xuanze
-
均衡器#icon-junhengqi
-
负载均衡#icon-fuzaijunheng
-
矩形测量#icon-juxingceliang
-
合并#icon-hebing
-
管线和地形输出-矩形#icon-guanxianhedixingshuchujuxing
-
复制#icon-fuzhi
-
合并#icon-hebing1
-
图层#icon-tuceng1
-
导出#icon-daochu1
-
筹集借款#icon-choujijiekuan
-
节点-排除#icon-jiedianpaichu
-
面分割#icon-mianfenge
-
操作_自动2#icon-caozuozidong2
-
负载均衡#icon-fuzaijunheng1
-
复制#icon-fuzhi1
-
复制#icon-iconfontstack
-
分割线#icon-fengexian
-
按钮#icon-icon1
-
5 学校名称#icon-5xuexiaomingcheng
-
自动定位#icon-zidongdingwei
-
导出#icon-daochu2
-
最小化#icon-zuixiaohua-copy
-
自动排版#icon-zidongpaiban
-
chart-funnel-plot#icon-chartfunnelplot
-
负载均衡#icon-fuzaijunheng2
-
自动评价#icon-zidongpingjia
-
路径[快速添加]#icon-lujingkuaisutianjia
-
上对齐#icon-shangduiqi
-
右对齐#icon-youduiqi
-
最大化#icon-zuidahua
-
次卡#icon-ciqia
-
层#icon-11
-
对齐#icon-duiqi
-
自动快照策略#icon-zidongkuaizhaocelve
-
不平均#icon-bupingjun
-
自动#icon-zidong
-
自由排列#icon-ziyoupailie
-
点阵#icon-bk-dot
-
选择#icon-xuanze-copy-copy
-
次晨#icon-cichen
-
排列#icon-pailie1
-
选择#icon-xuanze1
-
自动#icon-zidong1
-
次卧#icon-second-bedroom
-
多选矩阵#icon-duoxuanjuzhen
-
差集#icon-subtraction
-
形状#icon-xingzhuang
-
导出#icon-daochu3
-
人均产品持有数#icon-renjunchanpinchiyoushu
-
订单入住人名字#icon-dingdanruzhurenmingzi
-
左对齐#icon-zuoduiqi
-
开关按钮#icon-kaiguananniu
-
对齐#icon-duiqi1
-
操作_自动亮度#icon-zidongliangdu
-
重命名#icon-rename
-
选择#icon-icon901
-
排列模式-缩略图#icon-pailiemoshisuolvetu
-
绘制矩形#icon-huizhijuxing
-
布局#icon-buju
-
合并#icon-zuhe-copy
-
矩阵单选题#icon-juzhendanxuanti
-
布局#icon-buju1
-
复制#icon-fuzhi5
-
路径#icon-gonglu
-
分割#icon-fenge
-
价值路径#icon-jiazhilujing
-
分割线-左#icon-fengexian1
-
分割线-右#icon-fengexian11
-
排列#icon-pailie
-
布局#icon-buju2
-
药品名称#icon-yaopinmingcheng
-
员工渠道APP-任务名称#icon-renwumingcheng
-
公司名称变更#icon-gongsimingchengbiangeng
-
对齐#icon-duiqi2
-
布局#icon-buju3
-
按钮#icon-jia
-
对齐#icon-alignright
-
矩形 1#icon-juxing1
-
关注点名称#icon-guanzhudianmingcheng
-
复制#icon-fuzhi6
-
重命名#icon-iconzhongmingming-06
-
自动布局#icon-zidongbuju
-
自动发现#icon-zidongfaxian
-
自动回复#icon-zidonghuifu
-
布局#icon-ai212
-
多行文本框#icon-Multilinetextbox
-
自动站查询#icon-zidongzhanchaxun
-
头像#icon-touxiang1
-
导入#icon-daoru2
-
是_复制#icon-shi_fuzhi
-
选择#icon-xuanze2
-
传播路径#icon-chuanbolujing
-
按钮#icon-anniu1
-
a 曲线#icon-aquxian
-
寻找路径#icon-xunzhaolujing
-
导入#icon-daoru3
-
导入#icon-excelImport
-
重命名#icon-zhongmingming
-
圆角矩形 535 拷贝#icon-yuanjiaojuxingkaobei
-
关系路径#icon-guanxilujing
-
分割线#icon-fengexian2
-
自动投标#icon-auto1
-
产品名称#icon-p_name
-
活动矩阵#icon-huodongjuzhen
-
icon 公开派生项目#icon-icongongkaipaishengxiangmu
-
布局#icon-ic_view_array_px
-
布局#icon-ic_view_day_px
-
布局#icon-ic_view_quilt_px
-
点赞#icon-dianzan
-
密码#icon-mima
-
通知#icon-tongzhi
-
编辑#icon-bianji
-
刷新#icon-shuaxin
-
时间#icon-shijian
-
导出#icon-daochu4
-
边框CoGraphics#icon-waibiankuang
-
16寄件、发送-线性#icon-jijianfasong-xianxing
-
16寄件、发送#icon-jijianfasong
-
28体积、空间#icon-tijikongjian
-
28体积、空间-线性#icon-tijikongjian-xianxing
-
30应用程序#icon-yingyongchengxu
-
31标准#icon-biaozhun
-
31标准-线性#icon-biaozhun-xianxing
-
33资源#icon-ziyuan
-
33资源-线性#icon-ziyuan-xianxing
-
34模板、框架-线性#icon-mobankuangjia-xianxing
-
215更多-横向#icon-gengduo-hengxiang
-
216更多-竖向#icon-gengduo-shuxiang
-
233键盘-线性#icon-jianpan-xianxing
-
233键盘#icon-jianpan
-
239扫描#icon-saomiao
-
301加-方框#icon-jia-fangkuang
-
301加-线性方框#icon-jia-xianxingfangkuang
-
301加-线性圆框#icon-jia-xianxingyuankuang
-
301加-圆框#icon-jia-yuankuang
-
318表头-可排序#icon-biaotou-kepaixu
-
323向左交换#icon-xiangzuojiaohuan
-
322相互交换#icon-xianghujiaohuan
-
324向右交换#icon-xiangyoujiaohuan
-
331刷新#icon-shuaxin1
-
404定位#icon-dingwei
-
409折线图-线性#icon-zhexiantu-xianxing
-
重命名#icon-zhongmingming1
-
重命名#icon-zhongmingming2
-
路径#icon-lujing
-
复制#icon-fuzhi2
-
导入#icon-daoru4
-
符号-数据矩阵#icon-shujujuzhen
-
ui-dna#icon-ui-dna
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>