IconFont 图标
-
211铃铛#icon-lingdang
-
red_login_key_icon#icon-red_login_key_icon
-
mac 默认#icon-macmoren
-
linux 默认#icon-linuxmoren
-
win系统默认#icon-winxitongmoren
-
ios默认#icon-iosmoren
-
安卓默认#icon-anzhuomoren
-
喇叭#icon-laba
-
地址框下拉#icon-dizhikuangxiala
-
设置#icon-shezhi1
-
设置页 交换机#icon-shezhiyejiaohuanji
-
断开连接#icon-duankailianjie
-
连接菜单#icon-lianjiecaidan
-
搜索#icon-sousuo
-
历史消息#icon-lishixiaoxi
-
关于#icon-guanyu
-
正确#icon-zhengque
-
返回#icon-fanhui
-
编辑#icon-bianji
-
windows 下载#icon-windowsxiazai
-
中标麒麟logo#icon-zhongbiaoqilinlogo
-
Ubuntu#icon-Ubuntu
-
mac下载#icon-macxiazai
-
标签翻页 上#icon-biaoqianfanyeshang
-
标签翻页 下#icon-biaoqianfanyexia
-
连接页面进入#icon-lianjieyemianjinru
-
关闭#icon-guanbi
-
个人#icon-geren
-
ec mac 消息提示图标#icon-ecmacxiaoxitishitubiao
-
ec. mac 系统图标#icon-ecmacxitongtubiao
-
退出#icon-tuichu
-
最小化#icon-zuixiaohua
-
标签 选择符#icon-biaoqianxuanzefu
-
注销#icon-zhuxiao
-
最大化#icon-zuidahua
-
切换地址#icon-qiehuandizhi
-
搜索栏 删除图标#icon-sousuolanshanchutubiao
-
个人设置页面用户图标#icon-yonghu
-
软键盘#icon-ruanjianpan
-
用户菜单 朝上箭头#icon-yonghucaidanzhaoshangjiantou
-
个人目录#icon-gerenmulu
-
公共目录#icon-gonggongmulu
-
证书登录#icon-zhengshudenglu
-
打印任务#icon-dayinrenwu
-
负载均衡#icon-fuzaijunheng1
-
process#icon-process2
-
设置界面 侧边箭头#icon-shezhijiemiancebianjiantou
-
窗口化#icon-chuangkouhua
-
语言切换箭头下#icon-yuyanqiehuanjiantouxia
-
语言切换箭头上#icon-yuyanqiehuanjiantoushang
-
单选框选择#icon-danxuankuangxuanze
-
单选框默认#icon-danxuankuangmoren
-
个人用户#icon-gerenyonghu
-
显示资源#icon-xianshiziyuan
-
关闭 粗#icon-guanbicu
-
退出修改#icon-tuichuxiugai
-
窗口化 粗#icon-chuangkouhuacu
-
个人目录#icon-gerenmulu1
-
最小化 细#icon-zuixiaohuaxi
-
提示图标#icon-tishitubiao
-
下拉三角大#icon-xialasanjiaoda
-
下拉三角小#icon-xialasanjiaoxiao
-
最小化 粗#icon-zuixiaohuacu
-
最大化 粗#icon-zuidahuacu
-
成功#icon-chenggong
-
刷新#icon-shuaxin
-
toast 失败#icon-toastshibai
-
toast成功#icon-toastchenggong
-
手机#icon-shouji
-
pin码#icon-pinma
-
账户#icon-zhanghu
-
描述#icon-miaoshu
-
微信#icon-weixin
-
地址框下拉#icon-dizhikuangxiala-copy
-
单选框HOVER#icon-danxuankuangHOVER
-
报销#icon-baoxiao
-
安全服务#icon-anquanfuwu
-
加班#icon-jiaban
-
流程管理#icon-liuchengguanli
-
进度管理#icon-jinduguanli
-
课程管理#icon-kechengguanli
-
联系人#icon-lianxiren
-
浏览器#icon-liulanqi
-
金融#icon-jinrong
-
请假申请#icon-qingjiashenqing
-
入职手册#icon-ruzhishouce
-
通用资源#icon-tongyongziyuan
-
文件夹#icon-wenjianjia
-
会议室#icon-huiyishi
-
信息#icon-xinxi
-
数据库#icon-shujuku
-
文件共享#icon-wenjiangongxiang
-
项目#icon-xiangmu
-
设置#icon-shezhi
-
政府#icon-zhengfu
-
邮件#icon-youjian
-
行政职能#icon-hangzhengzhineng
-
资源库#icon-ziyuanku
-
hr系哦#icon-hrxio
-
问题反馈#icon-wentifankui
-
趋势分析#icon-qushifenxi
-
oa#icon-oa2
-
资料库#icon-ziliaoku
-
网络信息#icon-wangluoxinxi
-
资产系统#icon-zichanxitong
-
common#icon-common-copy
-
scheme#icon-scheme-copy
-
project#icon-project-copy
-
process#icon-process-copy
-
oa#icon-oa-copy
-
person#icon-person-copy
-
goverment#icon-goverment-copy
-
forum#icon-forum-copy
-
browser#icon-browser-copy
-
email#icon-email-copy
-
book#icon-book-copy
-
finance#icon-finance-copy
-
achievement#icon-achievement-copy
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>