• 支付宝
    
  • 
  • 列表
    
  • 添加
    
  • 列表
    
  • 安全
    
  • 系统设置
    
  • more
    
  • 输入2
    
  • 个人中心-我的钱包
    
  • miaojie_seller_selected
    
  • Cloud network_2
    
  • safe
    
  • 列表
    
  • 产品管理
    
  • bind
    
  • 用户
    
  • 快捷应用
    
  • more
    
  • 修改
    
  • 服务
    
  • 购物车添加
    
  • 二维码
    
  • 我的订单
    
  • 我的红包
    
  • 
  • 充值记录
    
  • 服务
    
  • tel
    
  • 圆点中
    
  • 云主机,云服务器架构
    
  • 1u
    
  • 2u
    
  • 4u
    
  • 模块
    
  • 银联
    
  • 充值2
    
  • 列表
    
  • 文章管理02
    
  • 我的钱包
    
  • 
  • pay-circle
    
  • 
  • 
  • 控制中心
    
  • 成功
    
  • success
    
  • 财务管理
    
  • 扫码
    
  • 云开发主机
    
  • yxx_wechat_pay_success
    
  • 成功
    
  • aright
    
  • 安全
    
  • 用户
    
  • 删除
    
  • buy-webhosting-step1-dns
    
  • buy-webhosting-step1-domain
    
  • buy-webhosting-step2-server-security
    
  • 警告
    
  • 用户
    
  • 时间
    
  • 首页
    
  • 加入云主机
    
  • 云主机(pitch on)
    
  • 云主机
    
  • 设置
    
  • home
    
  • Preview
    
  • 财务数据
    
  • clock
    
  • 设置
    
  • back
    
  • 微信支付
    
  • 工单
    
  • paysuccess
    
  • 设置
    
  • 充值记录
    
  • easy
    
  • warn
    
  • pc
    
  • 用户
    
  • Speed
    
  • 高性价比
    
  • 我的工单
    
  • 余额 (1)
    
  • host
    
  • 域名与网站
    
  • 云虚拟主机
    
  • dns云解析
    
  • 云数据库 redis
    
  • 控制台
    
  • 用户
    
  • 安全
    
  • 售后
    
  • 忘记密码
    
  • 账单
    
  • 输入
    
  • 域名解析
    
  • 返回
    
  • 关闭
    
  • 全屏
    
  • 箭头 上
    
  • 箭头 上
    
  • 箭头 右
    
  • 箭头 下
    
  • 扫一扫
    
  • 分类
    
  • 选中
    
  • 设置
    
  • 闪电
    
  • 微信 支付
    
  • wechat
    
  • 订单
    
  • 关闭26
    
  • 快捷标签
    
  • stable
    
  • hosting
    
  • 换一换
    
  • 照相机
    
  • 主机
    
  • number_6
    
  • number_7
    
  • number_9
    
  • number_0
    
  • number_3
    
  • number_1
    
  • number_4
    
  • number_8
    
  • number_punctuation
    
  • 账单
    
  • number_5
    
  • number_2
    
  • add
    
  • 3column
    
  • back
    
  • extend
    
  • forward
    
  • increase
    
  • left
    
  • nav-list
    
  • navigation
    
  • register
    
  • refresh
    
  • search
    
  • setting
    
  • sync
    
  • view-list
    
  • search-o
    
  • view-list-o
    
  • cloud-hosting
    
  • arrow-down
    
  • arrow-left
    
  • arrow-right
    
  • arrow-up
    
  • arrow-down
    
  • arrow-right
    
  • arrow-left
    
  • arrow-up
    
  • cloud logo
    
  • twitter
    
  • wechat
    
  • weibo
    
  • qzone
    
  • qq
    
  • github
    
  • csdn
    
  • Facebook
    
  • alipay
    
  • linkedin
    
  • google
    
  • skype
    
  • union_pay
    
  • alipay
    
  • IDC管理
    
  • 微信
    
  • 售后
    
  • hostSafe
    
  • 箭头
    
  • 主机
    
  • 绑定账号
    
  • 微信 支付
    
  • w0810005空调机房
    
  • IDC机房
    
  • 闪电
    
  • IDC机房
    
  • 绑定账号
    

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

  • 支付宝
    .icon-zhifubao
  • .icon-wo
  • 列表
    .icon-liebiao
  • 添加
    .icon-tianjia
  • 列表
    .icon-iconfontcolor69
  • 安全
    .icon-anquan1
  • 系统设置
    .icon-msnui-sys-set
  • more
    .icon-gengduo
  • 输入2
    .icon-shuru2
  • 个人中心-我的钱包
    .icon-gerenzhongxinwodeqianbao
  • miaojie_seller_selected
    .icon-miaojiesellerselected
  • Cloud network_2
    .icon-cloudnetwork2
  • safe
    .icon-safe
  • 列表
    .icon-liebiao2
  • 产品管理
    .icon-chanpinguanli
  • bind
    .icon-bind
  • 用户
    .icon-yonghu
  • 快捷应用
    .icon-kuaijieyingyon
  • more
    .icon-more
  • 修改
    .icon-xiugai-copy
  • 服务
    .icon-msnui-service
  • 购物车添加
    .icon-gouwuchetianjia
  • 二维码
    .icon-erweima
  • 我的订单
    .icon-wodedingdan
  • 我的红包
    .icon-wodehongbao
  • .icon-ju
  • 充值记录
    .icon-chongzhijilu
  • 服务
    .icon-fuwu
  • tel
    .icon-tel
  • 圆点中
    .icon-yuandianzhong
  • 云主机,云服务器架构
    .icon-yunzhuji
  • 1u
    .icon-1u
  • 2u
    .icon-2u
  • 4u
    .icon-4u
  • 模块
    .icon-ai-module
  • 银联
    .icon-yinlian
  • 充值2
    .icon-chongzhi2
  • 列表
    .icon-liebiao1
  • 文章管理02
    .icon-wenzhangguanli
  • 我的钱包
    .icon-wodeqianbaoshangjia
  • .icon-mian
  • pay-circle
    .icon-paycircle
  • .icon-gou
  • .icon-qian
  • 控制中心
    .icon-control
  • 成功
    .icon-chenggong
  • success
    .icon-success
  • 财务管理
    .icon-caiwuguanli
  • 扫码
    .icon-saoma
  • 云开发主机
    .icon-yunkaifazhuji
  • yxx_wechat_pay_success
    .icon-weixinzhifu1
  • 成功
    .icon-Success-Small
  • aright
    .icon-aright
  • 安全
    .icon-anquan2
  • 用户
    .icon-yonghu4
  • 删除
    .icon-shanchu
  • buy-webhosting-step1-dns
    .icon-buywebhostingstep1dns
  • buy-webhosting-step1-domain
    .icon-buywebhostingstep1domain
  • buy-webhosting-step2-server-security
    .icon-buywebhostingstep2serversecurity
  • 警告
    .icon-jinggao
  • 用户
    .icon-yonghu1
  • 时间
    .icon-time
  • 首页
    .icon-shouye
  • 加入云主机
    .icon-jiaruyunzhuji
  • 云主机(pitch on)
    .icon-yunzhujipitchon
  • 云主机
    .icon-yunzhuji1
  • 设置
    .icon-shezhi
  • home
    .icon-home
  • Preview
    .icon-Preview
  • 财务数据
    .icon-caiwushuju
  • clock
    .icon-naozhong
  • 设置
    .icon-shezhi-xue
  • back
    .icon-back1
  • 微信支付
    .icon-weixinzhifu
  • 工单
    .icon-order
  • paysuccess
    .icon-paysuccess
  • 设置
    .icon-shezhi1
  • 充值记录
    .icon-chongzhijilu1
  • easy
    .icon-easy
  • warn
    .icon-warn
  • pc
    .icon-pc
  • 用户
    .icon-yonghu2
  • Speed
    .icon-Speed
  • 高性价比
    .icon-gaoxingjiabi
  • 我的工单
    .icon-myOrder
  • 余额 (1)
    .icon-yue
  • host
    .icon-p_host
  • 域名与网站
    .icon-yumingyuwangzhan
  • 云虚拟主机
    .icon-yunxunizhuji
  • dns云解析
    .icon-dnsyunjiexi
  • 云数据库 redis
    .icon-NoSQLshujukuredis
  • 控制台
    .icon-kongzhitai-
  • 用户
    .icon-yonghu3
  • 安全
    .icon-anquan
  • 售后
    .icon-shouhou
  • 忘记密码
    .icon-wangjimima
  • 账单
    .icon-zhangdan
  • 输入
    .icon-shuru
  • 域名解析
    .icon-yumingjiexi
  • 返回
    .icon-fanhui
  • 关闭
    .icon-guanbi
  • 全屏
    .icon-quanping
  • 箭头 上
    .icon-jiantoushang
  • 箭头 上
    .icon-jiantoushang1
  • 箭头 右
    .icon-jiantouyou
  • 箭头 下
    .icon-jiantouxia
  • 扫一扫
    .icon-saoyisao
  • 分类
    .icon-fenlei
  • 选中
    .icon-xuanzhong
  • 设置
    .icon-shezhi2
  • 闪电
    .icon-shandian
  • 微信 支付
    .icon-weixinzhifu3
  • wechat
    .icon-wechat1
  • 订单
    .icon-dingdan
  • 关闭26
    .icon-guanbi1
  • 快捷标签
    .icon-kuaijiebiaoqian
  • stable
    .icon-stable
  • hosting
    .icon-host
  • 换一换
    .icon-huanyihuan
  • 照相机
    .icon-zhaoxiangji
  • 主机
    .icon-zhuji
  • number_6
    .icon-number_
  • number_7
    .icon-number_1
  • number_9
    .icon-number_2
  • number_0
    .icon-number_3
  • number_3
    .icon-number_4
  • number_1
    .icon-number_5
  • number_4
    .icon-number_6
  • number_8
    .icon-number_7
  • number_punctuation
    .icon-number_punctuation
  • 账单
    .icon-zhangdan1
  • number_5
    .icon-number_8
  • number_2
    .icon-number_9
  • add
    .icon-add
  • 3column
    .icon-column
  • back
    .icon-back
  • extend
    .icon-extend
  • forward
    .icon-forward
  • increase
    .icon-increase
  • left
    .icon-left
  • nav-list
    .icon-nav-list
  • navigation
    .icon-navigation
  • register
    .icon-register
  • refresh
    .icon-refresh
  • search
    .icon-search
  • setting
    .icon-setting
  • sync
    .icon-sync
  • view-list
    .icon-view-list
  • search-o
    .icon-search-o
  • view-list-o
    .icon-view-list-o
  • cloud-hosting
    .icon-cloud-hosting
  • arrow-down
    .icon-arrow-down
  • arrow-left
    .icon-arrow-left
  • arrow-right
    .icon-arrow-right
  • arrow-up
    .icon-arrow-up
  • arrow-down
    .icon-arrow-down1
  • arrow-right
    .icon-arrow-right1
  • arrow-left
    .icon-arrow-left1
  • arrow-up
    .icon-arrow-up1
  • cloud logo
    .icon-cloudlogo
  • twitter
    .icon-twitter
  • wechat
    .icon-wechat
  • weibo
    .icon-weibo
  • qzone
    .icon-qzone
  • qq
    .icon-qq
  • github
    .icon-github
  • csdn
    .icon-csdn
  • Facebook
    .icon-Facebook
  • alipay
    .icon-alipay
  • linkedin
    .icon-linkedin
  • google
    .icon-google
  • skype
    .icon-skype
  • union_pay
    .icon-union_pay
  • alipay
    .icon-alipay1
  • IDC管理
    .icon-IDCguanli
  • 微信
    .icon-weixin
  • 售后
    .icon-shouhou1
  • hostSafe
    .icon-fanghuyezhuji
  • 箭头
    .icon-jiantou
  • 主机
    .icon-zhuji1
  • 绑定账号
    .icon-bangdingzhanghao
  • 微信 支付
    .icon-weixinzhifu2
  • w0810005空调机房
    .icon-wkongtiaojifang
  • IDC机房
    .icon-IDCjifang
  • 闪电
    .icon-shandian1
  • IDC机房
    .icon-IDCjifang1
  • 绑定账号
    .icon-bangdingzhanghao-copy

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

  • 支付宝
    #icon-zhifubao
  • #icon-wo
  • 列表
    #icon-liebiao
  • 添加
    #icon-tianjia
  • 列表
    #icon-iconfontcolor69
  • 安全
    #icon-anquan1
  • 系统设置
    #icon-msnui-sys-set
  • more
    #icon-gengduo
  • 输入2
    #icon-shuru2
  • 个人中心-我的钱包
    #icon-gerenzhongxinwodeqianbao
  • miaojie_seller_selected
    #icon-miaojiesellerselected
  • Cloud network_2
    #icon-cloudnetwork2
  • safe
    #icon-safe
  • 列表
    #icon-liebiao2
  • 产品管理
    #icon-chanpinguanli
  • bind
    #icon-bind
  • 用户
    #icon-yonghu
  • 快捷应用
    #icon-kuaijieyingyon
  • more
    #icon-more
  • 修改
    #icon-xiugai-copy
  • 服务
    #icon-msnui-service
  • 购物车添加
    #icon-gouwuchetianjia
  • 二维码
    #icon-erweima
  • 我的订单
    #icon-wodedingdan
  • 我的红包
    #icon-wodehongbao
  • #icon-ju
  • 充值记录
    #icon-chongzhijilu
  • 服务
    #icon-fuwu
  • tel
    #icon-tel
  • 圆点中
    #icon-yuandianzhong
  • 云主机,云服务器架构
    #icon-yunzhuji
  • 1u
    #icon-1u
  • 2u
    #icon-2u
  • 4u
    #icon-4u
  • 模块
    #icon-ai-module
  • 银联
    #icon-yinlian
  • 充值2
    #icon-chongzhi2
  • 列表
    #icon-liebiao1
  • 文章管理02
    #icon-wenzhangguanli
  • 我的钱包
    #icon-wodeqianbaoshangjia
  • #icon-mian
  • pay-circle
    #icon-paycircle
  • #icon-gou
  • #icon-qian
  • 控制中心
    #icon-control
  • 成功
    #icon-chenggong
  • success
    #icon-success
  • 财务管理
    #icon-caiwuguanli
  • 扫码
    #icon-saoma
  • 云开发主机
    #icon-yunkaifazhuji
  • yxx_wechat_pay_success
    #icon-weixinzhifu1
  • 成功
    #icon-Success-Small
  • aright
    #icon-aright
  • 安全
    #icon-anquan2
  • 用户
    #icon-yonghu4
  • 删除
    #icon-shanchu
  • buy-webhosting-step1-dns
    #icon-buywebhostingstep1dns
  • buy-webhosting-step1-domain
    #icon-buywebhostingstep1domain
  • buy-webhosting-step2-server-security
    #icon-buywebhostingstep2serversecurity
  • 警告
    #icon-jinggao
  • 用户
    #icon-yonghu1
  • 时间
    #icon-time
  • 首页
    #icon-shouye
  • 加入云主机
    #icon-jiaruyunzhuji
  • 云主机(pitch on)
    #icon-yunzhujipitchon
  • 云主机
    #icon-yunzhuji1
  • 设置
    #icon-shezhi
  • home
    #icon-home
  • Preview
    #icon-Preview
  • 财务数据
    #icon-caiwushuju
  • clock
    #icon-naozhong
  • 设置
    #icon-shezhi-xue
  • back
    #icon-back1
  • 微信支付
    #icon-weixinzhifu
  • 工单
    #icon-order
  • paysuccess
    #icon-paysuccess
  • 设置
    #icon-shezhi1
  • 充值记录
    #icon-chongzhijilu1
  • easy
    #icon-easy
  • warn
    #icon-warn
  • pc
    #icon-pc
  • 用户
    #icon-yonghu2
  • Speed
    #icon-Speed
  • 高性价比
    #icon-gaoxingjiabi
  • 我的工单
    #icon-myOrder
  • 余额 (1)
    #icon-yue
  • host
    #icon-p_host
  • 域名与网站
    #icon-yumingyuwangzhan
  • 云虚拟主机
    #icon-yunxunizhuji
  • dns云解析
    #icon-dnsyunjiexi
  • 云数据库 redis
    #icon-NoSQLshujukuredis
  • 控制台
    #icon-kongzhitai-
  • 用户
    #icon-yonghu3
  • 安全
    #icon-anquan
  • 售后
    #icon-shouhou
  • 忘记密码
    #icon-wangjimima
  • 账单
    #icon-zhangdan
  • 输入
    #icon-shuru
  • 域名解析
    #icon-yumingjiexi
  • 返回
    #icon-fanhui
  • 关闭
    #icon-guanbi
  • 全屏
    #icon-quanping
  • 箭头 上
    #icon-jiantoushang
  • 箭头 上
    #icon-jiantoushang1
  • 箭头 右
    #icon-jiantouyou
  • 箭头 下
    #icon-jiantouxia
  • 扫一扫
    #icon-saoyisao
  • 分类
    #icon-fenlei
  • 选中
    #icon-xuanzhong
  • 设置
    #icon-shezhi2
  • 闪电
    #icon-shandian
  • 微信 支付
    #icon-weixinzhifu3
  • wechat
    #icon-wechat1
  • 订单
    #icon-dingdan
  • 关闭26
    #icon-guanbi1
  • 快捷标签
    #icon-kuaijiebiaoqian
  • stable
    #icon-stable
  • hosting
    #icon-host
  • 换一换
    #icon-huanyihuan
  • 照相机
    #icon-zhaoxiangji
  • 主机
    #icon-zhuji
  • number_6
    #icon-number_
  • number_7
    #icon-number_1
  • number_9
    #icon-number_2
  • number_0
    #icon-number_3
  • number_3
    #icon-number_4
  • number_1
    #icon-number_5
  • number_4
    #icon-number_6
  • number_8
    #icon-number_7
  • number_punctuation
    #icon-number_punctuation
  • 账单
    #icon-zhangdan1
  • number_5
    #icon-number_8
  • number_2
    #icon-number_9
  • add
    #icon-add
  • 3column
    #icon-column
  • back
    #icon-back
  • extend
    #icon-extend
  • forward
    #icon-forward
  • increase
    #icon-increase
  • left
    #icon-left
  • nav-list
    #icon-nav-list
  • navigation
    #icon-navigation
  • register
    #icon-register
  • refresh
    #icon-refresh
  • search
    #icon-search
  • setting
    #icon-setting
  • sync
    #icon-sync
  • view-list
    #icon-view-list
  • search-o
    #icon-search-o
  • view-list-o
    #icon-view-list-o
  • cloud-hosting
    #icon-cloud-hosting
  • arrow-down
    #icon-arrow-down
  • arrow-left
    #icon-arrow-left
  • arrow-right
    #icon-arrow-right
  • arrow-up
    #icon-arrow-up
  • arrow-down
    #icon-arrow-down1
  • arrow-right
    #icon-arrow-right1
  • arrow-left
    #icon-arrow-left1
  • arrow-up
    #icon-arrow-up1
  • cloud logo
    #icon-cloudlogo
  • twitter
    #icon-twitter
  • wechat
    #icon-wechat
  • weibo
    #icon-weibo
  • qzone
    #icon-qzone
  • qq
    #icon-qq
  • github
    #icon-github
  • csdn
    #icon-csdn
  • Facebook
    #icon-Facebook
  • alipay
    #icon-alipay
  • linkedin
    #icon-linkedin
  • google
    #icon-google
  • skype
    #icon-skype
  • union_pay
    #icon-union_pay
  • alipay
    #icon-alipay1
  • IDC管理
    #icon-IDCguanli
  • 微信
    #icon-weixin
  • 售后
    #icon-shouhou1
  • hostSafe
    #icon-fanghuyezhuji
  • 箭头
    #icon-jiantou
  • 主机
    #icon-zhuji1
  • 绑定账号
    #icon-bangdingzhanghao
  • 微信 支付
    #icon-weixinzhifu2
  • w0810005空调机房
    #icon-wkongtiaojifang
  • IDC机房
    #icon-IDCjifang
  • 闪电
    #icon-shandian1
  • IDC机房
    #icon-IDCjifang1
  • 绑定账号
    #icon-bangdingzhanghao-copy

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>