• icon_open
    
  • 密码、锁
    
  • unrealengine
    
  • 新建帖子
    
  • 安全
    
  • 数译_清楚-垃圾桶
    
  • 预览
    
  • 分类
    
  • 时间轴
    
  • rss-square-solid
    
  • B-时间
    
  • 瀑布流
    
  • 24gf-grid
    
  • 更多
    
  • 评论
    
  • 羽毛笔
    
  • line-quill pen(羽毛笔)
    
  • like-fill
    
  • like
    
  • 向左2
    
  • 向右2
    
  • 喇叭
    
  • 展开
    
  • 收起
    
  • 点赞
    
  • 点赞
    
  • 打赏3
    
  • 点赞
    
  • 统计
    
  • 点赞
    
  • 点赞
    
  • feather羽毛
    
  • 标签
    
  • 二维码
    
  • 二维码
    
  • 纸飞机_发布
    
  • 图片1
    
  • arrow-down-b
    
  • share
    
  • LC_icon_share_fill
    
  • 头像6
    
  • 头像1
    
  • round_link_fill
    
  • link
    
  • 个人头像
    
  • 默认头像
    
  • 
  • arrow-right
    
  • 提示
    
  • 菜单-2-块
    
  • 提示
    
  • 提示
    
  • 音乐
    
  • KHCFDC_复制
    
  • 日志
    
  • rocket
    
  • 热门
    
  • 太阳_sun61
    
  • 热门
    
  • 136消息、通知、提醒、铃声、铃铛-线性
    
  • 快速回复
    
  • 回复
    
  • 倒计时
    
  • 回复
    
  • 倒计时
    
  • 应用
    
  • 分 享
    
  • 
  • 搜索
    
  • arrow-down
    
  • 安全
    
  • 爱心
    
  • 表情
    
  • 调节
    
  • 播放
    
  • 发送
    
  • 草稿箱
    
  • 发现
    
  • 关闭音量
    
  • 定位
    
  • 复制
    
  • 加速
    
  • 购物
    
  • 降低音量
    
  • 拍照
    
  • 加大音量
    
  • 灵感
    
  • 日历
    
  • 钱包
    
  • 热门
    
  • 筛选
    
  • 时间
    
  • 删除
    
  • 收藏
    
  • 搜索
    
  • 首页
    
  • 添加
    
  • 
  • 设置
    
  • 文稿
    
  • 通知
    
  • 图片
    
  • 文件
    
  • 文件夹
    
  • 邮件
    
  • 音频
    
  • 消息
    
  • 语音
    
  • 阅读
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

