• 扫描-黑
    
  • 沟通-黑
    
  • 编辑-不可操作小
    
  • 查看-不可操作小
    
  • 金额报账-白
    
  • 转办-黑
    
  • 元素-黑
    
  • 发送-黑
    
  • 用户管理-黑
    
  • 邮件-黑
    
  • 认领最新-黑
    
  • 配置-不可操作
    
  • 对比-白
    
  • 对比-黑
    
  • 数据计算-黑
    
  • 数据计算-白
    
  • 数据-白
    
  • 数据-黑
    
  • 分类-黑
    
  • 分类-白
    
  • 查看-不可操作
    
  • 查看-白色
    
  • 查看-黑色
    
  • 表格-黑
    
  • 日历-白
    
  • 锚点展开-单色
    
  • 锚点收起-单色
    
  • 大号左移-不可操作
    
  • 冻结-白
    
  • 冻结-黑
    
  • 刷新-橙
    
  • 编辑-黑
    
  • 上移-不可操作
    
  • 下移-不可操作
    
  • 编辑-不可操作
    
  • 认领-不可操作
    
  • 删除-不可操作
    
  • 复制-不可操作
    
  • 提示-橙
    
  • 打印-黑色
    
  • 餐饮费
    
  • 白确认
    
  • 白色删除
    
  • 保存-黑
    
  • 白失效
    
  • 纯色开关
    
  • 纯色复制
    
  • 出租车票
    
  • 保存-白
    
  • 单右
    
  • 弹窗-关闭
    
  • 单选不选中
    
  • 报账-白
    
  • 放大镜
    
  • 返回-黑
    
  • 导入
    
  • 导出-黑色
    
  • 更多-票夹
    
  • 纯色删除
    
  • 返回-白
    
  • 复核-白
    
  • 单左
    
  • 列表
    
  • 复选框_默认必选
    
  • 复选框_未选中
    
  • 关联-白
    
  • 飞机票
    
  • 其他纸质票
    
  • 复选框_不可点击
    
  • 降序
    
  • 复核-黑
    
  • 复核启用对号查验-黑
    
  • 汽车客运票
    
  • 升序
    
  • 黑确认
    
  • 黑失效
    
  • 排序
    
  • 树展开
    
  • 白色导出
    
  • 清除
    
  • 清空
    
  • 认领-白
    
  • 提交上传-白
    
  • 认领-黑
    
  • 上传提交-黑色
    
  • 新增-黑色
    
  • 黑色导入
    
  • 日历
    
  • 提示-红
    
  • 双右
    
  • 火车票
    
  • 时间-黑
    
  • 新增-白
    
  • 树收起
    
  • 指派
    
  • 增值税普通发票
    
  • 住宿费
    
  • 双左
    
  • 展开
    
  • 下拉
    
  • 重置-黑
    
  • 文件-白色
    
  • 解释问号
    
  • 收起
    
  • 验证-黑
    
  • 验证-白
    
  • 中英
    

Unicode 引用


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

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1624261839283') format('woff2'),
       url('iconfont.woff?t=1624261839283') format('woff'),
       url('iconfont.ttf?t=1624261839283') format('truetype');
}

