• at-solid
    
  • v认证管理
    
  • 解锁
    
  • 
  • c1-空状态
    
  • 倒三角
    
  • 上-三角
    
  • 下-三角
    
  • 回复
    
  • 切换
    
  • 铃铛
    
  • time
    
  • play
    
  • stop
    
  • 说的话2
    
  • 上下
    
  • 更多
    
  • 实名认证
    
  • money
    
  • 实心地球
    
  • 微笑
    
  • 减少减去减号
    
  • 表情
    
  • 星途学堂-投票
    
  • icon_提问
    
  • post-it
    
  • 文件夹
    
  • 图片
    
  • 视频
    
  • topic2
    
  • 圈子
    
  • 喇叭
    
  • 下载
    
  • download
    
  • info
    
  • 太阳_sun61
    
  • 钻石
    
  • 夜晚月亮
    
  • task-line
    
  • 微信-推广吸粉
    
  • paypal
    
  • 
  • 
  • 评论
    
  • 心 爱心
    
  • 邀请
    
  • 粉丝
    
  • 邀请码
    
  • 付费
    
  • 快讯
    
  • 趋势-上涨
    
  • 趋势-下跌
    
  • link
    
  • email
    
  • 引号
    
  • 引号
    
  • 视频页-玫瑰花
    
  • 闪电
    
  • 圆_circle94
    
  • 客服
    
  • 展开
    
  • 问题
    
  • 对勾
    
  • Tag, label, e-commerce
    
  • 地址
    
  • 邮箱
    
  • 21优惠劵-线性
    
  • 微笑
    
  • 箭头
    
  • 我的购物车
    
  • 付款成功账单
    
  • 结算3
    
  • 权限
    
  • hot
    
  • star-empty
    
  • 购物车
    
  • message
    
  • ic_totop
    
  • 二维码
    
  • 认证
    
  • 签到-考勤打卡
    
  • 
  • 关注
    
  • tag2
    
  • 菜单
    
  • web__关于我们
    
  • 文章收藏
    
  • home
    
  • 不喜欢
    
  • 箭头
    
  • top
    
  • 筛选
    
  • 公众号
    
  • 实名认证
    
  • 费用分析
    
  • 设置
    
  • 错误
    
  • 
  • 卡密
    
  • gift_2e
    
  • vip
    
  • 提示
    
  • 错误
    
  • 
  • 
  • 咖啡 等待
    
  • 微信支付
    
  • 支付宝
    
  • 
  • 写作
    
  • code
    
  • 购物车满
    
  • 消息
    
  • top
    
  • play
    
  • 对钩
    
  • 自定义
    
  • 积分
    
  • 气泡图
    
  • 实验
    
  • 文章
    
  • 收藏
    
  • external-link-outline
    
  • photo
    
  • user
    
  • 置顶
    
  • 图片
    
  • smile
    
  • face
    
  • 
  • 
  • 飞机
    
  • share
    
  • 
  • 点赞
    
  • 开锁
    
  • 
  • stop
    
  • play
    
  • 箭头
    
  • 喇叭
    
  • 资源 22
    
  • 减号
    
  • 
  • 创作中心_添加标签_14
    
  • 资源 32
    
  • eye
    
  • 评论
    
  • love
    
  • time
    
  • 退出
    
  • 私信
    
  • 后台系统
    
  • 设置
    
  • 认证
    
  • 120收支明细、财富、红包、余额
    
  • gift
    
  • 帮 助
    
  • 眼睛 (2)
    
  • 眼睛_显示_o
    
  • 微博
    
  • QQ
    
  • 微信
    
  • 删除/数字面板编辑态
    
  • 箭头_右
    
  • more
    
  • 箭头
    
  • search
    
  • 购物袋
    
  • more
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'b2font';
  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#b2font') format('svg');
}

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

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

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

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

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

  • at-solid
    .b2-at-solid
  • v认证管理
    .b2-vrenzhengguanli
  • 解锁
    .b2-jiesuo
  • .b2-lock
  • c1-空状态
    .b2-c-kongzhuangtai
  • 倒三角
    .b2-daosanjiao
  • 上-三角
    .b2-top-s
  • 下-三角
    .b2-below-s
  • 回复
    .b2-huifu
  • 切换
    .b2-weibiaoti--
  • 铃铛
    .b2-lingdang
  • time
    .b2-time1
  • play
    .b2-play2
  • stop
    .b2-stop1
  • 说的话2
    .b2-tubiao108
  • 上下
    .b2-shangxia
  • 更多
    .b2-gengduo
  • 实名认证
    .b2-shimingrenzheng
  • money
    .b2-money
  • 实心地球
    .b2-shixindiqiu
  • 微笑
    .b2-weixiao-
  • 减少减去减号
    .b2-sub
  • 表情
    .b2-biaoqing
  • 星途学堂-投票
    .b2-toupiao
  • icon_提问
    .b2-icon_tiwen
  • post-it
    .b2-post-it
  • 文件夹
    .b2-wenjian
  • 图片
    .b2-tianchongxing-
  • 视频
    .b2-shipin
  • topic2
    .b2-topic
  • 圈子
    .b2-quanzi
  • 喇叭
    .b2-laba1
  • 下载
    .b2-Group-
  • download
    .b2-download
  • info
    .b2-info
  • 太阳_sun61
    .b2-taiyangsun61
  • 钻石
    .b2-zuanshi
  • 夜晚月亮
    .b2-lkingboyewanyueliang
  • task-line
    .b2-task-line
  • 微信-推广吸粉
    .b2-weixintuiguangxifen
  • paypal
    .b2-paypal
  • .b2-nv
  • .b2-nan
  • 评论
    .b2-pinglun1
  • 心 爱心
    .b2-xinaixin
  • 邀请
    .b2-xiazai
  • 粉丝
    .b2-fensi
  • 邀请码
    .b2-yaoqingma
  • 付费
    .b2-fufei
  • 快讯
    .b2-kuaixun
  • 趋势-上涨
    .b2-qushi-shangzhang
  • 趋势-下跌
    .b2-qushi-xiadie
  • link
    .b2-link
  • email
    .b2-email
  • 引号
    .b2-icon-copy
  • 引号
    .b2-icon-copy-copy
  • 视频页-玫瑰花
    .b2-shipinye-meiguihua
  • 闪电
    .b2-shandian
  • 圆_circle94
    .b2-yuancircle94
  • 客服
    .b2-kefu
  • 展开
    .b2-spread-line
  • 问题
    .b2-wenti
  • 对勾
    .b2-duigou
  • Tag, label, e-commerce
    .b2-tags
  • 地址
    .b2-dizhi
  • 邮箱
    .b2-youxiang
  • 21优惠劵-线性
    .b2-youhuijuan-xianxing
  • 微笑
    .b2-smile1
  • 箭头
    .b2-jiantou-copy-copy
  • 我的购物车
    .b2-wodegouwuche
  • 付款成功账单
    .b2-fukuanchenggongzhangdan
  • 结算3
    .b2-jiesuan
  • 权限
    .b2-quanxian
  • hot
    .b2-hot
  • star-empty
    .b2-starempty
  • 购物车
    .b2-gouwuche
  • message
    .b2-message
  • ic_totop
    .b2-ictotop
  • 二维码
    .b2-erweima
  • 认证
    .b2-auth
  • 签到-考勤打卡
    .b2-qiandao-kaoqindaqia
  • .b2-gou1
  • 关注
    .b2-guanzhu
  • tag2
    .b2-tag2
  • 菜单
    .b2-menu
  • web__关于我们
    .b2-wode
  • 文章收藏
    .b2-zhuanti
  • home
    .b2-home
  • 不喜欢
    .b2-buxihuan
  • 箭头
    .b2-jiantou
  • top
    .b2-top1
  • 筛选
    .b2-shaixuan
  • 公众号
    .b2-gongzhonghao
  • 实名认证
    .b2-cedaohang-kehuguanli
  • 费用分析
    .b2-feiyongduoweifenxi
  • 设置
    .b2-shezhi1
  • 错误
    .b2-cuowu1
  • .b2-dui
  • 卡密
    .b2-qiami
  • gift_2e
    .b2-gift2e
  • vip
    .b2-vip
  • 提示
    .b2-icon
  • 错误
    .b2-cuowu
  • .b2-xiao
  • .b2-ku1
  • 咖啡 等待
    .b2-waiting
  • 微信支付
    .b2-pay-weixin
  • 支付宝
    .b2-pay-zhifubao
  • .b2-tang
  • 写作
    .b2-write
  • code
    .b2-code
  • 购物车满
    .b2-gouwucheman
  • 消息
    .b2-xiaoxi
  • top
    .b2-top
  • play
    .b2-play1
  • 对钩
    .b2-29
  • 自定义
    .b2-zidingyi
  • 积分
    .b2-jifen
  • 气泡图
    .b2-iocnqipaotu
  • 实验
    .b2-shiyan
  • 文章
    .b2-wenzhang
  • 收藏
    .b2-shoucang
  • external-link-outline
    .b2-link-to
  • photo
    .b2-photo
  • user
    .b2-user
  • 置顶
    .b2-zhiding
  • 图片
    .b2-tupian
  • smile
    .b2-smile
  • face
    .b2-face
  • .b2-cai2
  • .b2-zan2
  • 飞机
    .b2-feiji
  • share
    .b2-share
  • .b2-cai
  • 点赞
    .b2-zan
  • 开锁
    .b2-kaisuo
  • .b2-suo
  • stop
    .b2-stop
  • play
    .b2-play
  • 箭头
    .b2-arrow
  • 喇叭
    .b2-laba
  • 资源 22
    .b2-xiexian
  • 减号
    .b2-jian
  • .b2-jia
  • 创作中心_添加标签_14
    .b2-add
  • 资源 32
    .b2-page-empty
  • eye
    .b2-eye
  • 评论
    .b2-pinglun
  • love
    .b2-love
  • time
    .b2-time
  • 退出
    .b2-tuichu
  • 私信
    .b2-xingzhuangcopy
  • 后台系统
    .b2-houtai
  • 设置
    .b2-shezhi
  • 认证
    .b2-renzheng
  • 120收支明细、财富、红包、余额
    .b2-caifu
  • gift
    .b2-gift
  • 帮 助
    .b2-help
  • 眼睛 (2)
    .b2-eye-close
  • 眼睛_显示_o
    .b2-eye-open
  • 微博
    .b2-weibo
  • QQ
    .b2-qq
  • 微信
    .b2-weixin
  • 删除/数字面板编辑态
    .b2-close
  • 箭头_右
    .b2-jt-down
  • more
    .b2-jt-block-down
  • 箭头
    .b2-jt-right
  • search
    .b2-search
  • 购物袋
    .b2-cart
  • more
    .b2-more

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="b2font b2-xxx"></span>

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

  • at-solid
    #b2-at-solid
  • v认证管理
    #b2-vrenzhengguanli
  • 解锁
    #b2-jiesuo
  • #b2-lock
  • c1-空状态
    #b2-c-kongzhuangtai
  • 倒三角
    #b2-daosanjiao
  • 上-三角
    #b2-top-s
  • 下-三角
    #b2-below-s
  • 回复
    #b2-huifu
  • 切换
    #b2-weibiaoti--
  • 铃铛
    #b2-lingdang
  • time
    #b2-time1
  • play
    #b2-play2
  • stop
    #b2-stop1
  • 说的话2
    #b2-tubiao108
  • 上下
    #b2-shangxia
  • 更多
    #b2-gengduo
  • 实名认证
    #b2-shimingrenzheng
  • money
    #b2-money
  • 实心地球
    #b2-shixindiqiu
  • 微笑
    #b2-weixiao-
  • 减少减去减号
    #b2-sub
  • 表情
    #b2-biaoqing
  • 星途学堂-投票
    #b2-toupiao
  • icon_提问
    #b2-icon_tiwen
  • post-it
    #b2-post-it
  • 文件夹
    #b2-wenjian
  • 图片
    #b2-tianchongxing-
  • 视频
    #b2-shipin
  • topic2
    #b2-topic
  • 圈子
    #b2-quanzi
  • 喇叭
    #b2-laba1
  • 下载
    #b2-Group-
  • download
    #b2-download
  • info
    #b2-info
  • 太阳_sun61
    #b2-taiyangsun61
  • 钻石
    #b2-zuanshi
  • 夜晚月亮
    #b2-lkingboyewanyueliang
  • task-line
    #b2-task-line
  • 微信-推广吸粉
    #b2-weixintuiguangxifen
  • paypal
    #b2-paypal
  • #b2-nv
  • #b2-nan
  • 评论
    #b2-pinglun1
  • 心 爱心
    #b2-xinaixin
  • 邀请
    #b2-xiazai
  • 粉丝
    #b2-fensi
  • 邀请码
    #b2-yaoqingma
  • 付费
    #b2-fufei
  • 快讯
    #b2-kuaixun
  • 趋势-上涨
    #b2-qushi-shangzhang
  • 趋势-下跌
    #b2-qushi-xiadie
  • link
    #b2-link
  • email
    #b2-email
  • 引号
    #b2-icon-copy
  • 引号
    #b2-icon-copy-copy
  • 视频页-玫瑰花
    #b2-shipinye-meiguihua
  • 闪电
    #b2-shandian
  • 圆_circle94
    #b2-yuancircle94
  • 客服
    #b2-kefu
  • 展开
    #b2-spread-line
  • 问题
    #b2-wenti
  • 对勾
    #b2-duigou
  • Tag, label, e-commerce
    #b2-tags
  • 地址
    #b2-dizhi
  • 邮箱
    #b2-youxiang
  • 21优惠劵-线性
    #b2-youhuijuan-xianxing
  • 微笑
    #b2-smile1
  • 箭头
    #b2-jiantou-copy-copy
  • 我的购物车
    #b2-wodegouwuche
  • 付款成功账单
    #b2-fukuanchenggongzhangdan
  • 结算3
    #b2-jiesuan
  • 权限
    #b2-quanxian
  • hot
    #b2-hot
  • star-empty
    #b2-starempty
  • 购物车
    #b2-gouwuche
  • message
    #b2-message
  • ic_totop
    #b2-ictotop
  • 二维码
    #b2-erweima
  • 认证
    #b2-auth
  • 签到-考勤打卡
    #b2-qiandao-kaoqindaqia
  • #b2-gou1
  • 关注
    #b2-guanzhu
  • tag2
    #b2-tag2
  • 菜单
    #b2-menu
  • web__关于我们
    #b2-wode
  • 文章收藏
    #b2-zhuanti
  • home
    #b2-home
  • 不喜欢
    #b2-buxihuan
  • 箭头
    #b2-jiantou
  • top
    #b2-top1
  • 筛选
    #b2-shaixuan
  • 公众号
    #b2-gongzhonghao
  • 实名认证
    #b2-cedaohang-kehuguanli
  • 费用分析
    #b2-feiyongduoweifenxi
  • 设置
    #b2-shezhi1
  • 错误
    #b2-cuowu1
  • #b2-dui
  • 卡密
    #b2-qiami
  • gift_2e
    #b2-gift2e
  • vip
    #b2-vip
  • 提示
    #b2-icon
  • 错误
    #b2-cuowu
  • #b2-xiao
  • #b2-ku1
  • 咖啡 等待
    #b2-waiting
  • 微信支付
    #b2-pay-weixin
  • 支付宝
    #b2-pay-zhifubao
  • #b2-tang
  • 写作
    #b2-write
  • code
    #b2-code
  • 购物车满
    #b2-gouwucheman
  • 消息
    #b2-xiaoxi
  • top
    #b2-top
  • play
    #b2-play1
  • 对钩
    #b2-29
  • 自定义
    #b2-zidingyi
  • 积分
    #b2-jifen
  • 气泡图
    #b2-iocnqipaotu
  • 实验
    #b2-shiyan
  • 文章
    #b2-wenzhang
  • 收藏
    #b2-shoucang
  • external-link-outline
    #b2-link-to
  • photo
    #b2-photo
  • user
    #b2-user
  • 置顶
    #b2-zhiding
  • 图片
    #b2-tupian
  • smile
    #b2-smile
  • face
    #b2-face
  • #b2-cai2
  • #b2-zan2
  • 飞机
    #b2-feiji
  • share
    #b2-share
  • #b2-cai
  • 点赞
    #b2-zan
  • 开锁
    #b2-kaisuo
  • #b2-suo
  • stop
    #b2-stop
  • play
    #b2-play
  • 箭头
    #b2-arrow
  • 喇叭
    #b2-laba
  • 资源 22
    #b2-xiexian
  • 减号
    #b2-jian
  • #b2-jia
  • 创作中心_添加标签_14
    #b2-add
  • 资源 32
    #b2-page-empty
  • eye
    #b2-eye
  • 评论
    #b2-pinglun
  • love
    #b2-love
  • time
    #b2-time
  • 退出
    #b2-tuichu
  • 私信
    #b2-xingzhuangcopy
  • 后台系统
    #b2-houtai
  • 设置
    #b2-shezhi
  • 认证
    #b2-renzheng
  • 120收支明细、财富、红包、余额
    #b2-caifu
  • gift
    #b2-gift
  • 帮 助
    #b2-help
  • 眼睛 (2)
    #b2-eye-close
  • 眼睛_显示_o
    #b2-eye-open
  • 微博
    #b2-weibo
  • QQ
    #b2-qq
  • 微信
    #b2-weixin
  • 删除/数字面板编辑态
    #b2-close
  • 箭头_右
    #b2-jt-down
  • more
    #b2-jt-block-down
  • 箭头
    #b2-jt-right
  • search
    #b2-search
  • 购物袋
    #b2-cart
  • more
    #b2-more

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>