• 211铃铛
    
  • red_login_key_icon
    
  • mac 默认
    
  • linux 默认
    
  • win系统默认
    
  • ios默认
    
  • 安卓默认
    
  • 喇叭
    
  • 地址框下拉
    
  • 设置
    
  • 设置页 交换机
    
  • 断开连接
    
  • 连接菜单
    
  • 搜索
    
  • 历史消息
    
  • 关于
    
  • 正确
    
  • 返回
    
  • 编辑
    
  • windows 下载
    
  • 中标麒麟logo
    
  • Ubuntu
    
  • mac下载
    
  • 标签翻页 上
    
  • 标签翻页 下
    
  • 连接页面进入
    
  • 关闭
    
  • 个人
    
  • ec mac 消息提示图标
    
  • ec. mac 系统图标
    
  • 退出
    
  • 最小化
    
  • 标签 选择符
    
  • 注销
    
  • 最大化
    
  • 切换地址
    
  • 搜索栏 删除图标
    
  • 个人设置页面用户图标
    
  • 软键盘
    
  • 用户菜单 朝上箭头
    
  • 个人目录
    
  • 公共目录
    
  • 证书登录
    
  • 打印任务
    
  • 负载均衡
    
  • process
    
  • 设置界面 侧边箭头
    
  • 窗口化
    
  • 语言切换箭头下
    
  • 语言切换箭头上
    
  • 单选框选择
    
  • 单选框默认
    
  • 个人用户
    
  • 显示资源
    
  • 关闭 粗
    
  • 退出修改
    
  • 窗口化 粗
    
  • 个人目录
    
  • 最小化 细
    
  • 提示图标
    
  • 下拉三角大
    
  • 下拉三角小
    
  • 最小化 粗
    
  • 最大化 粗
    
  • 成功
    
  • 刷新
    
  • toast 失败
    
  • toast成功
    
  • 手机
    
  • pin码
    
  • 账户
    
  • 描述
    
  • 微信
    
  • 地址框下拉
    
  • 单选框HOVER
    
  • 报销
    
  • 安全服务
    
  • 加班
    
  • 流程管理
    
  • 进度管理
    
  • 课程管理
    
  • 联系人
    
  • 浏览器
    
  • 金融
    
  • 请假申请
    
  • 入职手册
    
  • 通用资源
    
  • 文件夹
    
  • 会议室
    
  • 信息
    
  • 数据库
    
  • 文件共享
    
  • 项目
    
  • 设置
    
  • 政府
    
  • 邮件
    
  • 行政职能
    
  • 资源库
    
  • hr系哦
    
  • 问题反馈
    
  • 趋势分析
    
  • oa
    
  • 资料库
    
  • 网络信息
    
  • 资产系统
    
  • common
    
  • scheme
    
  • project
    
  • process
    
  • oa
    
  • person
    
  • goverment
    
  • forum
    
  • browser
    
  • email
    
  • book
    
  • finance
    
  • achievement
    
  • 下拉箭头
    
  • 证书01
    
  • 证书02
    
  • 箭头翻转
    
  • 取消
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="iconfont">&#x33;</span>

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "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
  • 下拉箭头
    .icon-normal
  • 证书01
    .icon-zhengshu
  • 证书02
    .icon-zhengshu1
  • 箭头翻转
    .icon-jiantoufanzhuan
  • 取消
    .icon-quxiao

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "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
  • 下拉箭头
    #icon-normal
  • 证书01
    #icon-zhengshu
  • 证书02
    #icon-zhengshu1
  • 箭头翻转
    #icon-jiantoufanzhuan
  • 取消
    #icon-quxiao

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.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>