• 待回复
    
  • 公示中
    
  • 已回复
    
  • 已申请
    
  • 已审核
    
  • external_collect
    
  • export_data
    
  • checked_toast
    
  • pares_data
    
  • more
    
  • press_disaled_2
    
  • 项目创建
    
  • checked_stagnate
    
  • 处理中
    
  • 不通过
    
  • 待回复_2
    
  • 审核中
    
  • 回退
    
  • 未读
    
  • 已读
    
  • 未发布
    
  • 申请成功
    
  • 已回复_1
    
  • 已办结
    
  • 申请中
    
  • 验证失败
    
  • 待审核
    
  • div-1
    
  • JAVA
    
  • mp3-1
    
  • jpg-1
    
  • 消息
    
  • 直播
    
  • 转发
    
  • 修改
    
  • 修改
    
  • 门店设置
    
  • 新建
    
  • 收取电文
    
  • 纸质验真
    
  • 电子验证
    
  • 归档
    
  • 创建目录
    
  • 打印
    
  • 公证文书
    
  • 转发
    
  • 下载
    
  • 签署
    
  • 拒绝
    
  • 律师
    
  • 文件删除
    
  • 检测报告
    
  • 工资填报表配置
    
  • 数据报表
    
  • 营收报表
    
  • 移交@2x
    
  • 导出
    
  • 导入
    
  • 导入
    
  • 导出
    
  • 挂接
    
  • 高级搜索
    
  • 去重
    
  • 流水号
    
  • 插入
    
  • 销毁
    
  • 按输入顺序排序
    
  • 侧边栏-顺序切换1
    
  • 原文挂接3_画板 1
    
  • 下拉
    
  • 下拉
    
  • 等待
    
  • 警告
    
  • 提示
    
  • 错误
    
  • 帮助
    
  • 不通过
    
  • 不通过
    
  • 识别
    
  • 公文
    
  • 橡皮擦
    
  • 
  • 毛笔
    
  • 填充
    
  • WORD
    
  • PPT
    
  • excel
    
  • PDF
    
  • html
    
  • xml
    
  • wps
    
  • TXT
    
  • gif
    
  • zip
    
  • 文件夹
    
  • ofd
    
  • swf
    
  • cad
    
  • MP4
    
  • 音频
    
  • 空文件夹
    
  • 未知文件
    
  • 未知文件
    
  • SVG图标
    
  • Jpg
    
  • Tiff
    
  • Adobe psd
    
  • raw
    
  • BMP
    
  • EPS
    
  • ai
    
  • ico
    
  • JPEG
    
  • PNG
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • 待回复
    .yds-daihuifu1
  • 公示中
    .yds-gongshizhong
  • 已回复
    .yds-yihuifu1
  • 已申请
    .yds-yishenqing
  • 已审核
    .yds-yishenhe
  • external_collect
    .yds-menu
  • export_data
    .yds-export
  • checked_toast
    .yds-zhengque
  • pares_data
    .yds-chaxun
  • more
    .yds-menu1
  • press_disaled_2
    .yds-zhengque1
  • 项目创建
    .yds-xinzengwenjianjia
  • checked_stagnate
    .yds-zanting
  • 处理中
    .yds-chulizhong
  • 不通过
    .yds-butongguo
  • 待回复_2
    .yds-daihuifu
  • 审核中
    .yds-shenhezhong
  • 回退
    .yds-huitui
  • 未读
    .yds-weidu
  • 已读
    .yds-yidu
  • 未发布
    .yds-weifabu
  • 申请成功
    .yds-shenqingchenggong
  • 已回复_1
    .yds-yihuifu
  • 已办结
    .yds-yibanjie
  • 申请中
    .yds-shenqingzhong
  • 验证失败
    .yds-yanzhengshibai
  • 待审核
    .yds-daishenhe
  • div-1
    .yds-code
  • JAVA
    .yds-java
  • mp3-1
    .yds-mp3
  • jpg-1
    .yds-jpg1
  • 消息
    .yds-xiaoxi
  • 直播
    .yds-zhibo
  • 转发
    .yds-zhuanfa1
  • 修改
    .yds-xiugai2
  • 修改
    .yds-xiugai3
  • 门店设置
    .yds-shezhi
  • 新建
    .yds-xinjian
  • 收取电文
    .yds-shouqudianwen
  • 纸质验真
    .yds-zhizhiyanzhen
  • 电子验证
    .yds-dianziyanzheng
  • 归档
    .yds-guidang
  • 创建目录
    .yds-chuangjianmulu
  • 打印
    .yds-dayin1
  • 公证文书
    .yds-gongzhengwenshu
  • 转发
    .yds-zhuanfa
  • 下载
    .yds-xiazai
  • 签署
    .yds-qianshu
  • 拒绝
    .yds-jujue
  • 律师
    .yds-lvshi
  • 文件删除
    .yds-wenjianshanchu
  • 检测报告
    .yds-jiancebaogao
  • 工资填报表配置
    .yds-baobiaopeizhi
  • 数据报表
    .yds-shujubaobiao
  • 营收报表
    .yds-baobiao
  • 移交@2x
    .yds-yijiao
  • 导出
    .yds-daochu
  • 导入
    .yds-daoru
  • 导入
    .yds-daoru1
  • 导出
    .yds-daochu1
  • 挂接
    .yds-guajie
  • 高级搜索
    .yds-gaojisousuo
  • 去重
    .yds-quzhong
  • 流水号
    .yds-liushuihao
  • 插入
    .yds-icon-charu
  • 销毁
    .yds-xiaohui
  • 按输入顺序排序
    .yds-paixu
  • 侧边栏-顺序切换1
    .yds-paixu1
  • 原文挂接3_画板 1
    .yds-guajie1
  • 下拉
    .yds-shangla
  • 下拉
    .yds-xiala
  • 等待
    .yds-dengdai
  • 警告
    .yds-jinggao
  • 提示
    .yds-tishi
  • 错误
    .yds-cuowu
  • 帮助
    .yds-bangzhu
  • 不通过
    .yds-butongguo1
  • 不通过
    .yds-zanting1
  • 识别
    .yds-shibie
  • 公文
    .yds-gongwen
  • 橡皮擦
    .yds-xiangpica
  • .yds-bi
  • 毛笔
    .yds-maobing
  • 填充
    .yds-tianchong
  • WORD
    .yds-doc
  • PPT
    .yds-ppt
  • excel
    .yds-excel
  • PDF
    .yds-pdf
  • html
    .yds-html
  • xml
    .yds-xml
  • wps
    .yds-wps
  • TXT
    .yds-txt
  • gif
    .yds-gif
  • zip
    .yds-zip
  • 文件夹
    .yds-wenjianjia
  • ofd
    .yds-ofd
  • swf
    .yds-swf
  • cad
    .yds-cad
  • MP4
    .yds-video
  • 音频
    .yds-yinpin
  • 空文件夹
    .yds-kongwenjianjia
  • 未知文件
    .yds-weizhiwenjian1
  • 未知文件
    .yds-weizhiwenjian
  • SVG图标
    .yds-svg
  • Jpg
    .yds-jpg
  • Tiff
    .yds-tiff
  • Adobe psd
    .yds-psd
  • raw
    .yds-raw
  • BMP
    .yds-bmp
  • EPS
    .yds-eps
  • ai
    .yds-ai
  • ico
    .yds-ico
  • JPEG
    .yds-jpeg
  • PNG
    .yds-png

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="ydsiconfont yds-xxx"></span>

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

  • 待回复
    #yds-daihuifu1
  • 公示中
    #yds-gongshizhong
  • 已回复
    #yds-yihuifu1
  • 已申请
    #yds-yishenqing
  • 已审核
    #yds-yishenhe
  • external_collect
    #yds-menu
  • export_data
    #yds-export
  • checked_toast
    #yds-zhengque
  • pares_data
    #yds-chaxun
  • more
    #yds-menu1
  • press_disaled_2
    #yds-zhengque1
  • 项目创建
    #yds-xinzengwenjianjia
  • checked_stagnate
    #yds-zanting
  • 处理中
    #yds-chulizhong
  • 不通过
    #yds-butongguo
  • 待回复_2
    #yds-daihuifu
  • 审核中
    #yds-shenhezhong
  • 回退
    #yds-huitui
  • 未读
    #yds-weidu
  • 已读
    #yds-yidu
  • 未发布
    #yds-weifabu
  • 申请成功
    #yds-shenqingchenggong
  • 已回复_1
    #yds-yihuifu
  • 已办结
    #yds-yibanjie
  • 申请中
    #yds-shenqingzhong
  • 验证失败
    #yds-yanzhengshibai
  • 待审核
    #yds-daishenhe
  • div-1
    #yds-code
  • JAVA
    #yds-java
  • mp3-1
    #yds-mp3
  • jpg-1
    #yds-jpg1
  • 消息
    #yds-xiaoxi
  • 直播
    #yds-zhibo
  • 转发
    #yds-zhuanfa1
  • 修改
    #yds-xiugai2
  • 修改
    #yds-xiugai3
  • 门店设置
    #yds-shezhi
  • 新建
    #yds-xinjian
  • 收取电文
    #yds-shouqudianwen
  • 纸质验真
    #yds-zhizhiyanzhen
  • 电子验证
    #yds-dianziyanzheng
  • 归档
    #yds-guidang
  • 创建目录
    #yds-chuangjianmulu
  • 打印
    #yds-dayin1
  • 公证文书
    #yds-gongzhengwenshu
  • 转发
    #yds-zhuanfa
  • 下载
    #yds-xiazai
  • 签署
    #yds-qianshu
  • 拒绝
    #yds-jujue
  • 律师
    #yds-lvshi
  • 文件删除
    #yds-wenjianshanchu
  • 检测报告
    #yds-jiancebaogao
  • 工资填报表配置
    #yds-baobiaopeizhi
  • 数据报表
    #yds-shujubaobiao
  • 营收报表
    #yds-baobiao
  • 移交@2x
    #yds-yijiao
  • 导出
    #yds-daochu
  • 导入
    #yds-daoru
  • 导入
    #yds-daoru1
  • 导出
    #yds-daochu1
  • 挂接
    #yds-guajie
  • 高级搜索
    #yds-gaojisousuo
  • 去重
    #yds-quzhong
  • 流水号
    #yds-liushuihao
  • 插入
    #yds-icon-charu
  • 销毁
    #yds-xiaohui
  • 按输入顺序排序
    #yds-paixu
  • 侧边栏-顺序切换1
    #yds-paixu1
  • 原文挂接3_画板 1
    #yds-guajie1
  • 下拉
    #yds-shangla
  • 下拉
    #yds-xiala
  • 等待
    #yds-dengdai
  • 警告
    #yds-jinggao
  • 提示
    #yds-tishi
  • 错误
    #yds-cuowu
  • 帮助
    #yds-bangzhu
  • 不通过
    #yds-butongguo1
  • 不通过
    #yds-zanting1
  • 识别
    #yds-shibie
  • 公文
    #yds-gongwen
  • 橡皮擦
    #yds-xiangpica
  • #yds-bi
  • 毛笔
    #yds-maobing
  • 填充
    #yds-tianchong
  • WORD
    #yds-doc
  • PPT
    #yds-ppt
  • excel
    #yds-excel
  • PDF
    #yds-pdf
  • html
    #yds-html
  • xml
    #yds-xml
  • wps
    #yds-wps
  • TXT
    #yds-txt
  • gif
    #yds-gif
  • zip
    #yds-zip
  • 文件夹
    #yds-wenjianjia
  • ofd
    #yds-ofd
  • swf
    #yds-swf
  • cad
    #yds-cad
  • MP4
    #yds-video
  • 音频
    #yds-yinpin
  • 空文件夹
    #yds-kongwenjianjia
  • 未知文件
    #yds-weizhiwenjian1
  • 未知文件
    #yds-weizhiwenjian
  • SVG图标
    #yds-svg
  • Jpg
    #yds-jpg
  • Tiff
    #yds-tiff
  • Adobe psd
    #yds-psd
  • raw
    #yds-raw
  • BMP
    #yds-bmp
  • EPS
    #yds-eps
  • ai
    #yds-ai
  • ico
    #yds-ico
  • JPEG
    #yds-jpeg
  • PNG
    #yds-png

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>