• 点赞
    
  • 
  • timeout
    
  • 完成
    
  • 用户
    
  • 28体积、空间
    
  • 204首页
    
  • 224用户
    
  • all
    
  • 播放页点赞
    
  • 播放
    
  • 闹钟
    
  • gengduo
    
  • alipay
    
  • 朋友圈icon
    
  • 引导箭头
    
  • 空状态
    
  • 正在直播
    
  • 账户_奖金
    
  • 招聘
    
  • 企业
    
  • 25-竞赛
    
  • 购物车-线性
    
  • 我的-纯色
    
  • 我的-线性
    
  • 学习-线性
    
  • 学习-纯色
    
  • 分类-纯色
    
  • 分类-线性
    
  • 首页-线性
    
  • 首页
    
  • 密码
    
  • 手机
    
  • 短信
    
  • 眼睛
    
  • 眼睛
    
  • 
    点赞
    
  • 点赞_块
    
  • 花呗
    
  • 微信支付
    
  • 薯条
    
  • 冰箱
    
  • 耳机
    
  • 热门
    
  • 优惠券
    
  • 
  • 拉面
    
  • 蜂蜜
    
  • 闹钟
    
  • 搜索
    
  • 消息
    
  • 错误
    
  • 收藏
    
  • 删除
    
  • 添加
    
  • 设置
    
  • 提醒
    
  • 向右
    
  • 个人中心
    
  • 向下
    
  • 
  • 
  • 
  • 后退
    
  • 功能
    
  • 向上
    
  • 列表
    
  • 扫描
    
  • 个人中心
    
  • 时间
    
  • 问题
    
  • 暂停
    
  • 清单
    
  • 交换
    
  • 输入
    
  • 日期
    
  • 收藏
    
  • 下载
    
  • 输出
    
  • 上传
    
  • 刷新
    
  • 客服
    
  • 记事本
    
  • 下一页
    
  • 返回
    
  • 无线
    
  • 放大
    
  • 音量
    
  • 扩大
    
  • 静音
    
  • 
  • 往左
    
  • 收缩
    
  • 循环
    
  • 
  • 标签
    
  • 商铺
    
  • 红包
    
  • 位置
    
  • 休息
    
  • 礼物
    
  • 二维码
    
  • 笑脸
    
  • 垃圾桶
    
  • 文档
    
  • 安全
    
  • 文件搜索
    
  • 表情
    
  • 列表
    
  • 文档设置
    
  • 添加
    
  • 减少
    
  • 禁用
    
  • 上一页
    
  • 向下
    
  • 下一页
    
  • 向上
    
  • 暂停
    
  • 正确
    
  • 
  • 退出
    
  • 错误
    
  • 向右
    
  • 向下
    
  • 向上
    
  • 删除
    
  • 向左
    
  • 正确
    
  • 添加
    
  • 删除
    
  • 提示
    
  • 暂停
    
  • 右箭头
    
  • 左箭头
    
  • 表情
    
  • 表情
    
  • 收藏
    
  • 收藏
    
  • 下一个
    
  • 上一个
    
  • 消息
    
  • 无线wifi
    
  • 静音
    
  • 音量
    
  • 二维码
    

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"。

  • 点赞
    .icondianzan1
  • .iconRectangleCopy1
  • timeout
    .icontimeout
  • 完成
    .iconRectangleCopy
  • 用户
    .iconRectangleCopy4
  • 28体积、空间
    .icontijikongjian
  • 204首页
    .iconshouye
  • 224用户
    .iconyonghu
  • all
    .iconall
  • 播放页点赞
    .iconbofangyedianzan
  • 播放
    .iconbofang
  • 闹钟
    .icon04
  • gengduo
    .icongengduo
  • alipay
    .iconalipay
  • 朋友圈icon
    .iconpengyouquaniconx
  • 引导箭头
    .iconyindao
  • 空状态
    .iconss_empty
  • 正在直播
    .iconcelluar
  • 账户_奖金
    .iconzhanghu_jiangjin
  • 招聘
    .iconzhaopin
  • 企业
    .iconqiye1
  • 25-竞赛
    .icon-jingsai
  • 购物车-线性
    .icongouwuche-xianxing
  • 我的-纯色
    .iconwode-chunse
  • 我的-线性
    .iconwode-xianxing
  • 学习-线性
    .iconxuexi-xianxing
  • 学习-纯色
    .iconxuexi-chunse
  • 分类-纯色
    .iconfenlei-chunse
  • 分类-线性
    .iconfenlei-xianxing
  • 首页-线性
    .iconshouye-xianxing
  • 首页
    .iconshouye1
  • 密码
    .iconmima
  • 手机
    .iconshouji
  • 短信
    .iconduanxin
  • 眼睛
    .iconyanjing
  • 眼睛
    .iconpwd-hidden
  • 点赞
    .icondianzan
  • 点赞_块
    .icondianzan_kuai
  • 花呗
    .iconhuabei
  • 微信支付
    .iconweixinzhifu
  • 薯条
    .iconfrench_fries
  • 冰箱
    .iconfridge
  • 耳机
    .iconerji
  • 热门
    .iconremen
  • 优惠券
    .iconyouhuiquan
  • .icontea
  • 拉面
    .iconramen
  • 蜂蜜
    .iconhoney
  • 闹钟
    .iconzhong
  • 搜索
    .iconiconfront-
  • 消息
    .iconiconfront-1
  • 错误
    .iconiconfront-2
  • 收藏
    .iconiconfront-4
  • 删除
    .iconiconfront-5
  • 添加
    .iconiconfront-6
  • 设置
    .iconiconfront-7
  • 提醒
    .iconiconfront-8
  • 向右
    .iconiconfront-9
  • 个人中心
    .iconiconfront-10
  • 向下
    .iconiconfront-11
  • .iconiconfront-12
  • .iconiconfront-13
  • .iconiconfront-14
  • 后退
    .iconiconfront-15
  • 功能
    .iconiconfront-16
  • 向上
    .iconiconfront-17
  • 列表
    .iconiconfront-18
  • 扫描
    .iconiconfront-19
  • 个人中心
    .iconiconfront-20
  • 时间
    .iconiconfront-21
  • 问题
    .iconiconfront-22
  • 暂停
    .iconiconfront-23
  • 清单
    .iconiconfront-24
  • 交换
    .iconiconfront-25
  • 输入
    .iconiconfront-26
  • 日期
    .iconiconfront-27
  • 收藏
    .iconiconfront-28
  • 下载
    .iconiconfront-29
  • 输出
    .iconiconfront-30
  • 上传
    .iconiconfront-31
  • 刷新
    .iconiconfront-32
  • 客服
    .iconiconfront-33
  • 记事本
    .iconiconfront-34
  • 下一页
    .iconiconfront-35
  • 返回
    .iconiconfront-36
  • 无线
    .iconiconfront-37
  • 放大
    .iconiconfront-38
  • 音量
    .iconiconfront-39
  • 扩大
    .iconiconfront-40
  • 静音
    .iconiconfront-41
  • .iconiconfront-42
  • 往左
    .iconiconfront-43
  • 收缩
    .iconiconfront-44
  • 循环
    .iconiconfront-45
  • .iconiconfront-46
  • 标签
    .iconiconfront-47
  • 商铺
    .iconiconfront-48
  • 红包
    .iconiconfront-49
  • 位置
    .iconiconfront-50
  • 休息
    .iconiconfront-51
  • 礼物
    .iconiconfront-52
  • 二维码
    .iconiconfront-53
  • 笑脸
    .iconiconfront-54
  • 垃圾桶
    .iconiconfront-56
  • 文档
    .iconiconfront-57
  • 安全
    .iconiconfront-58
  • 文件搜索
    .iconiconfront-59
  • 表情
    .iconiconfront-60
  • 列表
    .iconiconfront-63
  • 文档设置
    .iconiconfront-64
  • 添加
    .iconiconfront-65
  • 减少
    .iconiconfront-66
  • 禁用
    .iconiconfront-67
  • 上一页
    .iconiconfront-68
  • 向下
    .iconiconfront-69
  • 下一页
    .iconiconfront-70
  • 向上
    .iconiconfront-71
  • 暂停
    .iconiconfront-72
  • 正确
    .iconiconfront-73
  • .iconiconfront-74
  • 退出
    .iconiconfront-76
  • 错误
    .iconiconfront-77
  • 向右
    .icondanseshixintubiao-
  • 向下
    .icondanseshixintubiao-1
  • 向上
    .icondanseshixintubiao-2
  • 删除
    .icondanseshixintubiao-3
  • 向左
    .icondanseshixintubiao-4
  • 正确
    .icondanseshixintubiao-5
  • 添加
    .icondanseshixintubiao-6
  • 删除
    .icondanseshixintubiao-7
  • 提示
    .icondanseshixintubiao-8
  • 暂停
    .icondanseshixintubiao-9
  • 右箭头
    .icondanseshixintubiao-10
  • 左箭头
    .icondanseshixintubiao-11
  • 表情
    .icondanseshixintubiao-13
  • 表情
    .icondanseshixintubiao-14
  • 收藏
    .icondanseshixintubiao-16
  • 收藏
    .icondanseshixintubiao-17
  • 下一个
    .icondanseshixintubiao-23
  • 上一个
    .icondanseshixintubiao-24
  • 消息
    .icondanseshixintubiao-25
  • 无线wifi
    .icondanseshixintubiao-29
  • 静音
    .icondanseshixintubiao-30
  • 音量
    .icondanseshixintubiao-32
  • 二维码
    .icondanseshixintubiao-35

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 点赞
    #icondianzan1
  • #iconRectangleCopy1
  • timeout
    #icontimeout
  • 完成
    #iconRectangleCopy
  • 用户
    #iconRectangleCopy4
  • 28体积、空间
    #icontijikongjian
  • 204首页
    #iconshouye
  • 224用户
    #iconyonghu
  • all
    #iconall
  • 播放页点赞
    #iconbofangyedianzan
  • 播放
    #iconbofang
  • 闹钟
    #icon04
  • gengduo
    #icongengduo
  • alipay
    #iconalipay
  • 朋友圈icon
    #iconpengyouquaniconx
  • 引导箭头
    #iconyindao
  • 空状态
    #iconss_empty
  • 正在直播
    #iconcelluar
  • 账户_奖金
    #iconzhanghu_jiangjin
  • 招聘
    #iconzhaopin
  • 企业
    #iconqiye1
  • 25-竞赛
    #icon-jingsai
  • 购物车-线性
    #icongouwuche-xianxing
  • 我的-纯色
    #iconwode-chunse
  • 我的-线性
    #iconwode-xianxing
  • 学习-线性
    #iconxuexi-xianxing
  • 学习-纯色
    #iconxuexi-chunse
  • 分类-纯色
    #iconfenlei-chunse
  • 分类-线性
    #iconfenlei-xianxing
  • 首页-线性
    #iconshouye-xianxing
  • 首页
    #iconshouye1
  • 密码
    #iconmima
  • 手机
    #iconshouji
  • 短信
    #iconduanxin
  • 眼睛
    #iconyanjing
  • 眼睛
    #iconpwd-hidden
  • 点赞
    #icondianzan
  • 点赞_块
    #icondianzan_kuai
  • 花呗
    #iconhuabei
  • 微信支付
    #iconweixinzhifu
  • 薯条
    #iconfrench_fries
  • 冰箱
    #iconfridge
  • 耳机
    #iconerji
  • 热门
    #iconremen
  • 优惠券
    #iconyouhuiquan
  • #icontea
  • 拉面
    #iconramen
  • 蜂蜜
    #iconhoney
  • 闹钟
    #iconzhong
  • 搜索
    #iconiconfront-
  • 消息
    #iconiconfront-1
  • 错误
    #iconiconfront-2
  • 收藏
    #iconiconfront-4
  • 删除
    #iconiconfront-5
  • 添加
    #iconiconfront-6
  • 设置
    #iconiconfront-7
  • 提醒
    #iconiconfront-8
  • 向右
    #iconiconfront-9
  • 个人中心
    #iconiconfront-10
  • 向下
    #iconiconfront-11
  • #iconiconfront-12
  • #iconiconfront-13
  • #iconiconfront-14
  • 后退
    #iconiconfront-15
  • 功能
    #iconiconfront-16
  • 向上
    #iconiconfront-17
  • 列表
    #iconiconfront-18
  • 扫描
    #iconiconfront-19
  • 个人中心
    #iconiconfront-20
  • 时间
    #iconiconfront-21
  • 问题
    #iconiconfront-22
  • 暂停
    #iconiconfront-23
  • 清单
    #iconiconfront-24
  • 交换
    #iconiconfront-25
  • 输入
    #iconiconfront-26
  • 日期
    #iconiconfront-27
  • 收藏
    #iconiconfront-28
  • 下载
    #iconiconfront-29
  • 输出
    #iconiconfront-30
  • 上传
    #iconiconfront-31
  • 刷新
    #iconiconfront-32
  • 客服
    #iconiconfront-33
  • 记事本
    #iconiconfront-34
  • 下一页
    #iconiconfront-35
  • 返回
    #iconiconfront-36
  • 无线
    #iconiconfront-37
  • 放大
    #iconiconfront-38
  • 音量
    #iconiconfront-39
  • 扩大
    #iconiconfront-40
  • 静音
    #iconiconfront-41
  • #iconiconfront-42
  • 往左
    #iconiconfront-43
  • 收缩
    #iconiconfront-44
  • 循环
    #iconiconfront-45
  • #iconiconfront-46
  • 标签
    #iconiconfront-47
  • 商铺
    #iconiconfront-48
  • 红包
    #iconiconfront-49
  • 位置
    #iconiconfront-50
  • 休息
    #iconiconfront-51
  • 礼物
    #iconiconfront-52
  • 二维码
    #iconiconfront-53
  • 笑脸
    #iconiconfront-54
  • 垃圾桶
    #iconiconfront-56
  • 文档
    #iconiconfront-57
  • 安全
    #iconiconfront-58
  • 文件搜索
    #iconiconfront-59
  • 表情
    #iconiconfront-60
  • 列表
    #iconiconfront-63
  • 文档设置
    #iconiconfront-64
  • 添加
    #iconiconfront-65
  • 减少
    #iconiconfront-66
  • 禁用
    #iconiconfront-67
  • 上一页
    #iconiconfront-68
  • 向下
    #iconiconfront-69
  • 下一页
    #iconiconfront-70
  • 向上
    #iconiconfront-71
  • 暂停
    #iconiconfront-72
  • 正确
    #iconiconfront-73
  • #iconiconfront-74
  • 退出
    #iconiconfront-76
  • 错误
    #iconiconfront-77
  • 向右
    #icondanseshixintubiao-
  • 向下
    #icondanseshixintubiao-1
  • 向上
    #icondanseshixintubiao-2
  • 删除
    #icondanseshixintubiao-3
  • 向左
    #icondanseshixintubiao-4
  • 正确
    #icondanseshixintubiao-5
  • 添加
    #icondanseshixintubiao-6
  • 删除
    #icondanseshixintubiao-7
  • 提示
    #icondanseshixintubiao-8
  • 暂停
    #icondanseshixintubiao-9
  • 右箭头
    #icondanseshixintubiao-10
  • 左箭头
    #icondanseshixintubiao-11
  • 表情
    #icondanseshixintubiao-13
  • 表情
    #icondanseshixintubiao-14
  • 收藏
    #icondanseshixintubiao-16
  • 收藏
    #icondanseshixintubiao-17
  • 下一个
    #icondanseshixintubiao-23
  • 上一个
    #icondanseshixintubiao-24
  • 消息
    #icondanseshixintubiao-25
  • 无线wifi
    #icondanseshixintubiao-29
  • 静音
    #icondanseshixintubiao-30
  • 音量
    #icondanseshixintubiao-32
  • 二维码
    #icondanseshixintubiao-35

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>