第二步:定义使用 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"。

  • 扫描-黑
    .iconsaomiao-hei
  • 沟通-黑
    .icongoutong-hei
  • 编辑-不可操作小
    .iconbianji-bukecaozuoxiao
  • 查看-不可操作小
    .iconchakan-bukecaozuoxiao
  • 金额报账-白
    .iconjinebaozhang-bai
  • 转办-黑
    .iconzhuanban-hei
  • 元素-黑
    .iconyuansu-hei
  • 发送-黑
    .iconfasong-hei
  • 用户管理-黑
    .iconyonghuguanli-hei
  • 邮件-黑
    .iconyoujian-hei
  • 认领最新-黑
    .iconrenlingzuixin-hei
  • 配置-不可操作
    .iconpeizhi-bukecaozuo
  • 对比-白
    .iconduibi-bai
  • 对比-黑
    .iconduibi-hei
  • 数据计算-黑
    .iconshujujisuan-hei
  • 数据计算-白
    .iconshujujisuan-bai
  • 数据-白
    .iconshuju-bai
  • 数据-黑
    .iconshuju-hei
  • 分类-黑
    .iconfenlei-hei
  • 分类-白
    .iconfenlei-bai
  • 查看-不可操作
    .iconchakan-bukecaozuo
  • 查看-白色
    .iconchakan-baise
  • 查看-黑色
    .iconchakan-heise
  • 表格-黑
    .iconbiaoge-hei
  • 日历-白
    .iconrili-bai
  • 锚点展开-单色
    .iconmaodianzhankai-danse
  • 锚点收起-单色
    .iconmaodianshouqi-danse
  • 大号左移-不可操作
    .icondahaozuoyi-bukecaozuo
  • 冻结-白
    .icondongjie-bai
  • 冻结-黑
    .icondongjie-hei
  • 刷新-橙
    .iconshuaxin-cheng
  • 编辑-黑
    .iconbianji-hei
  • 上移-不可操作
    .iconshangyi-bukecaozuo
  • 下移-不可操作
    .iconxiayi-bukecaozuo
  • 编辑-不可操作
    .iconbianji-bukecaozuo
  • 认领-不可操作
    .iconrenling-bukecaozuo
  • 删除-不可操作
    .iconshanchu-bukecaozuo
  • 复制-不可操作
    .iconfuzhi-bukecaozuo
  • 提示-橙
    .icontishi-cheng
  • 打印-黑色
    .icondayin-heise
  • 餐饮费
    .iconcanyinfei
  • 白确认
    .iconbaiqueren
  • 白色删除
    .iconbaiseshanchu
  • 保存-黑
    .iconbaocun-hei
  • 白失效
    .iconbaishixiao
  • 纯色开关
    .iconchunsekaiguan
  • 纯色复制
    .iconchunsefuzhi
  • 出租车票
    .iconchuzuchepiao
  • 保存-白
    .iconbaocun-bai
  • 单右
    .icondanyou
  • 弹窗-关闭
    .icondanchuang-guanbi
  • 单选不选中
    .icondanxuanbuxuanzhong
  • 报账-白
    .iconbaozhang-bai
  • 放大镜
    .iconfangdajing
  • 返回-黑
    .iconfanhui-hei
  • 导入
    .icondaoru
  • 导出-黑色
    .icondaochu-heise
  • 更多-票夹
    .icongengduo-piaojia
  • 纯色删除
    .iconchunseshanchu
  • 返回-白
    .iconfanhui-bai
  • 复核-白
    .iconfuhe-bai
  • 单左
    .icondanzuo
  • 列表
    .iconliebiao
  • 复选框_默认必选
    .iconfuxuankuang_morenbixuan
  • 复选框_未选中
    .iconfuxuankuang_weixuanzhong
  • 关联-白
    .iconguanlian-bai
  • 飞机票
    .iconfeijipiao
  • 其他纸质票
    .iconqitazhizhipiao
  • 复选框_不可点击
    .iconfuxuankuang_bukedianji
  • 降序
    .iconjiangxu
  • 复核-黑
    .iconfuhe-hei
  • 复核启用对号查验-黑
    .iconfuheqiyongduihaochayan-hei
  • 汽车客运票
    .iconqichekeyunpiao
  • 升序
    .iconshengxu
  • 黑确认
    .iconheiqueren
  • 黑失效
    .iconheishixiao
  • 排序
    .iconpaixu
  • 树展开
    .iconshuzhankai
  • 白色导出
    .iconbaisedaochu
  • 清除
    .iconqingchu
  • 清空
    .iconqingkong
  • 认领-白
    .iconrenling-bai
  • 提交上传-白
    .icontijiaoshangchuan-bai
  • 认领-黑
    .iconrenling-hei
  • 上传提交-黑色
    .iconshangchuantijiao-heise
  • 新增-黑色
    .iconxinzeng-heise
  • 黑色导入
    .iconheisedaoru
  • 日历
    .iconrili
  • 提示-红
    .icontishi-hong
  • 双右
    .iconshuangyou
  • 火车票
    .iconhuochepiao
  • 时间-黑
    .iconshijian-hei
  • 新增-白
    .iconxinzeng-bai
  • 树收起
    .iconshushouqi
  • 指派
    .iconzhipai
  • 增值税普通发票
    .iconzengzhishuiputongfapiao
  • 住宿费
    .iconzhusufei
  • 双左
    .iconshuangzuo
  • 展开
    .iconzhankai
  • 下拉
    .iconxiala
  • 重置-黑
    .iconzhongzhi-hei
  • 文件-白色
    .iconwenjian-baise
  • 解释问号
    .iconjieshiwenhao
  • 收起
    .iconshouqi
  • 验证-黑
    .iconyanzheng-hei
  • 验证-白
    .iconyanzheng-bai
  • 中英
    .iconzhongying

font-class 引用


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

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

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

