• 放大
    
  • 选中
    
  • 返回顶部
    
  • 向上箭头
    
  • 播放
    
  • 放大
    
  • 男性性别
    
  • 女性性别
    
  • 性别女
    
  • 性别男
    
  • 设置
    
  • 定位
    
  • copy
    
  • 车牌
    
  • 
  • 充电中
    
  • 07熟食简餐
    
  • 咖啡
    
  • 监控
    
  • 卫生间
    
  • 雨棚2
    
  • 我的
    
  • 首页
    
  • 正确
    
  • 向上圆箭头 上箭头 向上 面性
    
  • 箭头右圆
    
  • 刷新
    
  • 修改
    
  • 替换
    
  • 关闭
    
  • app
    
  • 小程序
    
  • 微信
    
  • 技能
    
  • 主页
    
  • 留言
    
  • 排列
    
  • 商品
    
  • 图标_支付-钱包支付-94
    
  • 彩友多_支付-微信支付
    
  • 图标_支付_支付宝支付
    
  • 分享
    
  • 个人中心
    
  • 工作单位
    
  • 工作时间
    
  • 关闭
    
  • 关于
    
  • 就诊人管理
    
  • 就诊提醒
    
  • 距离
    
  • 免责声明
    
  • 删减
    
  • 身份证
    
  • 手机版
    
  • 搜索
    
  • 添加
    
  • 完成
    
  • 未读
    
  • 我的关注
    
  • 我的评价
    
  • 我的钱包
    
  • 我的通知
    
  • 我的预约
    
  • 邀请患者
    
  • 邀请同行
    
  • 医生职称
    
  • 已读
    
  • 用户反馈
    
  • 预约挂号
    
  • 电话
    
  • 退出
    
  • 退出
    
  • 互联网off
    
  • Android更多
    
  • 闭眼睛
    
  • 返回
    
  • 声音_实体
    
  • 设备开发
    
  • 错误空心
    
  • 加_色块
    
  • 减_色块
    
  • 
  • 查看名片
    
  • 账单
    
  • 标注
    
  • 组织页面
    
  • 数字签名
    
  • 倒三角
    
  • 倒三角
    
  • 绑定-01
    
  • yly_计算器
    
  • 商铺 商城 首页 房子
    
  • 
  • 广安
    
  • 1
    
  • 密码
    
  • 3.1转发
    
  • 下箭头
    
  • 下箭头
    
  • 下箭头
    
  • 下箭头
    
  • 联系客服
    
  • 眼睛
    
  • 眼睛
    
  • 收起菜单
    
  • 展开菜单
    
  • 筛选
    
  • 列表形式
    
  • 三角上
    
  • 下箭头
    
  • arrow-left-bold
    
  • arrow-right-bold
    
  • arrow-right-bold
    
  • arrow-left-bold
    
  • 删除1
    
  • 
  • 
  • 表情
    
  • 送达
    
  • 安全
    
  • 二维码
    
  • 复制
    
  • 删除筛选项
    
  • 垃圾桶
    
  • 删除筛选项
    
  • 选择框勾选
    
  • 通知
    
  • Plus
    
  • 
  • 扫描
    
  • 设置
    
  • 星星
    
  • 钱包
    
  • Scan
    
  • Home
    
  • Search
    
  • Plus
    
  • Chart
    
  • Bag
    
  • Star
    
  • Category
    
  • Wallet
    
  • Folder
    
  • Discovery
    
  • Message
    
  • Notification
    
  • Game
    
  • Profile
    
  • Calendar
    
  • Setting
    
  • Activity
    
  • Document
    
  • Graph
    
  • Chat
    
  • Heart
    
  • Bookmark
    
  • Location
    
  • 购物
    
  • 首页
    
  • 我的
    
  • 帮助
    
  • 积分
    
  • 删除
    
  • 设置
    
  • 收藏
    
  • 优惠券
    
  • 资料
    
  • 待发货
    
  • 待付款
    
  • 待收货
    
  • 反馈
    
  • 售后
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1741745774516'); /* IE9 */
  src: url('iconfont.eot?t=1741745774516#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1741745774516') format('woff2'),
       url('iconfont.woff?t=1741745774516') format('woff'),
       url('iconfont.ttf?t=1741745774516') format('truetype'),
       url('iconfont.svg?t=1741745774516#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"。

  • 放大
    .iconfont-fangda2
  • 选中
    .iconfont-xuanzhong
  • 返回顶部
    .iconfont-fanhuidingbu1
  • 向上箭头
    .iconfont-xiangshangjiantou
  • 播放
    .iconfont-bofang4
  • 放大
    .iconfont-fangda1
  • 男性性别
    .iconfont-nanxingxingbie
  • 女性性别
    .iconfont-nvxingxingbie
  • 性别女
    .iconfont-xingbienv
  • 性别男
    .iconfont-xingbienan
  • 设置
    .iconfont-shezhi1
  • 定位
    .iconfont-dingwei
  • copy
    .iconfont-copy
  • 车牌
    .iconfont-chepai
  • .iconfont-dian
  • 充电中
    .iconfont-chongdianzhong1
  • 07熟食简餐
    .iconfont-shushijiancan
  • 咖啡
    .iconfont-icon-test
  • 监控
    .iconfont-jiankong
  • 卫生间
    .iconfont-weishengjian
  • 雨棚2
    .iconfont-yupeng2
  • 我的
    .iconfont-wode
  • 首页
    .iconfont-shouye1
  • 正确
    .iconfont-zhengque
  • 向上圆箭头 上箭头 向上 面性
    .iconfont-jta
  • 箭头右圆
    .iconfont-jiantouyouyuan
  • 刷新
    .iconfont-shuaxin
  • 修改
    .iconfont-xiugai
  • 替换
    .iconfont-tihuan
  • 关闭
    .iconfont-guanbi1
  • app
    .iconfont-app
  • 小程序
    .iconfont-xiaochengxu
  • 微信
    .iconfont-weixin
  • 技能
    .iconfont-jineng
  • 主页
    .iconfont-home1149866easyiconnet
  • 留言
    .iconfont-liuyan1
  • 排列
    .iconfont-pailie
  • 商品
    .iconfont-shangpin2
  • 图标_支付-钱包支付-94
    .iconfont-tubiao_zhifu-qianbaozhifu-94
  • 彩友多_支付-微信支付
    .iconfont-caiyouduo_zhifu-weixinzhifu
  • 图标_支付_支付宝支付
    .iconfont-tubiao_zhifu_zhifubaozhifu
  • 分享
    .iconfont-share
  • 个人中心
    .iconfont-user
  • 工作单位
    .iconfont-commpany
  • 工作时间
    .iconfont-time
  • 关闭
    .iconfont-close-o
  • 关于
    .iconfont-about
  • 就诊人管理
    .iconfont-order-manager
  • 就诊提醒
    .iconfont-clock
  • 距离
    .iconfont-position-o
  • 免责声明
    .iconfont-declare
  • 删减
    .iconfont-prune
  • 身份证
    .iconfont-cardid
  • 手机版
    .iconfont-mobile
  • 搜索
    .iconfont-search
  • 添加
    .iconfont-add
  • 完成
    .iconfont-completed
  • 未读
    .iconfont-noread
  • 我的关注
    .iconfont-attention
  • 我的评价
    .iconfont-comment
  • 我的钱包
    .iconfont-wallet-o
  • 我的通知
    .iconfont-notice
  • 我的预约
    .iconfont-myorder
  • 邀请患者
    .iconfont-invite-disease
  • 邀请同行
    .iconfont-invite
  • 医生职称
    .iconfont-medtitle
  • 已读
    .iconfont-read
  • 用户反馈
    .iconfont-feedback
  • 预约挂号
    .iconfont-order
  • 电话
    .iconfont-tel
  • 退出
    .iconfont-logout
  • 退出
    .iconfont-tuichu
  • 互联网off
    .iconfont-hulianwangoff
  • Android更多
    .iconfont-Androidgengduo
  • 闭眼睛
    .iconfont-biyanjing
  • 返回
    .iconfont-fanhui
  • 声音_实体
    .iconfont-shengyin_shiti
  • 设备开发
    .iconfont-shebeikaifa
  • 错误空心
    .iconfont-cuowukongxin
  • 加_色块
    .iconfont-jia_sekuai
  • 减_色块
    .iconfont-jian_sekuai
  • .iconfont-kong
  • 查看名片
    .iconfont-chakanmingpian
  • 账单
    .iconfont-zhangdan
  • 标注
    .iconfont-biaozhu
  • 组织页面
    .iconfont-zuzhiyemian
  • 数字签名
    .iconfont-shuziqianming
  • 倒三角
    .iconfont-daosanjiao
  • 倒三角
    .iconfont-daosanjiao-copy
  • 绑定-01
    .iconfont-bangding-
  • yly_计算器
    .iconfont-yly_jisuanqi
  • 商铺 商城 首页 房子
    .iconfont-shangpushangchengshouyefangzi
  • .iconfont-chen
  • 广安
    .iconfont-guangan
  • 1
    .iconfont-icon-test1
  • 密码
    .iconfont-mima
  • 3.1转发
    .iconfont-zhuanfa
  • 下箭头
    .iconfont-zk-l
  • 下箭头
    .iconfont-zk-r
  • 下箭头
    .iconfont-zk-t
  • 下箭头
    .iconfont-zk-b
  • 联系客服
    .iconfont-kefu
  • 眼睛
    .iconfont-yj1
  • 眼睛
    .iconfont-yj2
  • 收起菜单
    .iconfont-shouqicaidan
  • 展开菜单
    .iconfont-zhankaicaidan
  • 筛选
    .iconfont-shaixuan
  • 列表形式
    .iconfont-liebiaoxingshi
  • 三角上
    .iconfont-sanjiaotop
  • 下箭头
    .iconfont-sanjiaodown
  • arrow-left-bold
    .iconfont-arrow-left
  • arrow-right-bold
    .iconfont-arrow-right
  • arrow-right-bold
    .iconfont-arrow-bottom
  • arrow-left-bold
    .iconfont-arrow-top
  • 删除1
    .iconfont-shanchu1
  • .iconfont-jia-copy
  • .iconfont-guanbi
  • 表情
    .iconfont-biaoqing
  • 送达
    .iconfont-songda
  • 安全
    .iconfont-anquan
  • 二维码
    .iconfont-ico
  • 复制
    .iconfont-fuzhi
  • 删除筛选项
    .iconfont-delete2-copy
  • 垃圾桶
    .iconfont-trash
  • 删除筛选项
    .iconfont-delete2
  • 选择框勾选
    .iconfont-gouxuan
  • 通知
    .iconfont-Notification
  • Plus
    .iconfont-Plus
  • .iconfont-Profile
  • 扫描
    .iconfont-Scan
  • 设置
    .iconfont-Setting
  • 星星
    .iconfont-Star
  • 钱包
    .iconfont-Wallet
  • Scan
    .iconfont-Scan1
  • Home
    .iconfont-Home
  • Search
    .iconfont-Search2
  • Plus
    .iconfont-Plus2
  • Chart
    .iconfont-Chart1
  • Bag
    .iconfont-Bag1
  • Star
    .iconfont-Star2
  • Category
    .iconfont-Category1
  • Wallet
    .iconfont-Wallet2
  • Folder
    .iconfont-Folder1
  • Discovery
    .iconfont-Discovery1
  • Message
    .iconfont-Message1
  • Notification
    .iconfont-Notification2
  • Game
    .iconfont-Game1
  • Profile
    .iconfont-Profile2
  • Calendar
    .iconfont-Calendar1
  • Setting
    .iconfont-Setting2
  • Activity
    .iconfont-Activity1
  • Document
    .iconfont-Document1
  • Graph
    .iconfont-Graph1
  • Chat
    .iconfont-Chat1
  • Heart
    .iconfont-Heart1
  • Bookmark
    .iconfont-Bookmark1
  • Location
    .iconfont-Location1
  • 购物
    .iconfont-gouwu
  • 首页
    .iconfont-shouye
  • 我的
    .iconfont-wode1
  • 帮助
    .iconfont-bangzhu
  • 积分
    .iconfont-jifen
  • 删除
    .iconfont-shanchu
  • 设置
    .iconfont-shezhi
  • 收藏
    .iconfont-shoucang
  • 优惠券
    .iconfont-youhuiquan
  • 资料
    .iconfont-ziliao
  • 待发货
    .iconfont-daifahuo
  • 待付款
    .iconfont-daifukuan
  • 待收货
    .iconfont-daishouhuo
  • 反馈
    .iconfont-fankui
  • 售后
    .iconfont-shouhou

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 放大
    #iconfont-fangda2
  • 选中
    #iconfont-xuanzhong
  • 返回顶部
    #iconfont-fanhuidingbu1
  • 向上箭头
    #iconfont-xiangshangjiantou
  • 播放
    #iconfont-bofang4
  • 放大
    #iconfont-fangda1
  • 男性性别
    #iconfont-nanxingxingbie
  • 女性性别
    #iconfont-nvxingxingbie
  • 性别女
    #iconfont-xingbienv
  • 性别男
    #iconfont-xingbienan
  • 设置
    #iconfont-shezhi1
  • 定位
    #iconfont-dingwei
  • copy
    #iconfont-copy
  • 车牌
    #iconfont-chepai
  • #iconfont-dian
  • 充电中
    #iconfont-chongdianzhong1
  • 07熟食简餐
    #iconfont-shushijiancan
  • 咖啡
    #iconfont-icon-test
  • 监控
    #iconfont-jiankong
  • 卫生间
    #iconfont-weishengjian
  • 雨棚2
    #iconfont-yupeng2
  • 我的
    #iconfont-wode
  • 首页
    #iconfont-shouye1
  • 正确
    #iconfont-zhengque
  • 向上圆箭头 上箭头 向上 面性
    #iconfont-jta
  • 箭头右圆
    #iconfont-jiantouyouyuan
  • 刷新
    #iconfont-shuaxin
  • 修改
    #iconfont-xiugai
  • 替换
    #iconfont-tihuan
  • 关闭
    #iconfont-guanbi1
  • app
    #iconfont-app
  • 小程序
    #iconfont-xiaochengxu
  • 微信
    #iconfont-weixin
  • 技能
    #iconfont-jineng
  • 主页
    #iconfont-home1149866easyiconnet
  • 留言
    #iconfont-liuyan1
  • 排列
    #iconfont-pailie
  • 商品
    #iconfont-shangpin2
  • 图标_支付-钱包支付-94
    #iconfont-tubiao_zhifu-qianbaozhifu-94
  • 彩友多_支付-微信支付
    #iconfont-caiyouduo_zhifu-weixinzhifu
  • 图标_支付_支付宝支付
    #iconfont-tubiao_zhifu_zhifubaozhifu
  • 分享
    #iconfont-share
  • 个人中心
    #iconfont-user
  • 工作单位
    #iconfont-commpany
  • 工作时间
    #iconfont-time
  • 关闭
    #iconfont-close-o
  • 关于
    #iconfont-about
  • 就诊人管理
    #iconfont-order-manager
  • 就诊提醒
    #iconfont-clock
  • 距离
    #iconfont-position-o
  • 免责声明
    #iconfont-declare
  • 删减
    #iconfont-prune
  • 身份证
    #iconfont-cardid
  • 手机版
    #iconfont-mobile
  • 搜索
    #iconfont-search
  • 添加
    #iconfont-add
  • 完成
    #iconfont-completed
  • 未读
    #iconfont-noread
  • 我的关注
    #iconfont-attention
  • 我的评价
    #iconfont-comment
  • 我的钱包
    #iconfont-wallet-o
  • 我的通知
    #iconfont-notice
  • 我的预约
    #iconfont-myorder
  • 邀请患者
    #iconfont-invite-disease
  • 邀请同行
    #iconfont-invite
  • 医生职称
    #iconfont-medtitle
  • 已读
    #iconfont-read
  • 用户反馈
    #iconfont-feedback
  • 预约挂号
    #iconfont-order
  • 电话
    #iconfont-tel
  • 退出
    #iconfont-logout
  • 退出
    #iconfont-tuichu
  • 互联网off
    #iconfont-hulianwangoff
  • Android更多
    #iconfont-Androidgengduo
  • 闭眼睛
    #iconfont-biyanjing
  • 返回
    #iconfont-fanhui
  • 声音_实体
    #iconfont-shengyin_shiti
  • 设备开发
    #iconfont-shebeikaifa
  • 错误空心
    #iconfont-cuowukongxin
  • 加_色块
    #iconfont-jia_sekuai
  • 减_色块
    #iconfont-jian_sekuai
  • #iconfont-kong
  • 查看名片
    #iconfont-chakanmingpian
  • 账单
    #iconfont-zhangdan
  • 标注
    #iconfont-biaozhu
  • 组织页面
    #iconfont-zuzhiyemian
  • 数字签名
    #iconfont-shuziqianming
  • 倒三角
    #iconfont-daosanjiao
  • 倒三角
    #iconfont-daosanjiao-copy
  • 绑定-01
    #iconfont-bangding-
  • yly_计算器
    #iconfont-yly_jisuanqi
  • 商铺 商城 首页 房子
    #iconfont-shangpushangchengshouyefangzi
  • #iconfont-chen
  • 广安
    #iconfont-guangan
  • 1
    #iconfont-icon-test1
  • 密码
    #iconfont-mima
  • 3.1转发
    #iconfont-zhuanfa
  • 下箭头
    #iconfont-zk-l
  • 下箭头
    #iconfont-zk-r
  • 下箭头
    #iconfont-zk-t
  • 下箭头
    #iconfont-zk-b
  • 联系客服
    #iconfont-kefu
  • 眼睛
    #iconfont-yj1
  • 眼睛
    #iconfont-yj2
  • 收起菜单
    #iconfont-shouqicaidan
  • 展开菜单
    #iconfont-zhankaicaidan
  • 筛选
    #iconfont-shaixuan
  • 列表形式
    #iconfont-liebiaoxingshi
  • 三角上
    #iconfont-sanjiaotop
  • 下箭头
    #iconfont-sanjiaodown
  • arrow-left-bold
    #iconfont-arrow-left
  • arrow-right-bold
    #iconfont-arrow-right
  • arrow-right-bold
    #iconfont-arrow-bottom
  • arrow-left-bold
    #iconfont-arrow-top
  • 删除1
    #iconfont-shanchu1
  • #iconfont-jia-copy
  • #iconfont-guanbi
  • 表情
    #iconfont-biaoqing
  • 送达
    #iconfont-songda
  • 安全
    #iconfont-anquan
  • 二维码
    #iconfont-ico
  • 复制
    #iconfont-fuzhi
  • 删除筛选项
    #iconfont-delete2-copy
  • 垃圾桶
    #iconfont-trash
  • 删除筛选项
    #iconfont-delete2
  • 选择框勾选
    #iconfont-gouxuan
  • 通知
    #iconfont-Notification
  • Plus
    #iconfont-Plus
  • #iconfont-Profile
  • 扫描
    #iconfont-Scan
  • 设置
    #iconfont-Setting
  • 星星
    #iconfont-Star
  • 钱包
    #iconfont-Wallet
  • Scan
    #iconfont-Scan1
  • Home
    #iconfont-Home
  • Search
    #iconfont-Search2
  • Plus
    #iconfont-Plus2
  • Chart
    #iconfont-Chart1
  • Bag
    #iconfont-Bag1
  • Star
    #iconfont-Star2
  • Category
    #iconfont-Category1
  • Wallet
    #iconfont-Wallet2
  • Folder
    #iconfont-Folder1
  • Discovery
    #iconfont-Discovery1
  • Message
    #iconfont-Message1
  • Notification
    #iconfont-Notification2
  • Game
    #iconfont-Game1
  • Profile
    #iconfont-Profile2
  • Calendar
    #iconfont-Calendar1
  • Setting
    #iconfont-Setting2
  • Activity
    #iconfont-Activity1
  • Document
    #iconfont-Document1
  • Graph
    #iconfont-Graph1
  • Chat
    #iconfont-Chat1
  • Heart
    #iconfont-Heart1
  • Bookmark
    #iconfont-Bookmark1
  • Location
    #iconfont-Location1
  • 购物
    #iconfont-gouwu
  • 首页
    #iconfont-shouye
  • 我的
    #iconfont-wode1
  • 帮助
    #iconfont-bangzhu
  • 积分
    #iconfont-jifen
  • 删除
    #iconfont-shanchu
  • 设置
    #iconfont-shezhi
  • 收藏
    #iconfont-shoucang
  • 优惠券
    #iconfont-youhuiquan
  • 资料
    #iconfont-ziliao
  • 待发货
    #iconfont-daifahuo
  • 待付款
    #iconfont-daifukuan
  • 待收货
    #iconfont-daishouhuo
  • 反馈
    #iconfont-fankui
  • 售后
    #iconfont-shouhou

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>