• outlook_48x1
    
  • Gmail
    
  • 网易
    
  • 人人
    
  • ico_运营管理_员工信息查询
    
  • w3c
    
  • 17-熊猫
    
  • 办公
    
  • 搜索
    
  • 视频
    
  • 工具
    
  • 8_3前端开发
    
  • 9_5社区论坛
    
  • 图灵云logo
    
  • segmentfault
    
  • SKY
    
  • 掘金
    
  • 吾爱破解
    
  • 微软
    
  • file_type_vscode
    
  • jetbrains
    
  • apk
    
  • 阿里云
    
  • 七牛云
    
  • 工具
    
  • 云存储
    
  • tool
    
  • firefox
    
  • 花瓣网
    
  • 阿里星球
    
  • 写作
    
  • latex
    
  • 笔记
    
  • 虎牙直播
    
  • 斗鱼TV
    
  • 方企鹅电竞
    
  • 爱奇艺
    
  • bilibili
    
  • 字幕
    
  • youtube
    
  • google
    
  • 百度
    
  • 微博
    
  • GitHub
    
  • 百度贴吧
    
  • 微信
    
  • cloudflare
    
  • 腾讯云
    
  • APK
    
  • 优酷
    
  • 腾讯视频
    
  • 百度网盘
    
  • 坚果
    
  • LeetCode
    
  • 在线编辑
    
  • 存储
    
  • 02-奶牛
    
  • 语雀 logo
    
  • 设计
    
  • 搜索
    
  • 工具
    
  • 论坛选择
    
  • 视频
    
  • 开发
    

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

  • outlook_48x1
    .icon-outlook_x
  • Gmail
    .icon-Gmail
  • 网易
    .icon-wangyi
  • 人人
    .icon-renren
  • ico_运营管理_员工信息查询
    .icon-ico_yunyingguanli_yuangongxinxichaxun
  • w3c
    .icon-wc
  • 17-熊猫
    .icon--xiongmao
  • 办公
    .icon-bangong
  • 搜索
    .icon-sousuo1
  • 视频
    .icon-shipin1
  • 工具
    .icon-caozuojiemiantubiao---_gongju
  • 8_3前端开发
    .icon-_qianduankaifa
  • 9_5社区论坛
    .icon-_shequluntan
  • 图灵云logo
    .icon-tulingyunlogo
  • segmentfault
    .icon-iconsf-copy
  • SKY
    .icon-SKY
  • 掘金
    .icon-juejin
  • 吾爱破解
    .icon-wuaipojie
  • 微软
    .icon-weiruan
  • file_type_vscode
    .icon-file_type_vscode
  • jetbrains
    .icon-jetbrains
  • apk
    .icon-apk
  • 阿里云
    .icon-aliyun
  • 七牛云
    .icon-qiniuyun
  • 工具
    .icon-gongju
  • 云存储
    .icon-yuncunchu
  • tool
    .icon-idrex
  • firefox
    .icon-huohuliulanqifirefox
  • 花瓣网
    .icon-huabanwang
  • 阿里星球
    .icon-alixingqiu
  • 写作
    .icon-xiezuo
  • latex
    .icon-tianjiagongshi
  • 笔记
    .icon-biji
  • 虎牙直播
    .icon-huyazhibo
  • 斗鱼TV
    .icon-douyuTV
  • 方企鹅电竞
    .icon-fangqiedianjing
  • 爱奇艺
    .icon-aiqiyi
  • bilibili
    .icon-bilibili
  • 字幕
    .icon-zimu
  • youtube
    .icon-youtube
  • google
    .icon-google
  • 百度
    .icon-baidu
  • 微博
    .icon-weibo
  • GitHub
    .icon-gitHub
  • 百度贴吧
    .icon-baidutieba
  • 微信
    .icon-weixin
  • cloudflare
    .icon-cloudflare
  • 腾讯云
    .icon-tengxunyun
  • APK
    .icon-APK
  • 优酷
    .icon-youku
  • 腾讯视频
    .icon-tengxunshipin
  • 百度网盘
    .icon-baiduwangpan
  • 坚果
    .icon-jianguo
  • LeetCode
    .icon-LeetCode
  • 在线编辑
    .icon-zaixianbianji
  • 存储
    .icon-cunchu
  • 02-奶牛
    .icon--nainiu
  • 语雀 logo
    .icon-yuquemianlogo
  • 设计
    .icon-sheji
  • 搜索
    .icon-sousuo
  • 工具
    .icon-ai-tool
  • 论坛选择
    .icon-luntanxuanze
  • 视频
    .icon-shipin
  • 开发
    .icon-kaifa

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

  • outlook_48x1
    #icon-outlook_x
  • Gmail
    #icon-Gmail
  • 网易
    #icon-wangyi
  • 人人
    #icon-renren
  • ico_运营管理_员工信息查询
    #icon-ico_yunyingguanli_yuangongxinxichaxun
  • w3c
    #icon-wc
  • 17-熊猫
    #icon--xiongmao
  • 办公
    #icon-bangong
  • 搜索
    #icon-sousuo1
  • 视频
    #icon-shipin1
  • 工具
    #icon-caozuojiemiantubiao---_gongju
  • 8_3前端开发
    #icon-_qianduankaifa
  • 9_5社区论坛
    #icon-_shequluntan
  • 图灵云logo
    #icon-tulingyunlogo
  • segmentfault
    #icon-iconsf-copy
  • SKY
    #icon-SKY
  • 掘金
    #icon-juejin
  • 吾爱破解
    #icon-wuaipojie
  • 微软
    #icon-weiruan
  • file_type_vscode
    #icon-file_type_vscode
  • jetbrains
    #icon-jetbrains
  • apk
    #icon-apk
  • 阿里云
    #icon-aliyun
  • 七牛云
    #icon-qiniuyun
  • 工具
    #icon-gongju
  • 云存储
    #icon-yuncunchu
  • tool
    #icon-idrex
  • firefox
    #icon-huohuliulanqifirefox
  • 花瓣网
    #icon-huabanwang
  • 阿里星球
    #icon-alixingqiu
  • 写作
    #icon-xiezuo
  • latex
    #icon-tianjiagongshi
  • 笔记
    #icon-biji
  • 虎牙直播
    #icon-huyazhibo
  • 斗鱼TV
    #icon-douyuTV
  • 方企鹅电竞
    #icon-fangqiedianjing
  • 爱奇艺
    #icon-aiqiyi
  • bilibili
    #icon-bilibili
  • 字幕
    #icon-zimu
  • youtube
    #icon-youtube
  • google
    #icon-google
  • 百度
    #icon-baidu
  • 微博
    #icon-weibo
  • GitHub
    #icon-gitHub
  • 百度贴吧
    #icon-baidutieba
  • 微信
    #icon-weixin
  • cloudflare
    #icon-cloudflare
  • 腾讯云
    #icon-tengxunyun
  • APK
    #icon-APK
  • 优酷
    #icon-youku
  • 腾讯视频
    #icon-tengxunshipin
  • 百度网盘
    #icon-baiduwangpan
  • 坚果
    #icon-jianguo
  • LeetCode
    #icon-LeetCode
  • 在线编辑
    #icon-zaixianbianji
  • 存储
    #icon-cunchu
  • 02-奶牛
    #icon--nainiu
  • 语雀 logo
    #icon-yuquemianlogo
  • 设计
    #icon-sheji
  • 搜索
    #icon-sousuo
  • 工具
    #icon-ai-tool
  • 论坛选择
    #icon-luntanxuanze
  • 视频
    #icon-shipin
  • 开发
    #icon-kaifa

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>