IconFont 图标
-
金币-钱#icon-jinbiqian
-
分类#icon-fenlei
-
用户#icon-01
-
短信#icon-duanxinchongzhi1
-
正确#icon-zhengque
-
前进#icon-icon10
-
采购#icon-iconfontgouwuche
-
下#icon-you
-
认证#icon-msnui-v
-
收藏#icon-shoucang
-
分类#icon-fenlei1
-
日期#icon-22
-
建筑模型#icon-i
-
cube#icon-cube
-
总金额#icon-zongjine21
-
企业#icon-company
-
阅读#icon-yuedu
-
星#icon-xing
-
施工栏#icon-construction
-
书写#icon-shuxie
-
型钢#icon-buxiugang
-
评价#icon-iconzhuanqu03
-
建筑建材#icon-jianzhujiancai
-
位置#icon-weizhi
-
同城商家#icon-tongchengshangjia
-
报表#icon-baobiao
-
上#icon-shang
-
系统参数管理#icon-xitongcanshuguanli
-
综合#icon-iconfonticonfonticonfont25
-
星#icon-star-small
-
刷玻璃#icon-shuaboli
-
全渠道#icon-quanqudao
-
防水#icon-fangshui
-
趋势图#icon-qushitu
-
钢铁行业#icon-gangtiexingye
-
搜索#icon-sousuo
-
流程管理#icon-weibiaoti45
-
本书#icon-benshubooks13
-
材料报表#icon-cailiaobaobiao
-
日历#icon-rili
-
油漆#icon-youqi
-
客服#icon-2
-
密码#icon-mima
-
插座#icon-chazuo
-
价格#icon-jiage
-
竖条#icon-shutiao
-
在线咨询#icon-zaixianzixun
-
短信#icon-duanxin
-
菜单#icon-iconfont-edu12
-
首页-首页#icon-shouye
-
实名认证#icon-shenfenrenzheng
-
采购结算#icon-zhaobiaocaigou
-
数据库#icon-suyaniconchanpinleibufenzuodaohangbufen84
-
切换#icon-qiehuan
-
menu#icon-menu
-
营改增信息#icon-yinggaizengxinxi
-
询价#icon-xunjia2
-
资质认证#icon-zizhirenzheng
-
工程造价#icon-gongchengzaojia
-
删除#icon-shanchu
-
下载#icon-xiazai
-
无限#icon-wuxian
-
企业荣誉#icon-qiyerongyu
-
流程管理#icon-liuchengguanli
-
年#icon-nian
-
数据市场#icon-shujushichang
-
管材管件#icon-tubiao242
-
建筑电气工程#icon-jianzhudianqigongcheng
-
水暖气工程#icon-shuinuanqigongcheng
-
右#icon-you-copy-copy
-
采购#icon-caigou
-
涂料#icon-tuliao
-
电脑#icon-diannao
-
数据库#icon-sql
-
建材#icon-jiancai1
-
推荐#icon-tuijian
-
询价#icon-xunjia
-
标准#icon-biaozhun
-
在线答疑#icon-zaixiandayi
-
询价#icon-xunjia1
-
服务#icon-fuwu
-
报表#icon-baobiao1
-
查找#icon-work-search
-
企业#icon-qiye
-
公考培训#icon-gongkaopeixun
-
询价#icon-icon_xunjia
-
历史#icon-lishirenwu
-
项目#icon-xiangmu
-
尺子#icon-chizi
-
采购记录#icon-caigoujilu
-
水管#icon-shuiguan
-
询价#icon-xunjia3
-
建筑、工程#icon-gongchengjianzhu
-
材料、工具和零件#icon-cailiaogongjuhelingjian
-
cube#icon-cube1
-
日期#icon-riqi
-
头条#icon-toutiao
-
竖#icon-shugang
-
天智-人工智能#icon-tianzhi-rengongzhineng
-
短信#icon-duanxin1
-
数据库#icon-shujuku
-
小推车#icon-xiaotuiche
-
景观园林#icon-i11
-
数据库#icon-shujuku1
-
手机登录#icon-shoujidenglu
-
订单采购#icon-dingdancaigou
-
菜单#icon-icon-test
-
服务#icon-fuwu1
-
消防#icon-xiaofang
-
设置#icon-shezhi
-
头像#icon-touxiang
-
报价开单#icon-baojiakaidan
-
电力电缆#icon-1
-
月#icon-yue
-
类目-灯具照明#icon-leimu-dengjuzhaoming
-
价格#icon-icon_jiage_normal
-
消防#icon-xiaofang1
-
报价交易#icon-baojiajiaoyi
-
装修#icon-zhuangxiu
-
阅读#icon-yuedu1
-
金币#icon-jinbi
-
价格#icon-ziyuan
-
定制#icon-dingzhi
-
回复#icon-huifu
-
趋势图#icon-qushitu1
-
报价工具#icon-noun__cc-copy
-
答疑#icon-dayi
-
答疑#icon-dayi1
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>