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

Unicode 引用


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

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

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

Unicode 使用步骤如下:

<link rel="preload" href="//at.alicdn.com/t/font_3123425_cgak6w6wdch.woff2" as="font" type="font/woff2" crossorigin="anonymous">

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

@font-face {
  font-family: 'by-font';
  src: url('//at.alicdn.com/t/font_3123425_cgak6w6wdch.woff2?t=1642841728545') format('woff2'),
       url('//at.alicdn.com/t/font_3123425_cgak6w6wdch.woff?t=1642841728545') format('woff'),
       url('//at.alicdn.com/t/font_3123425_cgak6w6wdch.ttf?t=1642841728545') format('truetype');
}

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

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

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

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

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

  • 目录
    .by_icon_mulu
  • .by_icon_err
  • 成功
    .by_icon_success
  • 引号
    .by_icon_yinhao
  • 提示
    .by_icon_info
  • 日历
    .by_icon_rili3
  • 日历
    .by_icon_rili2
  • 时间
    .by_icon_shijian1
  • 置顶
    .by_icon_ziyuan
  • 眼睛
    .by_icon_yanjing
  • 剪刀
    .by_icon_jiandao
  • 错误
    .by_icon_cuowu
  • 黑白模式
    .by_icon_heibaimoshi
  • 设置
    .by_icon_icon02
  • 向上
    .by_icon_icon-
  • 公告
    .by_icon_gonggao
  • github
    .by_icon_github
  • 竖线
    .by_icon_shuxian
  • 邮件
    .by_icon_youjian1
  • 信号
    .by_icon_xinhao
  • .by_icon_zuo
  • .by_icon_you
  • 三杠
    .by_icon_sangang
  • 管理
    .by_icon_guanli
  • 邻居交流
    .by_icon_b
  • 日历
    .by_icon_rili1
  • 置顶
    .by_icon_zhiding
  • 安全
    .by_icon_anquan
  • 爱心
    .by_icon_aixin
  • 表情
    .by_icon_biaoqing
  • 调节
    .by_icon_tiaojie
  • 播放
    .by_icon_bofang
  • 发送
    .by_icon_fasong
  • 草稿箱
    .by_icon_caogaoxiang
  • 发现
    .by_icon_faxian
  • 关闭音量
    .by_icon_guanbiyinliang
  • 定位
    .by_icon_dingwei
  • 复制
    .by_icon_fuzhi
  • 加速
    .by_icon_jiasu
  • 购物
    .by_icon_gouwu
  • 降低音量
    .by_icon_jiangdiyinliang
  • 拍照
    .by_icon_paizhao
  • 加大音量
    .by_icon_jiadayinliang
  • 灵感
    .by_icon_linggan
  • 日历
    .by_icon_rili
  • 钱包
    .by_icon_qianbao
  • 热门
    .by_icon_remen
  • 筛选
    .by_icon_shaixuan
  • 时间
    .by_icon_shijian
  • 删除
    .by_icon_shanchu
  • 收藏
    .by_icon_shoucang
  • 搜索
    .by_icon_sousuo
  • 首页
    .by_icon_shouye
  • 添加
    .by_icon_tianjia
  • .by_icon_shu
  • 设置
    .by_icon_shezhi
  • 文稿
    .by_icon_wengao
  • 通知
    .by_icon_tongzhi
  • 图片
    .by_icon_tupian
  • 文件
    .by_icon_wenjian
  • 文件夹
    .by_icon_wenjianjia
  • 邮件
    .by_icon_youjian
  • 音频
    .by_icon_yinpin
  • 消息
    .by_icon_xiaoxi
  • 语音
    .by_icon_yuyin
  • 阅读
    .by_icon_yuedu
  • arrow-down
    .by_icon_arrow-down
  • 搜索
    .by_icon_search
  • 日志
    .by_icon_riji
  • rocket
    .by_icon_rocket
  • 热门
    .by_icon_hottag
  • 太阳_sun61
    .by_icon_taiyang
  • 热门
    .by_icon_hot
  • 136消息、通知、提醒、铃声、铃铛-线性
    .by_icon_bell
  • 快速回复
    .by_icon_message
  • 回复
    .by_icon_huifu
  • 倒计时
    .by_icon_daojishi
  • 回复
    .by_icon_reply
  • 倒计时
    .by_icon_shalou
  • 应用
    .by_icon_application
  • 分 享
    .by_icon_share
  • .by_icon_huo
  • KHCFDC_复制
    .by_icon_copy
  • 音乐
    .by_icon_yinfu
  • 提示
    .by_icon_warning
  • 菜单-2-块
    .by_icon_caidan
  • 提示
    .by_icon_bulb
  • 提示
    .by_icon_tips
  • arrow-right
    .by_icon_arrow-right
  • .by_icon_cloud
  • share
    .by_icon_shareout
  • LC_icon_share_fill
    .by_icon_social
  • 头像6
    .by_icon_touxiang1
  • 头像1
    .by_icon_touxiang2
  • round_link_fill
    .by_icon_round_link
  • link
    .by_icon_link
  • 个人头像
    .by_icon_touxiang
  • 默认头像
    .by_icon_default-avatar
  • arrow-down-b
    .by_icon_arrow-downb
  • 图片1
    .by_icon_picture
  • 纸飞机_发布
    .by_icon_zhifeiji
  • 二维码
    .by_icon_qrcode
  • 二维码
    .by_icon_qrcode2
  • 标签
    .by_icon_tag
  • feather羽毛
    .by_icon_feather
  • 点赞
    .by_icon_xihuan-fill
  • 点赞
    .by_icon_xihuan
  • 打赏3
    .by_icon_shang
  • 点赞
    .by_icon_zan
  • 统计
    .by_icon_tongji
  • 点赞
    .by_icon_dianzan-fill
  • 点赞
    .by_icon_dianzan
  • 展开
    .by_icon_expand-in
  • 收起
    .by_icon_expand-out
  • 向左2
    .by_icon_prev
  • 向右2
    .by_icon_next
  • 喇叭
    .by_icon_speaker
  • like-fill
    .by_icon_like-fill
  • like
    .by_icon_like
  • 评论
    .by_icon_pinglun1
  • 羽毛笔
    .by_icon_yumao
  • line-quill pen(羽毛笔)
    .by_icon_line-quillpenyumaobi
  • 更多
    .by_icon_more-right
  • 瀑布流
    .by_icon_waterfall
  • 24gf-grid
    .by_icon_grid
  • B-时间
    .by_icon_clock-fill
  • rss-square-solid
    .by_icon_rss-fill
  • 分类
    .by_icon_fenlei
  • 时间轴
    .by_icon_timeline
  • 预览
    .by_icon_preview
  • 数译_清楚-垃圾桶
    .by_icon_trash
  • 安全
    .by_icon_shield
  • 新建帖子
    .by_icon_edit
  • unrealengine
    .by_icon_unreal

