• 查找用户
    
  • 全屏
    
  • 放大
    
  • 珠宝饰品
    
  • off
    
  • wordpress
    
  • 搜索放大
    
  • poweroff
    
  • blogger
    
  • 位置
    
  • 邮件
    
  • 谷歌_google114
    
  • UC浏览器
    
  • 百度云
    
  • chrome
    
  • 定位
    
  • 24gf-envelopeWarning
    
  • bg-ie-browser
    
  • 百度
    
  • 百度云
    
  • 字体
    
  • 字体
    
  • 字体
    
  • 苹果
    
  • 移动
    
  • 华为
    
  • 安卓
    
  • 联通
    
  • 电信
    
  • 女人
    
  • 裙子
    
  • 新浪微博
    
  • 腾讯微博
    
  • 信号
    
  • html
    
  • css
    
  • 家人
    
  • youtube
    
  • 
  • 
  • QQ
    
  • QQ-circle-fill
    
  • 
  • 
  • qq
    
  • 信号
    
  • 头条样式
    
  • 抖音
    
  • 快手
    
  • youtube
    
  • 黑马头条移动端
    
  • Battery
    
  • Cabine-Lift
    
  • Car-3
    
  • Bus-3
    
  • Car-1
    
  • Gear-Box
    
  • Bus-1
    
  • Mini-bus
    
  • Landing-Plane
    
  • Mini-Van
    
  • Cargo-Ship
    
  • Plane-3
    
  • Motorcycle
    
  • Helicopter
    
  • Jetplnade
    
  • A
    
  • B
    
  • C
    
  • D
    
  • E
    
  • F
    
  • G
    
  • H
    
  • I
    
  • J
    
  • K
    
  • L
    
  • M
    
  • N
    
  • O
    
  • P
    
  • Q
    
  • R
    
  • S
    
  • T
    
  • U
    
  • V
    
  • W
    
  • X
    
  • Y
    
  • Z
    
  • 飞船02
    
  • 火箭
    
  • 火箭2
    
  • 星系02
    
  • 望远镜
    
  • 骑士风采
    ﵖ
  • 征婚交友
    ﵘ
  • 网友爆料
    ﵙ
  • 废旧回收
    ﵚ
  • 私家好车
    ﵞ
  • 商务服务
    ﵟ
  • 商家入驻
    ﵤ
  • 休闲娱乐
    ﵪ
  • 读者管理
    
  • music_fill
    
  • music
    
  • 设计规范
    
  • 设计师
    
  • picture-fill
    
  • video
    
  • video
    
  • pic
    
  • video
    
  • video
    
  • video
    
  • qrcode
    
  • display-code
    
  • electric
    
  • equipment
    
  • 航拍02
    
  • 航拍11
    
  • 航拍17
    
  • 无人机
    
  • 无人机
    
  • 无人机
    
  • 维修
    
  • international
    
  • guide
    
  • wechat
    
  • bug
    
  • fire
    
  • weather
    
  • 颜色
    
  • 图片
    
  • 完成
    
  • 上传1
    
  • 上传
    
  • 展开
    
  • 相机
    
  • 置顶
    
  • 退出
    
  • 收藏
    
  • 手机
    
  • 我的消息
    
  • 签到
    
  • 客服
    
  • 首页
    
  • 社群
    
  • 设置
    
  • sign
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'ym';
  src: url('iconfont.woff2?t=1636104786411') format('woff2'),
       url('iconfont.woff?t=1636104786411') format('woff'),
       url('iconfont.ttf?t=1636104786411') format('truetype');
}

第二步:定义使用 iconfont 的样式