<span class="joe-font">&#x33;</span>

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

  • icon_open
    .joe-icon-eye
  • 密码、锁
    .joe-icon-locker
  • unrealengine
    .joe-icon-unreal
  • 新建帖子
    .joe-icon-edit
  • 安全
    .joe-icon-shield
  • 数译_清楚-垃圾桶
    .joe-icon-trash
  • 预览
    .joe-icon-preview
  • 分类
    .joe-icon-fenlei
  • 时间轴
    .joe-icon-timeline
  • rss-square-solid
    .joe-icon-rss-fill
  • B-时间
    .joe-icon-clock-fill
  • 瀑布流
    .joe-icon-waterfall
  • 24gf-grid
    .joe-icon-grid
  • 更多
    .joe-icon-more-right
  • 评论
    .joe-icon-pinglun1
  • 羽毛笔
    .joe-icon-yumao
  • line-quill pen(羽毛笔)
    .joe-icon-line-quillpenyumaobi
  • like-fill
    .joe-icon-like-fill
  • like
    .joe-icon-like
  • 向左2
    .joe-icon-prev
  • 向右2
    .joe-icon-next
  • 喇叭
    .joe-icon-speaker
  • 展开
    .joe-icon-expand-in
  • 收起
    .joe-icon-expand-out
  • 点赞
    .joe-icon-xihuan-fill
  • 点赞
    .joe-icon-xihuan
  • 打赏3
    .joe-icon-shang
  • 点赞
    .joe-icon-zan
  • 统计
    .joe-icon-tongji
  • 点赞
    .joe-icon-dianzan-fill
  • 点赞
    .joe-icon-dianzan
  • feather羽毛
    .joe-icon-feather
  • 标签
    .joe-icon-tag
  • 二维码
    .joe-icon-qrcode
  • 二维码
    .joe-icon-qrcode2
  • 纸飞机_发布
    .joe-icon-zhifeiji
  • 图片1
    .joe-icon-picture
  • arrow-down-b
    .joe-icon-arrow-downb
  • share
    .joe-icon-shareout
  • LC_icon_share_fill
    .joe-icon-social
  • 头像6
    .joe-icon-touxiang1
  • 头像1
    .joe-icon-touxiang2
  • round_link_fill
    .joe-icon-round_link
  • link
    .joe-icon-link
  • 个人头像
    .joe-icon-touxiang
  • 默认头像
    .joe-icon-default-avatar
  • .joe-icon-cloud
  • arrow-right
    .joe-icon-arrow-right
  • 提示
    .joe-icon-warning
  • 菜单-2-块
    .joe-icon-caidan
  • 提示
    .joe-icon-bulb
  • 提示
    .joe-icon-tips
  • 音乐
    .joe-icon-yinfu
  • KHCFDC_复制
    .joe-icon-copy
  • 日志
    .joe-icon-riji
  • rocket
    .joe-icon-rocket
  • 热门
    .joe-icon-hottag
  • 太阳_sun61
    .joe-icon-taiyang
  • 热门
    .joe-icon-hot
  • 136消息、通知、提醒、铃声、铃铛-线性
    .joe-icon-bell
  • 快速回复
    .joe-icon-message
  • 回复
    .joe-icon-huifu
  • 倒计时
    .joe-icon-daojishi
  • 回复
    .joe-icon-reply
  • 倒计时
    .joe-icon-shalou
  • 应用
    .joe-icon-application
  • 分 享
    .joe-icon-share
  • .joe-icon-huo
  • 搜索
    .joe-icon-search
  • arrow-down
    .joe-icon-arrow-down
  • 安全
    .joe-icon-anquan
  • 爱心
    .joe-icon-aixin
  • 表情
    .joe-icon-biaoqing
  • 调节
    .joe-icon-tiaojie
  • 播放
    .joe-icon-bofang
  • 发送
    .joe-icon-fasong
  • 草稿箱
    .joe-icon-caogaoxiang
  • 发现
    .joe-icon-faxian
  • 关闭音量
    .joe-icon-guanbiyinliang
  • 定位
    .joe-icon-dingwei
  • 复制
    .joe-icon-fuzhi
  • 加速
    .joe-icon-jiasu
  • 购物
    .joe-icon-gouwu
  • 降低音量
    .joe-icon-jiangdiyinliang
  • 拍照
    .joe-icon-paizhao
  • 加大音量
    .joe-icon-jiadayinliang
  • 灵感
    .joe-icon-linggan
  • 日历
    .joe-icon-rili
  • 钱包
    .joe-icon-qianbao
  • 热门
    .joe-icon-remen
  • 筛选
    .joe-icon-shaixuan
  • 时间
    .joe-icon-shijian
  • 删除
    .joe-icon-shanchu
  • 收藏
    .joe-icon-shoucang
  • 搜索
    .joe-icon-sousuo
  • 首页
    .joe-icon-shouye
  • 添加
    .joe-icon-tianjia
  • .joe-icon-shu
  • 设置
    .joe-icon-shezhi
  • 文稿
    .joe-icon-wengao
  • 通知
    .joe-icon-tongzhi
  • 图片
    .joe-icon-tupian
  • 文件
    .joe-icon-wenjian
  • 文件夹
    .joe-icon-wenjianjia
  • 邮件
    .joe-icon-youjian
  • 音频
    .joe-icon-yinpin
  • 消息
    .joe-icon-xiaoxi
  • 语音
    .joe-icon-yuyin
  • 阅读
    .joe-icon-yuedu

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="joe-font joe-icon-xxx"></span>

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

  • icon_open
    #joe-icon-eye
  • 密码、锁
    #joe-icon-locker
  • unrealengine
    #joe-icon-unreal
  • 新建帖子
    #joe-icon-edit
  • 安全
    #joe-icon-shield
  • 数译_清楚-垃圾桶
    #joe-icon-trash
  • 预览
    #joe-icon-preview
  • 分类
    #joe-icon-fenlei
  • 时间轴
    #joe-icon-timeline
  • rss-square-solid
    #joe-icon-rss-fill
  • B-时间
    #joe-icon-clock-fill
  • 瀑布流
    #joe-icon-waterfall
  • 24gf-grid
    #joe-icon-grid
  • 更多
    #joe-icon-more-right
  • 评论
    #joe-icon-pinglun1
  • 羽毛笔
    #joe-icon-yumao
  • line-quill pen(羽毛笔)
    #joe-icon-line-quillpenyumaobi
  • like-fill
    #joe-icon-like-fill
  • like
    #joe-icon-like
  • 向左2
    #joe-icon-prev
  • 向右2
    #joe-icon-next
  • 喇叭
    #joe-icon-speaker
  • 展开
    #joe-icon-expand-in
  • 收起
    #joe-icon-expand-out
  • 点赞
    #joe-icon-xihuan-fill
  • 点赞
    #joe-icon-xihuan
  • 打赏3
    #joe-icon-shang
  • 点赞
    #joe-icon-zan
  • 统计
    #joe-icon-tongji
  • 点赞
    #joe-icon-dianzan-fill
  • 点赞
    #joe-icon-dianzan
  • feather羽毛
    #joe-icon-feather
  • 标签
    #joe-icon-tag
  • 二维码
    #joe-icon-qrcode
  • 二维码
    #joe-icon-qrcode2
  • 纸飞机_发布
    #joe-icon-zhifeiji
  • 图片1
    #joe-icon-picture
  • arrow-down-b
    #joe-icon-arrow-downb
  • share
    #joe-icon-shareout
  • LC_icon_share_fill
    #joe-icon-social
  • 头像6
    #joe-icon-touxiang1
  • 头像1
    #joe-icon-touxiang2
  • round_link_fill
    #joe-icon-round_link
  • link
    #joe-icon-link
  • 个人头像
    #joe-icon-touxiang
  • 默认头像
    #joe-icon-default-avatar
  • #joe-icon-cloud
  • arrow-right
    #joe-icon-arrow-right
  • 提示
    #joe-icon-warning
  • 菜单-2-块
    #joe-icon-caidan
  • 提示
    #joe-icon-bulb
  • 提示
    #joe-icon-tips
  • 音乐
    #joe-icon-yinfu
  • KHCFDC_复制
    #joe-icon-copy
  • 日志
    #joe-icon-riji
  • rocket
    #joe-icon-rocket
  • 热门
    #joe-icon-hottag
  • 太阳_sun61
    #joe-icon-taiyang
  • 热门
    #joe-icon-hot
  • 136消息、通知、提醒、铃声、铃铛-线性
    #joe-icon-bell
  • 快速回复
    #joe-icon-message
  • 回复
    #joe-icon-huifu
  • 倒计时
    #joe-icon-daojishi
  • 回复
    #joe-icon-reply
  • 倒计时
    #joe-icon-shalou
  • 应用
    #joe-icon-application
  • 分 享
    #joe-icon-share
  • #joe-icon-huo
  • 搜索
    #joe-icon-search
  • arrow-down
    #joe-icon-arrow-down
  • 安全
    #joe-icon-anquan
  • 爱心
    #joe-icon-aixin
  • 表情
    #joe-icon-biaoqing
  • 调节
    #joe-icon-tiaojie
  • 播放
    #joe-icon-bofang
  • 发送
    #joe-icon-fasong
  • 草稿箱
    #joe-icon-caogaoxiang
  • 发现
    #joe-icon-faxian
  • 关闭音量
    #joe-icon-guanbiyinliang
  • 定位
    #joe-icon-dingwei
  • 复制
    #joe-icon-fuzhi
  • 加速
    #joe-icon-jiasu
  • 购物
    #joe-icon-gouwu
  • 降低音量
    #joe-icon-jiangdiyinliang
  • 拍照
    #joe-icon-paizhao
  • 加大音量
    #joe-icon-jiadayinliang
  • 灵感
    #joe-icon-linggan
  • 日历
    #joe-icon-rili
  • 钱包
    #joe-icon-qianbao
  • 热门
    #joe-icon-remen
  • 筛选
    #joe-icon-shaixuan
  • 时间
    #joe-icon-shijian
  • 删除
    #joe-icon-shanchu
  • 收藏
    #joe-icon-shoucang
  • 搜索
    #joe-icon-sousuo
  • 首页
    #joe-icon-shouye
  • 添加
    #joe-icon-tianjia
  • #joe-icon-shu
  • 设置
    #joe-icon-shezhi
  • 文稿
    #joe-icon-wengao
  • 通知
    #joe-icon-tongzhi
  • 图片
    #joe-icon-tupian
  • 文件
    #joe-icon-wenjian
  • 文件夹
    #joe-icon-wenjianjia
  • 邮件
    #joe-icon-youjian
  • 音频
    #joe-icon-yinpin
  • 消息
    #joe-icon-xiaoxi
  • 语音
    #joe-icon-yuyin
  • 阅读
    #joe-icon-yuedu

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>