font-class 引用


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

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

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

使用步骤如下:

<link rel="preload" href="//at.alicdn.com/t/font_3123425_cgak6w6wdch.woff2" as="font" type="font/woff2" crossorigin="anonymous">

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

<link rel="stylesheet" href="//at.alicdn.com/t/font_3123425_cgak6w6wdch.css">

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

<span class="by-font by_icon_xxx"></span>

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

  • 目录
    #by_icon_mulu
  • #by_icon_err
  • 成功
    #by_icon_success
  • 引号
    #by_icon_yinhao
  • 提示
    #by_icon_info
  • 日历
    #by_icon_rili3
  • 日历
    #by_icon_rili2
  • 时间
    #by_icon_shijian1
  • 置顶
    #by_icon_ziyuan
  • 眼睛
    #by_icon_yanjing
  • 剪刀
    #by_icon_jiandao
  • 错误
    #by_icon_cuowu
  • 黑白模式
    #by_icon_heibaimoshi
  • 设置
    #by_icon_icon02
  • 向上
    #by_icon_icon-
  • 公告
    #by_icon_gonggao
  • github
    #by_icon_github
  • 竖线
    #by_icon_shuxian
  • 邮件
    #by_icon_youjian1
  • 信号
    #by_icon_xinhao
  • #by_icon_zuo
  • #by_icon_you
  • 三杠
    #by_icon_sangang
  • 管理
    #by_icon_guanli
  • 邻居交流
    #by_icon_b
  • 日历
    #by_icon_rili1
  • 置顶
    #by_icon_zhiding
  • 安全
    #by_icon_anquan
  • 爱心
    #by_icon_aixin
  • 表情
    #by_icon_biaoqing
  • 调节
    #by_icon_tiaojie
  • 播放
    #by_icon_bofang
  • 发送
    #by_icon_fasong
  • 草稿箱
    #by_icon_caogaoxiang
  • 发现
    #by_icon_faxian
  • 关闭音量
    #by_icon_guanbiyinliang
  • 定位
    #by_icon_dingwei
  • 复制
    #by_icon_fuzhi
  • 加速
    #by_icon_jiasu
  • 购物
    #by_icon_gouwu
  • 降低音量
    #by_icon_jiangdiyinliang
  • 拍照
    #by_icon_paizhao
  • 加大音量
    #by_icon_jiadayinliang
  • 灵感
    #by_icon_linggan
  • 日历
    #by_icon_rili
  • 钱包
    #by_icon_qianbao
  • 热门
    #by_icon_remen
  • 筛选
    #by_icon_shaixuan
  • 时间
    #by_icon_shijian
  • 删除
    #by_icon_shanchu
  • 收藏
    #by_icon_shoucang
  • 搜索
    #by_icon_sousuo
  • 首页
    #by_icon_shouye
  • 添加
    #by_icon_tianjia
  • #by_icon_shu
  • 设置
    #by_icon_shezhi
  • 文稿
    #by_icon_wengao
  • 通知
    #by_icon_tongzhi
  • 图片
    #by_icon_tupian
  • 文件
    #by_icon_wenjian
  • 文件夹
    #by_icon_wenjianjia
  • 邮件
    #by_icon_youjian
  • 音频
    #by_icon_yinpin
  • 消息
    #by_icon_xiaoxi
  • 语音
    #by_icon_yuyin
  • 阅读
    #by_icon_yuedu
  • arrow-down
    #by_icon_arrow-down
  • 搜索
    #by_icon_search
  • 日志
    #by_icon_riji
  • rocket
    #by_icon_rocket
  • 热门
    #by_icon_hottag
  • 太阳_sun61
    #by_icon_taiyang
  • 热门
    #by_icon_hot
  • 136消息、通知、提醒、铃声、铃铛-线性
    #by_icon_bell
  • 快速回复
    #by_icon_message
  • 回复
    #by_icon_huifu
  • 倒计时
    #by_icon_daojishi
  • 回复
    #by_icon_reply
  • 倒计时
    #by_icon_shalou
  • 应用
    #by_icon_application
  • 分 享
    #by_icon_share
  • #by_icon_huo
  • KHCFDC_复制
    #by_icon_copy
  • 音乐
    #by_icon_yinfu
  • 提示
    #by_icon_warning
  • 菜单-2-块
    #by_icon_caidan
  • 提示
    #by_icon_bulb
  • 提示
    #by_icon_tips
  • arrow-right
    #by_icon_arrow-right
  • #by_icon_cloud
  • share
    #by_icon_shareout
  • LC_icon_share_fill
    #by_icon_social
  • 头像6
    #by_icon_touxiang1
  • 头像1
    #by_icon_touxiang2
  • round_link_fill
    #by_icon_round_link
  • link
    #by_icon_link
  • 个人头像
    #by_icon_touxiang
  • 默认头像
    #by_icon_default-avatar
  • arrow-down-b
    #by_icon_arrow-downb
  • 图片1
    #by_icon_picture
  • 纸飞机_发布
    #by_icon_zhifeiji
  • 二维码
    #by_icon_qrcode
  • 二维码
    #by_icon_qrcode2
  • 标签
    #by_icon_tag
  • feather羽毛
    #by_icon_feather
  • 点赞
    #by_icon_xihuan-fill
  • 点赞
    #by_icon_xihuan
  • 打赏3
    #by_icon_shang
  • 点赞
    #by_icon_zan
  • 统计
    #by_icon_tongji
  • 点赞
    #by_icon_dianzan-fill
  • 点赞
    #by_icon_dianzan
  • 展开
    #by_icon_expand-in
  • 收起
    #by_icon_expand-out
  • 向左2
    #by_icon_prev
  • 向右2
    #by_icon_next
  • 喇叭
    #by_icon_speaker
  • like-fill
    #by_icon_like-fill
  • like
    #by_icon_like
  • 评论
    #by_icon_pinglun1
  • 羽毛笔
    #by_icon_yumao
  • line-quill pen(羽毛笔)
    #by_icon_line-quillpenyumaobi
  • 更多
    #by_icon_more-right
  • 瀑布流
    #by_icon_waterfall
  • 24gf-grid
    #by_icon_grid
  • B-时间
    #by_icon_clock-fill
  • rss-square-solid
    #by_icon_rss-fill
  • 分类
    #by_icon_fenlei
  • 时间轴
    #by_icon_timeline
  • 预览
    #by_icon_preview
  • 数译_清楚-垃圾桶
    #by_icon_trash
  • 安全
    #by_icon_shield
  • 新建帖子
    #by_icon_edit
  • unrealengine
    #by_icon_unreal

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

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

<script src="//at.alicdn.com/t/font_3123425_cgak6w6wdch.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>