.ym {
  font-family: "ym" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="ym">&#x33;</span>

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

  • 查找用户
    .zl-chazhaoyonghu
  • 全屏
    .zl-quanping
  • 放大
    .zl-fangda
  • 珠宝饰品
    .zl-zhubaoshipin
  • off
    .zl-off
  • wordpress
    .zl-wordpress
  • 搜索放大
    .zl-sousuofangda
  • poweroff
    .zl-poweroff
  • blogger
    .zl-blogger
  • 位置
    .zl-weizhi
  • 邮件
    .zl-youjian
  • 谷歌_google114
    .zl-gugegoogle114
  • UC浏览器
    .zl-changyonglogo31
  • 百度云
    .zl-changyonglogo45
  • chrome
    .zl-chrome
  • 定位
    .zl-dingwei
  • 24gf-envelopeWarning
    .zl-24gf-envelopeWarning
  • bg-ie-browser
    .zl-bg-ie-browser
  • 百度
    .zl-baidu
  • 百度云
    .zl-baiduyun
  • 字体
    .zl-font
  • 字体
    .zl-ziti
  • 字体
    .zl-ziti1
  • 苹果
    .zl-pingguo
  • 移动
    .zl-yidong
  • 华为
    .zl-huawei
  • 安卓
    .zl-anzhuo
  • 联通
    .zl-liantong
  • 电信
    .zl-dianxin
  • 女人
    .zl-nvren
  • 裙子
    .zl-qunzi
  • 新浪微博
    .zl-xinlangweibo
  • 腾讯微博
    .zl-tengxunweibo
  • 信号
    .zl-xinhao
  • html
    .zl-html
  • css
    .zl-css
  • 家人
    .zl-shouye1
  • youtube
    .zl-youtube
  • .zl-nan
  • .zl-nv
  • QQ
    .zl-QQ
  • QQ-circle-fill
    .zl-QQ-circle-fill
  • .zl-nan1
  • .zl-nv1
  • qq
    .zl-qq
  • 信号
    .zl-xinhao1
  • 头条样式
    .zl-toutiaoyangshi
  • 抖音
    .zl-douyin
  • 快手
    .zl-kuaishou
  • youtube
    .zl-youtube1
  • 黑马头条移动端
    .zl-wuwangluo
  • Battery
    .zl-Battery
  • Cabine-Lift
    .zl-Cabine-Lift
  • Car-3
    .zl-Car-3
  • Bus-3
    .zl-Bus-3
  • Car-1
    .zl-Car-1
  • Gear-Box
    .zl-Gear-Box
  • Bus-1
    .zl-Bus-1
  • Mini-bus
    .zl-Mini-bus
  • Landing-Plane
    .zl-Landing-Plane
  • Mini-Van
    .zl-Mini-Van
  • Cargo-Ship
    .zl-Cargo-Ship
  • Plane-3
    .zl-Plane-3
  • Motorcycle
    .zl-Motorcycle
  • Helicopter
    .zl-Helicopter
  • Jetplnade
    .zl-Jetplnade
  • A
    .zl-A
  • B
    .zl-B
  • C
    .zl-C
  • D
    .zl-D
  • E
    .zl-E
  • F
    .zl-F
  • G
    .zl-G
  • H
    .zl-H
  • I
    .zl-I
  • J
    .zl-J
  • K
    .zl-K
  • L
    .zl-L
  • M
    .zl-M
  • N
    .zl-N
  • O
    .zl-O
  • P
    .zl-P
  • Q
    .zl-Q
  • R
    .zl-R
  • S
    .zl-S
  • T
    .zl-T
  • U
    .zl-U
  • V
    .zl-V
  • W
    .zl-W
  • X
    .zl-X
  • Y
    .zl-Y
  • Z
    .zl-Z
  • 飞船02
    .zl-feichuan02
  • 火箭
    .zl-huojian
  • 火箭2
    .zl-huojian2
  • 星系02
    .zl-xingxi02
  • 望远镜
    .zl-wangyuanjing
  • 骑士风采
    .zl-qishifengcai
  • 征婚交友
    .zl-zhenghunjiaoyou
  • 网友爆料
    .zl-wangyoubaoliao
  • 废旧回收
    .zl-feijiuhuishou
  • 私家好车
    .zl-sijiahaoche
  • 商务服务
    .zl-shangwufuwu
  • 商家入驻
    .zl-shangjiaruzhu
  • 休闲娱乐
    .zl-xiuxianyule
  • 读者管理
    .zl-duzheguanli
  • music_fill
    .zl-musicfill
  • music
    .zl-music
  • 设计规范
    .zl-shejiguifan
  • 设计师
    .zl-shejishi
  • picture-fill
    .zl-picture-fill
  • video
    .zl-video3
  • video
    .zl-video4
  • pic
    .zl-pic
  • video
    .zl-video
  • video
    .zl-video1
  • video
    .zl-video2
  • qrcode
    .zl-qrcode
  • display-code
    .zl-display-code
  • electric
    .zl-electric
  • equipment
    .zl-equipment-01
  • 航拍02
    .zl-hangpai
  • 航拍11
    .zl-hangpai1
  • 航拍17
    .zl-hangpai2
  • 无人机
    .zl-wurenji
  • 无人机
    .zl-wurenji1
  • 无人机
    .zl-wurenji2
  • 维修
    .zl-weixiu
  • international
    .zl-international
  • guide
    .zl-guide
  • wechat
    .zl-wechat
  • bug
    .zl-bug
  • fire
    .zl-fire
  • weather
    .zl-weather
  • 颜色
    .zl-yanse
  • 图片
    .zl-tupian
  • 完成
    .zl-wancheng
  • 上传1
    .zl-shangchuan1
  • 上传
    .zl-shangchuan
  • 展开
    .zl-zhankai
  • 相机
    .zl-xiangji
  • 置顶
    .zl-zhiding
  • 退出
    .zl-tuichu
  • 收藏
    .zl-shoucang
  • 手机
    .zl-shouji
  • 我的消息
    .zl-wodexiaoxi
  • 签到
    .zl-qiandao
  • 客服
    .zl-kefu
  • 首页
    .zl-shouye
  • 社群
    .zl-shequn
  • 设置
    .zl-shezhi
  • sign
    .zl-sign

font-class 引用


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

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

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

<span class="ym zl-xxx"></span>

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

  • 查找用户
    #zl-chazhaoyonghu
  • 全屏
    #zl-quanping
  • 放大
    #zl-fangda
  • 珠宝饰品
    #zl-zhubaoshipin
  • off
    #zl-off
  • wordpress
    #zl-wordpress
  • 搜索放大
    #zl-sousuofangda
  • poweroff
    #zl-poweroff
  • blogger
    #zl-blogger
  • 位置
    #zl-weizhi
  • 邮件
    #zl-youjian
  • 谷歌_google114
    #zl-gugegoogle114
  • UC浏览器
    #zl-changyonglogo31
  • 百度云
    #zl-changyonglogo45
  • chrome
    #zl-chrome
  • 定位
    #zl-dingwei
  • 24gf-envelopeWarning
    #zl-24gf-envelopeWarning
  • bg-ie-browser
    #zl-bg-ie-browser
  • 百度
    #zl-baidu
  • 百度云
    #zl-baiduyun
  • 字体
    #zl-font
  • 字体
    #zl-ziti
  • 字体
    #zl-ziti1
  • 苹果
    #zl-pingguo
  • 移动
    #zl-yidong
  • 华为
    #zl-huawei
  • 安卓
    #zl-anzhuo
  • 联通
    #zl-liantong
  • 电信
    #zl-dianxin
  • 女人
    #zl-nvren
  • 裙子
    #zl-qunzi
  • 新浪微博
    #zl-xinlangweibo
  • 腾讯微博
    #zl-tengxunweibo
  • 信号
    #zl-xinhao
  • html
    #zl-html
  • css
    #zl-css
  • 家人
    #zl-shouye1
  • youtube
    #zl-youtube
  • #zl-nan
  • #zl-nv
  • QQ
    #zl-QQ
  • QQ-circle-fill
    #zl-QQ-circle-fill
  • #zl-nan1
  • #zl-nv1
  • qq
    #zl-qq
  • 信号
    #zl-xinhao1
  • 头条样式
    #zl-toutiaoyangshi
  • 抖音
    #zl-douyin
  • 快手
    #zl-kuaishou
  • youtube
    #zl-youtube1
  • 黑马头条移动端
    #zl-wuwangluo
  • Battery
    #zl-Battery
  • Cabine-Lift
    #zl-Cabine-Lift
  • Car-3
    #zl-Car-3
  • Bus-3
    #zl-Bus-3
  • Car-1
    #zl-Car-1
  • Gear-Box
    #zl-Gear-Box
  • Bus-1
    #zl-Bus-1
  • Mini-bus
    #zl-Mini-bus
  • Landing-Plane
    #zl-Landing-Plane
  • Mini-Van
    #zl-Mini-Van
  • Cargo-Ship
    #zl-Cargo-Ship
  • Plane-3
    #zl-Plane-3
  • Motorcycle
    #zl-Motorcycle
  • Helicopter
    #zl-Helicopter
  • Jetplnade
    #zl-Jetplnade
  • A
    #zl-A
  • B
    #zl-B
  • C
    #zl-C
  • D
    #zl-D
  • E
    #zl-E
  • F
    #zl-F
  • G
    #zl-G
  • H
    #zl-H
  • I
    #zl-I
  • J
    #zl-J
  • K
    #zl-K
  • L
    #zl-L
  • M
    #zl-M
  • N
    #zl-N
  • O
    #zl-O
  • P
    #zl-P
  • Q
    #zl-Q
  • R
    #zl-R
  • S
    #zl-S
  • T
    #zl-T
  • U
    #zl-U
  • V
    #zl-V
  • W
    #zl-W
  • X
    #zl-X
  • Y
    #zl-Y
  • Z
    #zl-Z
  • 飞船02
    #zl-feichuan02
  • 火箭
    #zl-huojian
  • 火箭2
    #zl-huojian2
  • 星系02
    #zl-xingxi02
  • 望远镜
    #zl-wangyuanjing
  • 骑士风采
    #zl-qishifengcai
  • 征婚交友
    #zl-zhenghunjiaoyou
  • 网友爆料
    #zl-wangyoubaoliao
  • 废旧回收
    #zl-feijiuhuishou
  • 私家好车
    #zl-sijiahaoche
  • 商务服务
    #zl-shangwufuwu
  • 商家入驻
    #zl-shangjiaruzhu
  • 休闲娱乐
    #zl-xiuxianyule
  • 读者管理
    #zl-duzheguanli
  • music_fill
    #zl-musicfill
  • music
    #zl-music
  • 设计规范
    #zl-shejiguifan
  • 设计师
    #zl-shejishi
  • picture-fill
    #zl-picture-fill
  • video
    #zl-video3
  • video
    #zl-video4
  • pic
    #zl-pic
  • video
    #zl-video
  • video
    #zl-video1
  • video
    #zl-video2
  • qrcode
    #zl-qrcode
  • display-code
    #zl-display-code
  • electric
    #zl-electric
  • equipment
    #zl-equipment-01
  • 航拍02
    #zl-hangpai
  • 航拍11
    #zl-hangpai1
  • 航拍17
    #zl-hangpai2
  • 无人机
    #zl-wurenji
  • 无人机
    #zl-wurenji1
  • 无人机
    #zl-wurenji2
  • 维修
    #zl-weixiu
  • international
    #zl-international
  • guide
    #zl-guide
  • wechat
    #zl-wechat
  • bug
    #zl-bug
  • fire
    #zl-fire
  • weather
    #zl-weather
  • 颜色
    #zl-yanse
  • 图片
    #zl-tupian
  • 完成
    #zl-wancheng
  • 上传1
    #zl-shangchuan1
  • 上传
    #zl-shangchuan
  • 展开
    #zl-zhankai
  • 相机
    #zl-xiangji
  • 置顶
    #zl-zhiding
  • 退出
    #zl-tuichu
  • 收藏
    #zl-shoucang
  • 手机
    #zl-shouji
  • 我的消息
    #zl-wodexiaoxi
  • 签到
    #zl-qiandao
  • 客服
    #zl-kefu
  • 首页
    #zl-shouye
  • 社群
    #zl-shequn
  • 设置
    #zl-shezhi
  • sign
    #zl-sign

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>