<span class="iconfont iconxxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 扫描-黑
    #iconsaomiao-hei
  • 沟通-黑
    #icongoutong-hei
  • 编辑-不可操作小
    #iconbianji-bukecaozuoxiao
  • 查看-不可操作小
    #iconchakan-bukecaozuoxiao
  • 金额报账-白
    #iconjinebaozhang-bai
  • 转办-黑
    #iconzhuanban-hei
  • 元素-黑
    #iconyuansu-hei
  • 发送-黑
    #iconfasong-hei
  • 用户管理-黑
    #iconyonghuguanli-hei
  • 邮件-黑
    #iconyoujian-hei
  • 认领最新-黑
    #iconrenlingzuixin-hei
  • 配置-不可操作
    #iconpeizhi-bukecaozuo
  • 对比-白
    #iconduibi-bai
  • 对比-黑
    #iconduibi-hei
  • 数据计算-黑
    #iconshujujisuan-hei
  • 数据计算-白
    #iconshujujisuan-bai
  • 数据-白
    #iconshuju-bai
  • 数据-黑
    #iconshuju-hei
  • 分类-黑
    #iconfenlei-hei
  • 分类-白
    #iconfenlei-bai
  • 查看-不可操作
    #iconchakan-bukecaozuo
  • 查看-白色
    #iconchakan-baise
  • 查看-黑色
    #iconchakan-heise
  • 表格-黑
    #iconbiaoge-hei
  • 日历-白
    #iconrili-bai
  • 锚点展开-单色
    #iconmaodianzhankai-danse
  • 锚点收起-单色
    #iconmaodianshouqi-danse
  • 大号左移-不可操作
    #icondahaozuoyi-bukecaozuo
  • 冻结-白
    #icondongjie-bai
  • 冻结-黑
    #icondongjie-hei
  • 刷新-橙
    #iconshuaxin-cheng
  • 编辑-黑
    #iconbianji-hei
  • 上移-不可操作
    #iconshangyi-bukecaozuo
  • 下移-不可操作
    #iconxiayi-bukecaozuo
  • 编辑-不可操作
    #iconbianji-bukecaozuo
  • 认领-不可操作
    #iconrenling-bukecaozuo
  • 删除-不可操作
    #iconshanchu-bukecaozuo
  • 复制-不可操作
    #iconfuzhi-bukecaozuo
  • 提示-橙
    #icontishi-cheng
  • 打印-黑色
    #icondayin-heise
  • 餐饮费
    #iconcanyinfei
  • 白确认
    #iconbaiqueren
  • 白色删除
    #iconbaiseshanchu
  • 保存-黑
    #iconbaocun-hei
  • 白失效
    #iconbaishixiao
  • 纯色开关
    #iconchunsekaiguan
  • 纯色复制
    #iconchunsefuzhi
  • 出租车票
    #iconchuzuchepiao
  • 保存-白
    #iconbaocun-bai
  • 单右
    #icondanyou
  • 弹窗-关闭
    #icondanchuang-guanbi
  • 单选不选中
    #icondanxuanbuxuanzhong
  • 报账-白
    #iconbaozhang-bai
  • 放大镜
    #iconfangdajing
  • 返回-黑
    #iconfanhui-hei
  • 导入
    #icondaoru
  • 导出-黑色
    #icondaochu-heise
  • 更多-票夹
    #icongengduo-piaojia
  • 纯色删除
    #iconchunseshanchu
  • 返回-白
    #iconfanhui-bai
  • 复核-白
    #iconfuhe-bai
  • 单左
    #icondanzuo
  • 列表
    #iconliebiao
  • 复选框_默认必选
    #iconfuxuankuang_morenbixuan
  • 复选框_未选中
    #iconfuxuankuang_weixuanzhong
  • 关联-白
    #iconguanlian-bai
  • 飞机票
    #iconfeijipiao
  • 其他纸质票
    #iconqitazhizhipiao
  • 复选框_不可点击
    #iconfuxuankuang_bukedianji
  • 降序
    #iconjiangxu
  • 复核-黑
    #iconfuhe-hei
  • 复核启用对号查验-黑
    #iconfuheqiyongduihaochayan-hei
  • 汽车客运票
    #iconqichekeyunpiao
  • 升序
    #iconshengxu
  • 黑确认
    #iconheiqueren
  • 黑失效
    #iconheishixiao
  • 排序
    #iconpaixu
  • 树展开
    #iconshuzhankai
  • 白色导出
    #iconbaisedaochu
  • 清除
    #iconqingchu
  • 清空
    #iconqingkong
  • 认领-白
    #iconrenling-bai
  • 提交上传-白
    #icontijiaoshangchuan-bai
  • 认领-黑
    #iconrenling-hei
  • 上传提交-黑色
    #iconshangchuantijiao-heise
  • 新增-黑色
    #iconxinzeng-heise
  • 黑色导入
    #iconheisedaoru
  • 日历
    #iconrili
  • 提示-红
    #icontishi-hong
  • 双右
    #iconshuangyou
  • 火车票
    #iconhuochepiao
  • 时间-黑
    #iconshijian-hei
  • 新增-白
    #iconxinzeng-bai
  • 树收起
    #iconshushouqi
  • 指派
    #iconzhipai
  • 增值税普通发票
    #iconzengzhishuiputongfapiao
  • 住宿费
    #iconzhusufei
  • 双左
    #iconshuangzuo
  • 展开
    #iconzhankai
  • 下拉
    #iconxiala
  • 重置-黑
    #iconzhongzhi-hei
  • 文件-白色
    #iconwenjian-baise
  • 解释问号
    #iconjieshiwenhao
  • 收起
    #iconshouqi
  • 验证-黑
    #iconyanzheng-hei
  • 验证-白
    #iconyanzheng-bai
  • 中英
    #iconzhongying

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>