IconFont 图标
-
统计分析#icon-tongjifenxi
-
下载#icon-xiazai
-
报名#icon-baoming
-
邮箱#icon-tubiao209
-
电话#icon-dianhua
-
人群#icon-renqun
-
新建文档#icon-xinjianwendang
-
钱#icon-qian
-
笑脸 满意 服务#icon-xiaolianmanyifuwu
-
箭头 下降#icon-jiantouxiajiang
-
项目申报#icon-xiangmushenbao
-
人脉#icon-ai-connection
-
公告#icon-gonggao
-
箭头2-4#icon-jiantou24
-
箭头_上#icon-jiantoushang
-
锁#icon-suo
-
交易性能#icon-jiaoyixingneng
-
简介#icon-jianjie
-
安全#icon-iconfontanquan
-
数据#icon-iconfontpaixingbang
-
邮箱#icon-youxiang
-
注册#icon-zhuce
-
开标#icon-zhengzaizhaobiao
-
map#icon-map
-
流程#icon-liucheng
-
放大镜#icon-fangdajing
-
电话#icon-dianhua1
-
二维码#icon-erweima
-
特色专题#icon-tesezhuanti
-
合作#icon-hezuo-tianchong
-
快捷标签#icon-kuaijiebiaoqian
-
客服#icon-service
-
天平#icon-tianping
-
进行时钟#icon-underway
-
透明度调节#icon-toumingdutiaojie
-
研究创新能力#icon-yanjiuchuangxinnengli
-
数据安全#icon-shujuanquan
-
搜索#icon-suosou
-
报名成功#icon-baomingchenggong
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>