• 新浪网
    
  • duck
    
  • miji
    
  • sougou
    
  • yahoo
    
  • bing
    
  • 狗狗
    
  • icon_百度logo
    
  • social_naver
    
  • 简书
    
  • CN_V2EX
    
  • 吾爱淘
    
  • 史莱姆
    
  • 安卓
    
  • 云播
    
  • 网易
    
  • 云邮箱
    
  • S
    
  • pingup
    
  • 导航
    
  • 工具
    
  • 播放
    
  • 搜索
    
  • iconfont
    
  • 购物车
    
  • 自定义类目
    
  • 视频
    
  • 剪切
    
  • V
    
  • 字幕
    
  • bili
    
  • 豆瓣
    
  • msg_1
    
  • 9.9
    
  • baidu_yun_1193372_easyicon.net
    
  • 网络1
    
  • ip
    
  • 解锁
    
  • huaban
    
  • github
    
  • pinterest
    
  • 微博
    
  • 优惠券
    
  • 聚划算
    
  • gmail
    
  • windows
    
  • emi纸飞机
    
  • h5
    
  • 论坛选择
    
  • 邮箱
    
  • 爱奇艺
    
  • 控制
    
  • twitter
    
  • 网络
    
  • behance
    
  • 站酷
    
  • amazon
    
  • eye
    
  • 操作-翻译
    
  • CN_acfun.tv
    
  • 特卖
    
  • youtube
    
  • feedly
    
  • jsfiddle
    
  • codepen
    
  • 京东_1
    
  • 淘宝_1
    
  • 控制台
    
  • 导航
    
  • 曲线
    
  • QQ
    
  • code library-fill
    
  • instagram
    
  • 飞机
    
  • 音乐
    
  • 纸飞机
    
  • theater-masks
    
  • font-awesome
    
  • 腾讯视频
    
  • 电视
    
  • 共享
    
  • dribbble-circle
    
  • google
    
  • 教程
    
  • cloud-fill
    
  • markdown-fill
    
  • facebook
    
  • 严选
    
  • 苏宁易购
    
  • 知乎
    
  • 当当网
    

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

  • 新浪网
    .icon-xinlangwang
  • duck
    .icon-duck
  • miji
    .icon-miji
  • sougou
    .icon-sougou
  • yahoo
    .icon-yahoo
  • bing
    .icon-bing
  • 狗狗
    .icon-gougou
  • icon_百度logo
    .icon-icon_baidulogo
  • social_naver
    .icon-icon-test
  • 简书
    .icon-jianshu
  • CN_V2EX
    .icon-v2ex
  • 吾爱淘
    .icon-wat
  • 史莱姆
    .icon-shilaimu
  • 安卓
    .icon-anzhuo
  • 云播
    .icon-yunbo
  • 网易
    .icon-wangyi
  • 云邮箱
    .icon-yunyouxiang
  • S
    .icon-S
  • pingup
    .icon-pingup
  • 导航
    .icon-daohang1
  • 工具
    .icon-ai-tool
  • 播放
    .icon-youku
  • 搜索
    .icon-sousuo
  • iconfont
    .icon-iconfont
  • 购物车
    .icon-gouwuche
  • 自定义类目
    .icon-wode
  • 视频
    .icon-shipin
  • 剪切
    .icon-sheji
  • V
    .icon-V
  • 字幕
    .icon-zimu
  • bili
    .icon-bili
  • 豆瓣
    .icon-douban
  • msg_1
    .icon-msg
  • 9.9
    .icon-99
  • baidu_yun_1193372_easyicon.net
    .icon-baiduyun
  • 网络1
    .icon-wangluo1
  • ip
    .icon-ip
  • 解锁
    .icon-jshunxiao
  • huaban
    .icon-huaban
  • github
    .icon-github
  • pinterest
    .icon-pinterest
  • 微博
    .icon-weibo
  • 优惠券
    .icon-youhuiquan
  • 聚划算
    .icon-juhuasuan
  • gmail
    .icon-gmail
  • windows
    .icon-windows
  • emi纸飞机
    .icon-emizhifeiji
  • h5
    .icon-h5
  • 论坛选择
    .icon-bolezaixian
  • 邮箱
    .icon-youxiang
  • 爱奇艺
    .icon-aiqiyi
  • 控制
    .icon-kongzhi
  • twitter
    .icon-twitter
  • 网络
    .icon-wangluo
  • behance
    .icon-behance
  • 站酷
    .icon-zhanku
  • amazon
    .icon-amazon
  • eye
    .icon-eye
  • 操作-翻译
    .icon-fanyi
  • CN_acfun.tv
    .icon-acfun
  • 特卖
    .icon-temai
  • youtube
    .icon-youtube
  • feedly
    .icon-feedly
  • jsfiddle
    .icon-cdnjs
  • codepen
    .icon-codepen
  • 京东_1
    .icon-jingdong
  • 淘宝_1
    .icon-taobao
  • 控制台
    .icon-kongzhitai
  • 导航
    .icon-daohang
  • 曲线
    .icon-quxian
  • QQ
    .icon-QQ
  • code library-fill
    .icon-base64
  • instagram
    .icon-instagram
  • 飞机
    .icon-feiji
  • 音乐
    .icon-yinle
  • 纸飞机
    .icon-zhifeiji
  • theater-masks
    .icon-theater-masks
  • font-awesome
    .icon-font-awesome
  • 腾讯视频
    .icon-tengxunshipin
  • 电视
    .icon-dianshi
  • 共享
    .icon-gongxiang
  • dribbble-circle
    .icon-dribbble
  • google
    .icon-google
  • 教程
    .icon-jiaocheng
  • cloud-fill
    .icon-cloudflare
  • markdown-fill
    .icon-md
  • facebook
    .icon-facebook
  • 严选
    .icon-yanxuan
  • 苏宁易购
    .icon-suning
  • 知乎
    .icon-zhihu
  • 当当网
    .icon-dangdang

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont icon-xxx"></span>

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

  • 新浪网
    #icon-xinlangwang
  • duck
    #icon-duck
  • miji
    #icon-miji
  • sougou
    #icon-sougou
  • yahoo
    #icon-yahoo
  • bing
    #icon-bing
  • 狗狗
    #icon-gougou
  • icon_百度logo
    #icon-icon_baidulogo
  • social_naver
    #icon-icon-test
  • 简书
    #icon-jianshu
  • CN_V2EX
    #icon-v2ex
  • 吾爱淘
    #icon-wat
  • 史莱姆
    #icon-shilaimu
  • 安卓
    #icon-anzhuo
  • 云播
    #icon-yunbo
  • 网易
    #icon-wangyi
  • 云邮箱
    #icon-yunyouxiang
  • S
    #icon-S
  • pingup
    #icon-pingup
  • 导航
    #icon-daohang1
  • 工具
    #icon-ai-tool
  • 播放
    #icon-youku
  • 搜索
    #icon-sousuo
  • iconfont
    #icon-iconfont
  • 购物车
    #icon-gouwuche
  • 自定义类目
    #icon-wode
  • 视频
    #icon-shipin
  • 剪切
    #icon-sheji
  • V
    #icon-V
  • 字幕
    #icon-zimu
  • bili
    #icon-bili
  • 豆瓣
    #icon-douban
  • msg_1
    #icon-msg
  • 9.9
    #icon-99
  • baidu_yun_1193372_easyicon.net
    #icon-baiduyun
  • 网络1
    #icon-wangluo1
  • ip
    #icon-ip
  • 解锁
    #icon-jshunxiao
  • huaban
    #icon-huaban
  • github
    #icon-github
  • pinterest
    #icon-pinterest
  • 微博
    #icon-weibo
  • 优惠券
    #icon-youhuiquan
  • 聚划算
    #icon-juhuasuan
  • gmail
    #icon-gmail
  • windows
    #icon-windows
  • emi纸飞机
    #icon-emizhifeiji
  • h5
    #icon-h5
  • 论坛选择
    #icon-bolezaixian
  • 邮箱
    #icon-youxiang
  • 爱奇艺
    #icon-aiqiyi
  • 控制
    #icon-kongzhi
  • twitter
    #icon-twitter
  • 网络
    #icon-wangluo
  • behance
    #icon-behance
  • 站酷
    #icon-zhanku
  • amazon
    #icon-amazon
  • eye
    #icon-eye
  • 操作-翻译
    #icon-fanyi
  • CN_acfun.tv
    #icon-acfun
  • 特卖
    #icon-temai
  • youtube
    #icon-youtube
  • feedly
    #icon-feedly
  • jsfiddle
    #icon-cdnjs
  • codepen
    #icon-codepen
  • 京东_1
    #icon-jingdong
  • 淘宝_1
    #icon-taobao
  • 控制台
    #icon-kongzhitai
  • 导航
    #icon-daohang
  • 曲线
    #icon-quxian
  • QQ
    #icon-QQ
  • code library-fill
    #icon-base64
  • instagram
    #icon-instagram
  • 飞机
    #icon-feiji
  • 音乐
    #icon-yinle
  • 纸飞机
    #icon-zhifeiji
  • theater-masks
    #icon-theater-masks
  • font-awesome
    #icon-font-awesome
  • 腾讯视频
    #icon-tengxunshipin
  • 电视
    #icon-dianshi
  • 共享
    #icon-gongxiang
  • dribbble-circle
    #icon-dribbble
  • google
    #icon-google
  • 教程
    #icon-jiaocheng
  • cloud-fill
    #icon-cloudflare
  • markdown-fill
    #icon-md
  • facebook
    #icon-facebook
  • 严选
    #icon-yanxuan
  • 苏宁易购
    #icon-suning
  • 知乎
    #icon-zhihu
  • 当当网
    #icon-dangdang

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>