• 点赞(1)
    
  • 点赞
    
  • comment-o
    
  • commenting-o
    
  • sort-asc
    
  • sort-down
    
  • sort
    
  • environment
    
  • message
    
  • phone
    
  • qrcode
    
  • add
    
  • check2
    
  • clear
    
  • cross
    
  • exit-to-app
    
  • loader
    
  • minus
    
  • query-builder
    
  • plus
    
  • remove
    
  • eye
    
  • cloud
    
  • eye-close
    
  • 作者
    
  • 栏目
    
  • 时间 (4)
    
  • 时间
    
  • 时 间
    
  • 栏目0
    
  • top
    
  • 留言
    
  • 账户中心
    
  • 账户中心
    
  • cart
    
  • like_fill
    
  • like
    
  • shop
    
  • home
    
  • people
    
  • home
    
  • pencil-square
    
  • shopping-cart
    
  • trash-o
    
  • user
    
  • bum_logo
    
  • mubang
    
  • bell-slash-o
    
  • bell-o
    
  • dollar
    
  • edit
    
  • paper-plane
    
  • pencil
    
  • print
    
  • 慕课网
    
  • 网易公开课
    
  • 网易云课堂
    
  • 爱奇艺
    
  • 虎课网
    
  • 小火山视频
    
  • 360
    
  • 西瓜视频
    
  • bilibili
    
  • 知乎
    
  • 简书
    
  • csdn博客
    
  • 抖音
    
  • 百度
    
  • 腾讯视频
    
  • 支付平台-微信
    
  • wechat
    
  • qq
    
  • 凤凰网
    
  • 支付宝
    
  • 大鱼号-nh
    
  • 百家号
    
  • 一点号
    
  • 头条
    
  • 网易
    
  • 搜狐号
    
  • json
    
  • js
    
  • linux
    
  • Api
    
  • 联通logo
    
  • 电信logo
    
  • 移动logo
    
  • redis
    
  • apache
    
  • 微信支付
    
  • nginx
    
  • php
    
  • AK-SR_支付宝
    
  • fingerprint
    
  • vuejs
    
  • 
  • 
  • 
  • 
  • logo-css3
    
  • mysql
    
  • like-h
    
  • like
    
  • 对号
    
  • 加载
    
  • aliyun
    
  • menu
    
  • search
    
  • setting
    
  • unordered-list
    
  • wechat
    
  • logo-html5
    
  • logo-windows
    
  • apple
    
  • android
    
  • bug
    
  • edge
    
  • github-square
    
  • git-square
    
  • get-pocket
    
  • language
    
  • quote-right
    
  • quote-left
    
  • star-o
    
  • star
    
  • chrome
    
  • icon_centos
    
  • sass
    
  • vscode
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1630927352362') format('woff2'),
       url('iconfont.woff?t=1630927352362') format('woff'),
       url('iconfont.ttf?t=1630927352362') 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"。

  • 点赞(1)
    .icon-dianzan1
  • 点赞
    .icon-dianzan
  • comment-o
    .icon-comment-o
  • commenting-o
    .icon-commenting-o
  • sort-asc
    .icon-sort-asc
  • sort-down
    .icon-sort-down
  • sort
    .icon-sort
  • environment
    .icon-environment
  • message
    .icon-message
  • phone
    .icon-phone
  • qrcode
    .icon-qrcode
  • add
    .icon-add
  • check2
    .icon-check
  • clear
    .icon-clear
  • cross
    .icon-cross
  • exit-to-app
    .icon-exittoapp
  • loader
    .icon-loader
  • minus
    .icon-minus
  • query-builder
    .icon-querybuilder
  • plus
    .icon-plus
  • remove
    .icon-remove
  • eye
    .icon-eye1
  • cloud
    .icon-cloud
  • eye-close
    .icon-eye-close
  • 作者
    .icon-zuozhe
  • 栏目
    .icon-lanmu
  • 时间 (4)
    .icon-shijian
  • 时间
    .icon-shijian1
  • 时 间
    .icon-shijian3
  • 栏目0
    .icon-lanmu0
  • top
    .icon-fanhuidingbu
  • 留言
    .icon-liuyan2
  • 账户中心
    .icon-zhanghuzhongxin
  • 账户中心
    .icon-zhanghuzhongxin1
  • cart
    .icon-cart
  • like_fill
    .icon-likefill
  • like
    .icon-like1
  • shop
    .icon-shop
  • home
    .icon-home1
  • people
    .icon-people
  • home
    .icon-home
  • pencil-square
    .icon-pencil-square
  • shopping-cart
    .icon-shopping-cart
  • trash-o
    .icon-trash-o
  • user
    .icon-user
  • bum_logo
    .icon-bum
  • mubang
    .icon-mubang
  • bell-slash-o
    .icon-bell-slash-o
  • bell-o
    .icon-bell-o
  • dollar
    .icon-dollar
  • edit
    .icon-edit
  • paper-plane
    .icon-paper-plane
  • pencil
    .icon-pencil
  • print
    .icon-print
  • 慕课网
    .icon-mukewang
  • 网易公开课
    .icon-wangyigongkaike
  • 网易云课堂
    .icon-xingzhuang
  • 爱奇艺
    .icon-aiqiyi
  • 虎课网
    .icon-tubiaozhizuomoban
  • 小火山视频
    .icon-huoshan
  • 360
    .icon-icon-test
  • 西瓜视频
    .icon-xiguashipin
  • bilibili
    .icon-bilibili
  • 知乎
    .icon-zhihu
  • 简书
    .icon-jianshu
  • csdn博客
    .icon-csdn
  • 抖音
    .icon-douyin
  • 百度
    .icon-baidu
  • 腾讯视频
    .icon-tengxunshipin
  • 支付平台-微信
    .icon-zhifupingtai-weixin
  • wechat
    .icon-wechat1
  • qq
    .icon-qq2
  • 凤凰网
    .icon-fenghuangwang
  • 支付宝
    .icon-zhifubao
  • 大鱼号-nh
    .icon-dayuhao-nh
  • 百家号
    .icon-baijia
  • 一点号
    .icon-yidian
  • 头条
    .icon-toutiao
  • 网易
    .icon-mail-netease
  • 搜狐号
    .icon-souhu
  • json
    .icon-json
  • js
    .icon-js
  • linux
    .icon-linux
  • Api
    .icon-Api
  • 联通logo
    .icon-liantonglogo
  • 电信logo
    .icon-dianxinlogo
  • 移动logo
    .icon-yidonglogo
  • redis
    .icon-redis
  • apache
    .icon-apache
  • 微信支付
    .icon-weixinzhifu
  • nginx
    .icon-nginx
  • php
    .icon-php
  • AK-SR_支付宝
    .icon-sr_zhifubao
  • fingerprint
    .icon-fingerprint
  • vuejs
    .icon-vuejs
  • .icon-you
  • .icon-zuo
  • .icon-shang
  • .icon-xia
  • logo-css3
    .icon-logo-css
  • mysql
    .icon-mysql1
  • like-h
    .icon-like-h
  • like
    .icon-like
  • 对号
    .icon-duihao
  • 加载
    .icon-jiazai
  • aliyun
    .icon-aliyun
  • menu
    .icon-menu1
  • search
    .icon-search
  • setting
    .icon-setting
  • unordered-list
    .icon-unordered-list
  • wechat
    .icon-wechat2
  • logo-html5
    .icon-html5
  • logo-windows
    .icon-windows
  • apple
    .icon-apple
  • android
    .icon-android
  • bug
    .icon-bug
  • edge
    .icon-edge
  • github-square
    .icon-github-square
  • git-square
    .icon-git-square
  • get-pocket
    .icon-get-pocket
  • language
    .icon-language
  • quote-right
    .icon-quote-right
  • quote-left
    .icon-quote-left
  • star-o
    .icon-star-o
  • star
    .icon-star1
  • chrome
    .icon-chrome
  • icon_centos
    .icon-icon_centos
  • sass
    .icon-sass
  • vscode
    .icon-vscode

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

  • 点赞(1)
    #icon-dianzan1
  • 点赞
    #icon-dianzan
  • comment-o
    #icon-comment-o
  • commenting-o
    #icon-commenting-o
  • sort-asc
    #icon-sort-asc
  • sort-down
    #icon-sort-down
  • sort
    #icon-sort
  • environment
    #icon-environment
  • message
    #icon-message
  • phone
    #icon-phone
  • qrcode
    #icon-qrcode
  • add
    #icon-add
  • check2
    #icon-check
  • clear
    #icon-clear
  • cross
    #icon-cross
  • exit-to-app
    #icon-exittoapp
  • loader
    #icon-loader
  • minus
    #icon-minus
  • query-builder
    #icon-querybuilder
  • plus
    #icon-plus
  • remove
    #icon-remove
  • eye
    #icon-eye1
  • cloud
    #icon-cloud
  • eye-close
    #icon-eye-close
  • 作者
    #icon-zuozhe
  • 栏目
    #icon-lanmu
  • 时间 (4)
    #icon-shijian
  • 时间
    #icon-shijian1
  • 时 间
    #icon-shijian3
  • 栏目0
    #icon-lanmu0
  • top
    #icon-fanhuidingbu
  • 留言
    #icon-liuyan2
  • 账户中心
    #icon-zhanghuzhongxin
  • 账户中心
    #icon-zhanghuzhongxin1
  • cart
    #icon-cart
  • like_fill
    #icon-likefill
  • like
    #icon-like1
  • shop
    #icon-shop
  • home
    #icon-home1
  • people
    #icon-people
  • home
    #icon-home
  • pencil-square
    #icon-pencil-square
  • shopping-cart
    #icon-shopping-cart
  • trash-o
    #icon-trash-o
  • user
    #icon-user
  • bum_logo
    #icon-bum
  • mubang
    #icon-mubang
  • bell-slash-o
    #icon-bell-slash-o
  • bell-o
    #icon-bell-o
  • dollar
    #icon-dollar
  • edit
    #icon-edit
  • paper-plane
    #icon-paper-plane
  • pencil
    #icon-pencil
  • print
    #icon-print
  • 慕课网
    #icon-mukewang
  • 网易公开课
    #icon-wangyigongkaike
  • 网易云课堂
    #icon-xingzhuang
  • 爱奇艺
    #icon-aiqiyi
  • 虎课网
    #icon-tubiaozhizuomoban
  • 小火山视频
    #icon-huoshan
  • 360
    #icon-icon-test
  • 西瓜视频
    #icon-xiguashipin
  • bilibili
    #icon-bilibili
  • 知乎
    #icon-zhihu
  • 简书
    #icon-jianshu
  • csdn博客
    #icon-csdn
  • 抖音
    #icon-douyin
  • 百度
    #icon-baidu
  • 腾讯视频
    #icon-tengxunshipin
  • 支付平台-微信
    #icon-zhifupingtai-weixin
  • wechat
    #icon-wechat1
  • qq
    #icon-qq2
  • 凤凰网
    #icon-fenghuangwang
  • 支付宝
    #icon-zhifubao
  • 大鱼号-nh
    #icon-dayuhao-nh
  • 百家号
    #icon-baijia
  • 一点号
    #icon-yidian
  • 头条
    #icon-toutiao
  • 网易
    #icon-mail-netease
  • 搜狐号
    #icon-souhu
  • json
    #icon-json
  • js
    #icon-js
  • linux
    #icon-linux
  • Api
    #icon-Api
  • 联通logo
    #icon-liantonglogo
  • 电信logo
    #icon-dianxinlogo
  • 移动logo
    #icon-yidonglogo
  • redis
    #icon-redis
  • apache
    #icon-apache
  • 微信支付
    #icon-weixinzhifu
  • nginx
    #icon-nginx
  • php
    #icon-php
  • AK-SR_支付宝
    #icon-sr_zhifubao
  • fingerprint
    #icon-fingerprint
  • vuejs
    #icon-vuejs
  • #icon-you
  • #icon-zuo
  • #icon-shang
  • #icon-xia
  • logo-css3
    #icon-logo-css
  • mysql
    #icon-mysql1
  • like-h
    #icon-like-h
  • like
    #icon-like
  • 对号
    #icon-duihao
  • 加载
    #icon-jiazai
  • aliyun
    #icon-aliyun
  • menu
    #icon-menu1
  • search
    #icon-search
  • setting
    #icon-setting
  • unordered-list
    #icon-unordered-list
  • wechat
    #icon-wechat2
  • logo-html5
    #icon-html5
  • logo-windows
    #icon-windows
  • apple
    #icon-apple
  • android
    #icon-android
  • bug
    #icon-bug
  • edge
    #icon-edge
  • github-square
    #icon-github-square
  • git-square
    #icon-git-square
  • get-pocket
    #icon-get-pocket
  • language
    #icon-language
  • quote-right
    #icon-quote-right
  • quote-left
    #icon-quote-left
  • star-o
    #icon-star-o
  • star
    #icon-star1
  • chrome
    #icon-chrome
  • icon_centos
    #icon-icon_centos
  • sass
    #icon-sass
  • vscode
    #icon-vscode

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>