• 地址
    
  • 邮箱
    
  • 地球
    
  • 二维码
    
  • 留言
    
  • 微信
    
  • 箭头线右
    
  • 箭头线上
    
  • 箭头线下
    
  • 箭头线左
    
  • 响应式
    
  • 推广
    
  • 售后
    
  • 台式机
    
  • 手机
    
  • 平板
    
  • 笔记本
    
  • 荣誉
    
  • 工厂
    
  • 到底
    
  • 到顶
    
  • 沙发
    
  • 铅笔
    
  • 树叶
    
  • 用户
    
  • 合作
    
  • 齿轮
    
  • 公司
    
  • 程序
    
  • 链接
    
  • 粉刷
    
  • 主意
    
  • 油漆
    
  • 图片
    
  • 户外AD
    
  • 录像
    
  • 温度计
    
  • 热流道
    
  • 卫星
    
  • 科学
    
  • 设备
    
  • 桉树
    
  • 松树
    
  • 飞机
    
  • 箱子
    
  • 文档
    
  • 箭头下
    
  • 箭头上
    
  • 画板
    
  • 通话
    
  • 电话
    
  • 眼睛
    
  • 听诊器
    
  • 盾牌
    
  • 组织
    
  • 传真
    
  • 旗帜
    
  • 钻石
    
  • 定制
    
  • 地图
    
  • 五星
    
  • 爱心
    
  • 时间
    
  • QQ
    
  • 列表
    
  • 标签
    
  • 搜索
    
  • 长箭头右
    
  • 发展
    
  • 播放
    
  • 钱袋
    
  • 专利
    
  • 证书
    
  • 鼠标
    
  • 汽车
    
  • 衣服
    
  • 锥形瓶
    
  • 政府
    
  • 钱包
    
  • 食物
    
  • 胶囊
    
  • 分类
    
  • 垃圾桶
    
  • 微博
    
  • QQ空间
    
  • 
  • 文献
    
  • 纸张
    
  • 退出
    
  • 首页
    
  • 芯片
    
  • 新能源
    
  • 自动化
    
  • 阿里旺旺
    
  • 机器人
    
  • 尾气
    
  • 除尘
    
  • 箭头左
    
  • 箭头右
    
  • 购物车
    
  • 轮胎
    
  • 烟草
    
  • 家电
    
  • 生鲜
    
  • 超市
    
  • 分享
    
  • 返回
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.ttf?t=1653486378073') 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-dizhi
  • 邮箱
    .icon-youxiang
  • 地球
    .icon-diqiu
  • 二维码
    .icon-erweima
  • 留言
    .icon-liuyan
  • 微信
    .icon-weixin
  • 箭头线右
    .icon-youjiantou
  • 箭头线上
    .icon-shangjiantou
  • 箭头线下
    .icon-xiajiantou
  • 箭头线左
    .icon-zuojiantou
  • 响应式
    .icon-xiangyingshi
  • 推广
    .icon-tuiguang
  • 售后
    .icon-shouhou
  • 台式机
    .icon-taishiji
  • 手机
    .icon-shouji
  • 平板
    .icon-pingban
  • 笔记本
    .icon-bijiben
  • 荣誉
    .icon-rongyu
  • 工厂
    .icon-gongchang
  • 到底
    .icon-daodi
  • 到顶
    .icon-daoding
  • 沙发
    .icon-shafa
  • 铅笔
    .icon-qianbi
  • 树叶
    .icon-shuye
  • 用户
    .icon-yonghu
  • 合作
    .icon-hezuo
  • 齿轮
    .icon-chilun
  • 公司
    .icon-gongsi
  • 程序
    .icon-chengxu
  • 链接
    .icon-lianjie
  • 粉刷
    .icon-fenshua
  • 主意
    .icon-zhuyi
  • 油漆
    .icon-youqi
  • 图片
    .icon-tupian
  • 户外AD
    .icon-huwaiAD
  • 录像
    .icon-luxiang
  • 温度计
    .icon-wenduji
  • 热流道
    .icon-reliudao
  • 卫星
    .icon-weixing
  • 科学
    .icon-kexue
  • 设备
    .icon-shebei
  • 桉树
    .icon-anshu
  • 松树
    .icon-songshu
  • 飞机
    .icon-feiji
  • 箱子
    .icon-xiangzi
  • 文档
    .icon-wendang
  • 箭头下
    .icon-jiantouxia
  • 箭头上
    .icon-jiantoushang
  • 画板
    .icon-huaban
  • 通话
    .icon-tonghua
  • 电话
    .icon-dianhua
  • 眼睛
    .icon-yanjing
  • 听诊器
    .icon-tingzhenqi
  • 盾牌
    .icon-dunpai
  • 组织
    .icon-zuzhi
  • 传真
    .icon-chuanzhen
  • 旗帜
    .icon-qizhi
  • 钻石
    .icon-zuanshi
  • 定制
    .icon-dingzhi
  • 地图
    .icon-ditu
  • 五星
    .icon-wuxing
  • 爱心
    .icon-aixin
  • 时间
    .icon-shijian
  • QQ
    .icon-QQ
  • 列表
    .icon-liebiao
  • 标签
    .icon-biaoqian
  • 搜索
    .icon-sousuo
  • 长箭头右
    .icon-changjiantouyou
  • 发展
    .icon-fazhan
  • 播放
    .icon-bofang
  • 钱袋
    .icon-qiandai
  • 专利
    .icon-zhuanli
  • 证书
    .icon-zhengshu
  • 鼠标
    .icon-shubiao
  • 汽车
    .icon-qiche
  • 衣服
    .icon-yifu
  • 锥形瓶
    .icon-zhuixingping
  • 政府
    .icon-zhengfu
  • 钱包
    .icon-qianbao
  • 食物
    .icon-shiwu
  • 胶囊
    .icon-jiaonang
  • 分类
    .icon-fenlei
  • 垃圾桶
    .icon-lajitong
  • 微博
    .icon-weibo
  • QQ空间
    .icon-QQkongjian
  • .icon-suo
  • 文献
    .icon-wenxian
  • 纸张
    .icon-zhizhang
  • 退出
    .icon-tuichu
  • 首页
    .icon-shouye
  • 芯片
    .icon-xinpian
  • 新能源
    .icon-xinnengyuan
  • 自动化
    .icon-zidonghua
  • 阿里旺旺
    .icon-aliwangwang
  • 机器人
    .icon-jiqiren
  • 尾气
    .icon-weiqi
  • 除尘
    .icon-chuchen
  • 箭头左
    .icon-jiantouzuo
  • 箭头右
    .icon-jiantouyou
  • 购物车
    .icon-gouwuche
  • 轮胎
    .icon-luntai
  • 烟草
    .icon-yancao
  • 家电
    .icon-jiadian
  • 生鲜
    .icon-shengxian
  • 超市
    .icon-chaoshi
  • 分享
    .icon-fenxiang
  • 返回
    .icon-fanhui

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-dizhi
  • 邮箱
    #icon-youxiang
  • 地球
    #icon-diqiu
  • 二维码
    #icon-erweima
  • 留言
    #icon-liuyan
  • 微信
    #icon-weixin
  • 箭头线右
    #icon-youjiantou
  • 箭头线上
    #icon-shangjiantou
  • 箭头线下
    #icon-xiajiantou
  • 箭头线左
    #icon-zuojiantou
  • 响应式
    #icon-xiangyingshi
  • 推广
    #icon-tuiguang
  • 售后
    #icon-shouhou
  • 台式机
    #icon-taishiji
  • 手机
    #icon-shouji
  • 平板
    #icon-pingban
  • 笔记本
    #icon-bijiben
  • 荣誉
    #icon-rongyu
  • 工厂
    #icon-gongchang
  • 到底
    #icon-daodi
  • 到顶
    #icon-daoding
  • 沙发
    #icon-shafa
  • 铅笔
    #icon-qianbi
  • 树叶
    #icon-shuye
  • 用户
    #icon-yonghu
  • 合作
    #icon-hezuo
  • 齿轮
    #icon-chilun
  • 公司
    #icon-gongsi
  • 程序
    #icon-chengxu
  • 链接
    #icon-lianjie
  • 粉刷
    #icon-fenshua
  • 主意
    #icon-zhuyi
  • 油漆
    #icon-youqi
  • 图片
    #icon-tupian
  • 户外AD
    #icon-huwaiAD
  • 录像
    #icon-luxiang
  • 温度计
    #icon-wenduji
  • 热流道
    #icon-reliudao
  • 卫星
    #icon-weixing
  • 科学
    #icon-kexue
  • 设备
    #icon-shebei
  • 桉树
    #icon-anshu
  • 松树
    #icon-songshu
  • 飞机
    #icon-feiji
  • 箱子
    #icon-xiangzi
  • 文档
    #icon-wendang
  • 箭头下
    #icon-jiantouxia
  • 箭头上
    #icon-jiantoushang
  • 画板
    #icon-huaban
  • 通话
    #icon-tonghua
  • 电话
    #icon-dianhua
  • 眼睛
    #icon-yanjing
  • 听诊器
    #icon-tingzhenqi
  • 盾牌
    #icon-dunpai
  • 组织
    #icon-zuzhi
  • 传真
    #icon-chuanzhen
  • 旗帜
    #icon-qizhi
  • 钻石
    #icon-zuanshi
  • 定制
    #icon-dingzhi
  • 地图
    #icon-ditu
  • 五星
    #icon-wuxing
  • 爱心
    #icon-aixin
  • 时间
    #icon-shijian
  • QQ
    #icon-QQ
  • 列表
    #icon-liebiao
  • 标签
    #icon-biaoqian
  • 搜索
    #icon-sousuo
  • 长箭头右
    #icon-changjiantouyou
  • 发展
    #icon-fazhan
  • 播放
    #icon-bofang
  • 钱袋
    #icon-qiandai
  • 专利
    #icon-zhuanli
  • 证书
    #icon-zhengshu
  • 鼠标
    #icon-shubiao
  • 汽车
    #icon-qiche
  • 衣服
    #icon-yifu
  • 锥形瓶
    #icon-zhuixingping
  • 政府
    #icon-zhengfu
  • 钱包
    #icon-qianbao
  • 食物
    #icon-shiwu
  • 胶囊
    #icon-jiaonang
  • 分类
    #icon-fenlei
  • 垃圾桶
    #icon-lajitong
  • 微博
    #icon-weibo
  • QQ空间
    #icon-QQkongjian
  • #icon-suo
  • 文献
    #icon-wenxian
  • 纸张
    #icon-zhizhang
  • 退出
    #icon-tuichu
  • 首页
    #icon-shouye
  • 芯片
    #icon-xinpian
  • 新能源
    #icon-xinnengyuan
  • 自动化
    #icon-zidonghua
  • 阿里旺旺
    #icon-aliwangwang
  • 机器人
    #icon-jiqiren
  • 尾气
    #icon-weiqi
  • 除尘
    #icon-chuchen
  • 箭头左
    #icon-jiantouzuo
  • 箭头右
    #icon-jiantouyou
  • 购物车
    #icon-gouwuche
  • 轮胎
    #icon-luntai
  • 烟草
    #icon-yancao
  • 家电
    #icon-jiadian
  • 生鲜
    #icon-shengxian
  • 超市
    #icon-chaoshi
  • 分享
    #icon-fenxiang
  • 返回
    #icon-fanhui

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>