• 首页
    
  • article-night
    
  • 日间
    
  • ad
    
  • 播放
    
  • 电视
    
  • 爱心 _实心
    
  • 24gf-play
    
  • 纪录片-1
    
  • 电影院
    
  • 消息-置灰
    
  • 喜欢
    
  • 首页-置灰
    
  • 返回
    
  • 签署协议
    
  • 关注-置灰
    
  • 分享
    
  • heart-add-fill
    
  • 拖动-01
    
  • 排序
    
  • move
    
  • 排序
    
  • c146排序正序
    
  • 正序
    
  • 收藏
    
  • 喜爱
    
  • Refresh
    
  • back
    
  • hot_fill
    
  • top
    
  • list2
    
  • 豆瓣
    
  • 腾讯
    
  • hot
    
  • msg3
    
  • triangle_down_fill
    
  • triangle_up_fill
    
  • 返回顶部
    
  • 返回顶部 (1)
    
  • 返回顶部 (3)
    
  • 返回顶部 (4)
    
  • 豆瓣
    
  • duihao3
    
  • love
    
  • 收藏full
    
  • 通知
    
  • 通知3
    
  • 邮箱
    
  • 腾讯qq
    
  • add
    
  • ranking
    
  • del
    
  • love
    
  • list
    
  • 优酷
    
  • 随机
    
  • 综艺
    
  • refresh
    
  • 报错
    
  • search
    
  • 点踩
    
  • round_rank_fill
    
  • 评论
    
  • share
    
  • 倍智观点
    
  • 对号
    
  • list
    
  • 返回顶部
    
  • 点赞_块
    
  • 通知
    
  • del
    
  • zan
    
  • guanbi
    
  • B-评分
    
  • dropdown_arrow_down
    
  • 腾讯视频1
    
  • goright
    
  • add
    
  • 通知
    
  • 点踩
    
  • 分享
    
  • add
    
  • 通知
    
  • love
    
  • 爱心
    
  • 点赞
    
  • 爱心
    
  • 点赞
    
  • search
    
  • bg-history
    
  • msg3
    
  • 优酷会员
    
  • zan-fill
    
  • 日间
    
  • gengduo
    
  • msg3
    
  • 综艺
    
  • 抖音
    
  • 快手
    
  • close
    
  • refresh-copy
    
  • full_screen_full
    
  • 分 享
    
  • icon求片反馈
    
  • 日间
    
  • 综艺
    
  • 抖音
    
  • goTop
    
  • 更多
    
  • user set-line
    
  • User certification-outlined
    
  • 排行榜
    
  • topping
    
  • 腾讯视频
    
  • 优酷
    
  • forward-arrow-direction-move-arrows
    
  • top
    
  • md-refresh Copy 2
    
  • hot-for-atmosphere
    
  • topping
    
  • topping
    
  • 跟多
    
  • Topping
    
  • pingfen
    
  • 白天
    
  • 抖音账号
    
  • 快手
    
  • ic_ ranking
    
  • 动漫
    
  • arrow-down-2--down-move-arrow-arrows
    
  • arrow-down-2--down-move-arrow-arrows-copy
    
  • Refresh Copy
    
  • mti-晴-夜间
    
  • mti-晴-夜间
    
  • 播放icon
    
  • 图片icon
    
  • 暂停icon
    
  • 退出
    
  • 问号
    
  • 评分(线)
    
  • 评分(面)
    
  • 账户
    
  • 收起
    
  • 展开
    
  • 关闭(线)
    
  • 朗读
    
  • 隐藏
    
  • 刷新
    
  • 电视剧
    
  • 用户
    
  • 电影
    
  • 电影
    
  • home-filling
    
  • APP下载
    
  • B站
    
  • app下载
    
  • 短剧
    
  • 短剧_剧场
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1743261758564') format('woff2'),
       url('iconfont.woff?t=1743261758564') format('woff'),
       url('iconfont.ttf?t=1743261758564') 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-shouye
  • article-night
    .icon-article-night
  • 日间
    .icon-rijian5
  • ad
    .icon-adgg
  • 播放
    .icon-bofang
  • 电视
    .icon-dianshi
  • 爱心 _实心
    .icon-aixin_shixin
  • 24gf-play
    .icon-24gf-play
  • 纪录片-1
    .icon-jilupian--
  • 电影院
    .icon-dianyingyuan
  • 消息-置灰
    .icon-xiaoxi-zhihui
  • 喜欢
    .icon-xihuan
  • 首页-置灰
    .icon-shouye-zhihui
  • 返回
    .icon-fanhui
  • 签署协议
    .icon-qianshuxieyi
  • 关注-置灰
    .icon-guanzhu-zhihui
  • 分享
    .icon-fenxiang3
  • heart-add-fill
    .icon-heart-add-fill
  • 拖动-01
    .icon-tuodong-01
  • 排序
    .icon-paixu
  • move
    .icon-move
  • 排序
    .icon-paixu1
  • c146排序正序
    .icon-c146paixuzhengxu
  • 正序
    .icon-zhengxu
  • 收藏
    .icon-shoucang
  • 喜爱
    .icon-xiai
  • Refresh
    .icon-refresh
  • back
    .icon-fenxiang
  • hot_fill
    .icon-hotfill
  • top
    .icon-top
  • list2
    .icon-list2
  • 豆瓣
    .icon-douban
  • 腾讯
    .icon-tengxun
  • hot
    .icon-hot
  • msg3
    .icon-msg3
  • triangle_down_fill
    .icon-triangledownfill
  • triangle_up_fill
    .icon-triangleupfill
  • 返回顶部
    .icon-gotop
  • 返回顶部 (1)
    .icon-fanhuidingbu1
  • 返回顶部 (3)
    .icon-fanhuidingbu3
  • 返回顶部 (4)
    .icon-fanhuidingbu4
  • 豆瓣
    .icon-douban1
  • duihao3
    .icon-duihao3
  • love
    .icon-love
  • 收藏full
    .icon-ego-favfull
  • 通知
    .icon-tongzhi
  • 通知3
    .icon-tongzhi3
  • 邮箱
    .icon-youxiang
  • 腾讯qq
    .icon-tengxunqq
  • add
    .icon-add
  • ranking
    .icon-ranking
  • del
    .icon-del
  • love
    .icon-love1
  • list
    .icon-list
  • 优酷
    .icon-youku
  • 随机
    .icon-suiji
  • 综艺
    .icon-zongyi
  • refresh
    .icon-refresh1
  • 报错
    .icon-baocuo
  • search
    .icon-search
  • 点踩
    .icon-diancai
  • round_rank_fill
    .icon-round_rank_fill
  • 评论
    .icon-pinglun
  • share
    .icon-share
  • 倍智观点
    .icon-msg
  • 对号
    .icon-duihao
  • list
    .icon-list1
  • 返回顶部
    .icon-fanhuidingbu
  • 点赞_块
    .icon-dianzan_kuai
  • 通知
    .icon-tongzhi1
  • del
    .icon-del1
  • zan
    .icon-zan
  • guanbi
    .icon-guanbi
  • B-评分
    .icon-B-pingfen
  • dropdown_arrow_down
    .icon-dropdown_arrow_down
  • 腾讯视频1
    .icon-tengxunshipin
  • goright
    .icon-goright
  • add
    .icon-add1
  • 通知
    .icon-tongzhi2
  • 点踩
    .icon-diancai1
  • 分享
    .icon-fenxiang1
  • add
    .icon-add2
  • 通知
    .icon-tongzhi4
  • love
    .icon-love2
  • 爱心
    .icon-aixin
  • 点赞
    .icon-dianzan
  • 爱心
    .icon-aixin1
  • 点赞
    .icon-dianzan1
  • search
    .icon-search1
  • bg-history
    .icon-bg-history
  • msg3
    .icon-icon-test
  • 优酷会员
    .icon-youkuhuiyuan
  • zan-fill
    .icon-tubiaozhizuomoban-
  • 日间
    .icon-rijian
  • gengduo
    .icon-gengduo
  • msg3
    .icon-msg31
  • 综艺
    .icon-zongyi1
  • 抖音
    .icon-douyin
  • 快手
    .icon-kuaishou
  • close
    .icon-close
  • refresh-copy
    .icon-refresh-copy
  • full_screen_full
    .icon-full_screen_full
  • 分 享
    .icon-fenxiang2
  • icon求片反馈
    .icon-iconqiupianfankui
  • 日间
    .icon-rijian1
  • 综艺
    .icon-zongyi2
  • 抖音
    .icon-douyin1
  • goTop
    .icon-goTop
  • 更多
    .icon-gengduo1
  • user set-line
    .icon-a-userset-line
  • User certification-outlined
    .icon-a-Usercertification-outlined
  • 排行榜
    .icon-paihangbang
  • topping
    .icon-topping
  • 腾讯视频
    .icon-tengxunshipin1
  • 优酷
    .icon-youku1
  • forward-arrow-direction-move-arrows
    .icon-forward-arrow-direction-move-arrows
  • top
    .icon-top1
  • md-refresh Copy 2
    .icon-a-md-refreshCopy2
  • hot-for-atmosphere
    .icon-hot-for-atmosphere
  • topping
    .icon-topping1
  • topping
    .icon-topping2
  • 跟多
    .icon-gengduo2
  • Topping
    .icon-Topping
  • pingfen
    .icon-pingfen
  • 白天
    .icon-baitian
  • 抖音账号
    .icon-douyinzhanghao
  • 快手
    .icon-kuaishou1
  • ic_ ranking
    .icon-a-ic_ranking
  • 动漫
    .icon-dongman
  • arrow-down-2--down-move-arrow-arrows
    .icon-arrow-down-2--down-move-arrow-arrows
  • arrow-down-2--down-move-arrow-arrows-copy
    .icon-arrow-down-2--down-move-arrow-arrows1
  • Refresh Copy
    .icon-a-RefreshCopy
  • mti-晴-夜间
    .icon-mti-qing-yejian
  • mti-晴-夜间
    .icon-mti-qing-yejian1
  • 播放icon
    .icon-bofangicon
  • 图片icon
    .icon-tupianicon
  • 暂停icon
    .icon-zantingicon
  • 退出
    .icon-tuichu
  • 问号
    .icon-wenhao
  • 评分(线)
    .icon-a-pingfenxian
  • 评分(面)
    .icon-a-pingfenmian
  • 账户
    .icon-zhanghu
  • 收起
    .icon-shouqi
  • 展开
    .icon-zhankai
  • 关闭(线)
    .icon-a-guanbixian
  • 朗读
    .icon-langdu
  • 隐藏
    .icon-yincang
  • 刷新
    .icon-shuaxin
  • 电视剧
    .icon-dianshiju
  • 用户
    .icon-yonghu
  • 电影
    .icon-dianying
  • 电影
    .icon-dianying1
  • home-filling
    .icon-home-filling
  • APP下载
    .icon-APPxiazai
  • B站
    .icon-Bzhan
  • app下载
    .icon-appxiazai
  • 短剧
    .icon-duanju
  • 短剧_剧场
    .icon-duanju_juchang

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-shouye
  • article-night
    #icon-article-night
  • 日间
    #icon-rijian5
  • ad
    #icon-adgg
  • 播放
    #icon-bofang
  • 电视
    #icon-dianshi
  • 爱心 _实心
    #icon-aixin_shixin
  • 24gf-play
    #icon-24gf-play
  • 纪录片-1
    #icon-jilupian--
  • 电影院
    #icon-dianyingyuan
  • 消息-置灰
    #icon-xiaoxi-zhihui
  • 喜欢
    #icon-xihuan
  • 首页-置灰
    #icon-shouye-zhihui
  • 返回
    #icon-fanhui
  • 签署协议
    #icon-qianshuxieyi
  • 关注-置灰
    #icon-guanzhu-zhihui
  • 分享
    #icon-fenxiang3
  • heart-add-fill
    #icon-heart-add-fill
  • 拖动-01
    #icon-tuodong-01
  • 排序
    #icon-paixu
  • move
    #icon-move
  • 排序
    #icon-paixu1
  • c146排序正序
    #icon-c146paixuzhengxu
  • 正序
    #icon-zhengxu
  • 收藏
    #icon-shoucang
  • 喜爱
    #icon-xiai
  • Refresh
    #icon-refresh
  • back
    #icon-fenxiang
  • hot_fill
    #icon-hotfill
  • top
    #icon-top
  • list2
    #icon-list2
  • 豆瓣
    #icon-douban
  • 腾讯
    #icon-tengxun
  • hot
    #icon-hot
  • msg3
    #icon-msg3
  • triangle_down_fill
    #icon-triangledownfill
  • triangle_up_fill
    #icon-triangleupfill
  • 返回顶部
    #icon-gotop
  • 返回顶部 (1)
    #icon-fanhuidingbu1
  • 返回顶部 (3)
    #icon-fanhuidingbu3
  • 返回顶部 (4)
    #icon-fanhuidingbu4
  • 豆瓣
    #icon-douban1
  • duihao3
    #icon-duihao3
  • love
    #icon-love
  • 收藏full
    #icon-ego-favfull
  • 通知
    #icon-tongzhi
  • 通知3
    #icon-tongzhi3
  • 邮箱
    #icon-youxiang
  • 腾讯qq
    #icon-tengxunqq
  • add
    #icon-add
  • ranking
    #icon-ranking
  • del
    #icon-del
  • love
    #icon-love1
  • list
    #icon-list
  • 优酷
    #icon-youku
  • 随机
    #icon-suiji
  • 综艺
    #icon-zongyi
  • refresh
    #icon-refresh1
  • 报错
    #icon-baocuo
  • search
    #icon-search
  • 点踩
    #icon-diancai
  • round_rank_fill
    #icon-round_rank_fill
  • 评论
    #icon-pinglun
  • share
    #icon-share
  • 倍智观点
    #icon-msg
  • 对号
    #icon-duihao
  • list
    #icon-list1
  • 返回顶部
    #icon-fanhuidingbu
  • 点赞_块
    #icon-dianzan_kuai
  • 通知
    #icon-tongzhi1
  • del
    #icon-del1
  • zan
    #icon-zan
  • guanbi
    #icon-guanbi
  • B-评分
    #icon-B-pingfen
  • dropdown_arrow_down
    #icon-dropdown_arrow_down
  • 腾讯视频1
    #icon-tengxunshipin
  • goright
    #icon-goright
  • add
    #icon-add1
  • 通知
    #icon-tongzhi2
  • 点踩
    #icon-diancai1
  • 分享
    #icon-fenxiang1
  • add
    #icon-add2
  • 通知
    #icon-tongzhi4
  • love
    #icon-love2
  • 爱心
    #icon-aixin
  • 点赞
    #icon-dianzan
  • 爱心
    #icon-aixin1
  • 点赞
    #icon-dianzan1
  • search
    #icon-search1
  • bg-history
    #icon-bg-history
  • msg3
    #icon-icon-test
  • 优酷会员
    #icon-youkuhuiyuan
  • zan-fill
    #icon-tubiaozhizuomoban-
  • 日间
    #icon-rijian
  • gengduo
    #icon-gengduo
  • msg3
    #icon-msg31
  • 综艺
    #icon-zongyi1
  • 抖音
    #icon-douyin
  • 快手
    #icon-kuaishou
  • close
    #icon-close
  • refresh-copy
    #icon-refresh-copy
  • full_screen_full
    #icon-full_screen_full
  • 分 享
    #icon-fenxiang2
  • icon求片反馈
    #icon-iconqiupianfankui
  • 日间
    #icon-rijian1
  • 综艺
    #icon-zongyi2
  • 抖音
    #icon-douyin1
  • goTop
    #icon-goTop
  • 更多
    #icon-gengduo1
  • user set-line
    #icon-a-userset-line
  • User certification-outlined
    #icon-a-Usercertification-outlined
  • 排行榜
    #icon-paihangbang
  • topping
    #icon-topping
  • 腾讯视频
    #icon-tengxunshipin1
  • 优酷
    #icon-youku1
  • forward-arrow-direction-move-arrows
    #icon-forward-arrow-direction-move-arrows
  • top
    #icon-top1
  • md-refresh Copy 2
    #icon-a-md-refreshCopy2
  • hot-for-atmosphere
    #icon-hot-for-atmosphere
  • topping
    #icon-topping1
  • topping
    #icon-topping2
  • 跟多
    #icon-gengduo2
  • Topping
    #icon-Topping
  • pingfen
    #icon-pingfen
  • 白天
    #icon-baitian
  • 抖音账号
    #icon-douyinzhanghao
  • 快手
    #icon-kuaishou1
  • ic_ ranking
    #icon-a-ic_ranking
  • 动漫
    #icon-dongman
  • arrow-down-2--down-move-arrow-arrows
    #icon-arrow-down-2--down-move-arrow-arrows
  • arrow-down-2--down-move-arrow-arrows-copy
    #icon-arrow-down-2--down-move-arrow-arrows1
  • Refresh Copy
    #icon-a-RefreshCopy
  • mti-晴-夜间
    #icon-mti-qing-yejian
  • mti-晴-夜间
    #icon-mti-qing-yejian1
  • 播放icon
    #icon-bofangicon
  • 图片icon
    #icon-tupianicon
  • 暂停icon
    #icon-zantingicon
  • 退出
    #icon-tuichu
  • 问号
    #icon-wenhao
  • 评分(线)
    #icon-a-pingfenxian
  • 评分(面)
    #icon-a-pingfenmian
  • 账户
    #icon-zhanghu
  • 收起
    #icon-shouqi
  • 展开
    #icon-zhankai
  • 关闭(线)
    #icon-a-guanbixian
  • 朗读
    #icon-langdu
  • 隐藏
    #icon-yincang
  • 刷新
    #icon-shuaxin
  • 电视剧
    #icon-dianshiju
  • 用户
    #icon-yonghu
  • 电影
    #icon-dianying
  • 电影
    #icon-dianying1
  • home-filling
    #icon-home-filling
  • APP下载
    #icon-APPxiazai
  • B站
    #icon-Bzhan
  • app下载
    #icon-appxiazai
  • 短剧
    #icon-duanju
  • 短剧_剧场
    #icon-duanju_juchang

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>