• icon-帮助
    
  • icon-提示
    
  • icon-成功
    
  • icon-关闭
    
  • icon-成功2
    
  • icon-关闭2
    
  • icon-保存
    
  • icon-下载
    
  • icon-上传
    
  • icon-日历
    
  • icon-下拉
    
  • icon-下拉2
    
  • icon-上一步
    
  • icon-下一步
    
  • icon-编辑
    
  • icon-详情
    
  • icon-更多
    
  • icon-编辑2
    
  • icon-删除
    
  • icon-新增
    
  • 加载
    
  • icon-伙伴
    
  • icon-网络
    
  • icon-房屋
    
  • icon-收起
    
  • icon-邮箱
    
  • icon-文件
    
  • icon-筛选
    
  • icon-链接
    
  • icon-图片
    
  • icon-收藏
    
  • icon-活动
    
  • icon-公告
    
  • icon-时间
    
  • icon-管理
    
  • icon-项目
    
  • icon-废止
    
  • icon-废除
    
  • icon-图表
    
  • icon-数据安全
    
  • icon-定位
    
  • icon-文件2
    
  • icon-设置
    
  • icon-手机
    
  • icon-应用
    
  • icon-银行卡
    
  • icon-钱包
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1660897347227') format('woff2'),
       url('iconfont.woff?t=1660897347227') format('woff'),
       url('iconfont.ttf?t=1660897347227') 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"。

  • icon-帮助
    .icon-icon-bangzhu
  • icon-提示
    .icon-icon-tishi
  • icon-成功
    .icon-icon-chenggong
  • icon-关闭
    .icon-icon-guanbi
  • icon-成功2
    .icon-icon-chenggong2
  • icon-关闭2
    .icon-icon-guanbi2
  • icon-保存
    .icon-icon-baocun
  • icon-下载
    .icon-icon-xiazai
  • icon-上传
    .icon-icon-shangchuan
  • icon-日历
    .icon-icon-rili
  • icon-下拉
    .icon-icon-xiala
  • icon-下拉2
    .icon-icon-xiala2
  • icon-上一步
    .icon-icon-shangyibu
  • icon-下一步
    .icon-icon-xiayibu
  • icon-编辑
    .icon-icon-bianji
  • icon-详情
    .icon-icon-xiangqing
  • icon-更多
    .icon-icon-gengduo
  • icon-编辑2
    .icon-icon-bianji2
  • icon-删除
    .icon-icon-shanchu
  • icon-新增
    .icon-icon-xinzeng
  • 加载
    .icon-icon-loading
  • icon-伙伴
    .icon-icon-huoban
  • icon-网络
    .icon-icon-wangluo
  • icon-房屋
    .icon-icon-fangwu
  • icon-收起
    .icon-icon-shouqi
  • icon-邮箱
    .icon-icon-youxiang
  • icon-文件
    .icon-icon-wenjian
  • icon-筛选
    .icon-icon-shaixuan
  • icon-链接
    .icon-icon-lianjie
  • icon-图片
    .icon-icon-tupian
  • icon-收藏
    .icon-icon-shoucang
  • icon-活动
    .icon-icon-huodong
  • icon-公告
    .icon-icon-gonggao
  • icon-时间
    .icon-icon-shijian
  • icon-管理
    .icon-icon-guanli
  • icon-项目
    .icon-icon-xiangmu
  • icon-废止
    .icon-icon-feizhi
  • icon-废除
    .icon-icon-feichu
  • icon-图表
    .icon-icon-tubiao
  • icon-数据安全
    .icon-icon-shujuanquan
  • icon-定位
    .icon-icon-dingwei
  • icon-文件2
    .icon-icon-wenjian2
  • icon-设置
    .icon-icon-shezhi
  • icon-手机
    .icon-icon-shouji
  • icon-应用
    .icon-icon-yingyong
  • icon-银行卡
    .icon-icon-yinhangka
  • icon-钱包
    .icon-icon-qianbao

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • icon-帮助
    #icon-icon-bangzhu
  • icon-提示
    #icon-icon-tishi
  • icon-成功
    #icon-icon-chenggong
  • icon-关闭
    #icon-icon-guanbi
  • icon-成功2
    #icon-icon-chenggong2
  • icon-关闭2
    #icon-icon-guanbi2
  • icon-保存
    #icon-icon-baocun
  • icon-下载
    #icon-icon-xiazai
  • icon-上传
    #icon-icon-shangchuan
  • icon-日历
    #icon-icon-rili
  • icon-下拉
    #icon-icon-xiala
  • icon-下拉2
    #icon-icon-xiala2
  • icon-上一步
    #icon-icon-shangyibu
  • icon-下一步
    #icon-icon-xiayibu
  • icon-编辑
    #icon-icon-bianji
  • icon-详情
    #icon-icon-xiangqing
  • icon-更多
    #icon-icon-gengduo
  • icon-编辑2
    #icon-icon-bianji2
  • icon-删除
    #icon-icon-shanchu
  • icon-新增
    #icon-icon-xinzeng
  • 加载
    #icon-icon-loading
  • icon-伙伴
    #icon-icon-huoban
  • icon-网络
    #icon-icon-wangluo
  • icon-房屋
    #icon-icon-fangwu
  • icon-收起
    #icon-icon-shouqi
  • icon-邮箱
    #icon-icon-youxiang
  • icon-文件
    #icon-icon-wenjian
  • icon-筛选
    #icon-icon-shaixuan
  • icon-链接
    #icon-icon-lianjie
  • icon-图片
    #icon-icon-tupian
  • icon-收藏
    #icon-icon-shoucang
  • icon-活动
    #icon-icon-huodong
  • icon-公告
    #icon-icon-gonggao
  • icon-时间
    #icon-icon-shijian
  • icon-管理
    #icon-icon-guanli
  • icon-项目
    #icon-icon-xiangmu
  • icon-废止
    #icon-icon-feizhi
  • icon-废除
    #icon-icon-feichu
  • icon-图表
    #icon-icon-tubiao
  • icon-数据安全
    #icon-icon-shujuanquan
  • icon-定位
    #icon-icon-dingwei
  • icon-文件2
    #icon-icon-wenjian2
  • icon-设置
    #icon-icon-shezhi
  • icon-手机
    #icon-icon-shouji
  • icon-应用
    #icon-icon-yingyong
  • icon-银行卡
    #icon-icon-yinhangka
  • icon-钱包
    #icon-icon-qianbao

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>