• 充值
    
  • 理财
    
  • 保险
    
  • 店铺
    
  • 图片
    
  • 宝贝
    
  • 品牌
    
  • 女人
    
  • 取款机
    
  • 气泡
    
  • 日历
    
  • 钱袋
    
  • 认证用户
    
  • 禁止
    
  • 警告
    
  • 账户
    
  • 女商家
    
  • 管理员
    
  • 销量
    
  • 查找用户
    
  • 添加用户
    
  • 人民币
    
  • 
  • 
  • 错误
    
  • 正确
    
  • 随机用户
    
  • 附件
    
  • 刷新
    
  • 开始
    
  • 完成
    
  • 应用
    
  • 购物车满
    
  • 购物车空
    
  • 皇冠
    
  • 锁定
    
  • 解锁
    
  • 图文详情
    
  • 人像
    
  • 夜景
    
  • 左上
    
  • 向上
    
  • 右上
    
  • 向下
    
  • 右下
    
  • 向左
    
  • 新浪微博
    
  • 腾讯微博
    
  • 缩小
    
  • 放大
    
  • 全屏
    
  • 缩小
    
  • 放大
    
  • 新建窗口
    
  • 新窗口打开
    
  • 订单
    
  • 充电
    
  • 提升
    
  • 下降
    
  • html
    
  • css
    
  • 通知
    
  • 裁剪
    
  • 皇冠
    
  • 购物
    
  • 
  • 店铺
    
  • 金币
    
  • 钻石
    
  • 支付宝
    
  • 优质
    
  • 购物车
    
  • 回流区价格
    
  • 回流区活动
    
  • 充水电
    
  • 我的资产
    
  • 品2
    
  • 优2
    
  • 热2
    
  • 警告
    
  • 佣金
    
  • 点击
    
  • 持平
    
  • 下降
    
  • 上升
    
  • 二维码
    
  • 链接
    
  • 点赞
    
  • 返回8
    
  • 返回7
    
  • 返回6
    
  • 返回5
    
  • 更多
    
  • 收藏-选中
    
  • 收藏
    
  • 返回1
    
  • 返回2
    
  • 返回3
    
  • 返回4
    
  • 方向2
    
  • 方向3
    
  • 方向4
    
  • 三角2
    
  • 三角1
    
  • 三角4
    
  • 三角3
    
  • 优秀
    
  • 删除
    
  • 购物车-选中
    
  • 安卓下拉
    
  • 编辑
    
  • 查看
    
  • 链接
    
  • 设置
    
  • 排序
    
  • 排序2
    
  • 提示
    
  • 帮助
    
  • 大号选中背景
    
  • 标尺
    
  • 警告
    
  • 错误
    
  • kongtupian
    
  • xiangyou
    
  • 积分
    
  • 足迹
    
  • 下载
    
  • 回车
    
  • 有机会展示
    
  • 红包
    
  • 退款
    
  • 红包
    
  • more
    
  • cart
    
  • home
    
  • home2
    
  • Camera
    
  • Camera2
    
  • search
    
  • refresh
    
  • new
    
  • 查看2
    
  • 
  • 
  • 扫码
    
  • 全部订单
    
  • 设置
    
  • 现金支付
    
  • 等级
    
  • 3.1收藏-选中
    
  • 3.1收藏
    
  • 3.1语音-选中
    
  • 3.1语音
    
  • 3.1关闭
    
  • 3.1选择
    
  • 3.1关注店铺
    
  • 3.1选中
    
  • 3.1已关注店铺
    
  • 3.1点赞
    
  • 3.1店铺
    
  • 3.1分享
    
  • 3.1转发
    
  • 3.1待发货
    
  • 3.1待付款
    
  • 3.1待收货
    
  • 3.1待评价
    
  • 3.1退款退货
    
  • 3.1会员卡
    
  • 3.1积分
    
  • 3.1优惠券
    
  • 3.1天猫宝
    
  • 3.1红包
    
  • 3.1范儿-选中
    
  • 3.1范儿
    
  • 3.1购物车-选中
    
  • 3.1购物车
    
  • 3.1关注-选中
    
  • 3.1关注
    
  • 3.1首页-选中
    
  • 3.1首页
    
  • 3.1我的-选中
    
  • 3.1我的
    
  • 查看
    
  • 关闭
    
  • 关注
    
  • 火热
    
  • 喇叭
    
  • 3.1-热销
    
  • 3.1-扫码
    
  • 3.1-上新
    
  • 3.1-提示
    
  • 3.1-疑问
    
  • 3.1产品参数
    
  • 3.1电话
    
  • 3.1订单
    
  • 3.1关注1-选中
    
  • 3.1关注1
    
  • 3.1足迹
    
  • 3.1图文详情
    
  • 3.1 二维码
    
  • mac
    
  • windows
    
  • android
    
  • 余额
    
  • 工作流程图
    
  • 新人考核标准
    
  • 新人课程
    
  • 新人指南
    
  • 上移
    
  • service-24小时发货
    
  • 好大牌
    
  • 商品
    
  • 等待确认
    
  • bitbucket
    
  • 等级
    
  • 余额
    
  • 商品
    
  • 支付宝
    
  • 等级一
    
  • 等级
    
  • 金币
    
  • 余额
    
  • 积分
    
  • 现金支付
    
  • 商品
    
  • 我的金币银币
    
  • B010-现金
    
  • 商品
    
  • 等级
    
  • 等级
    
  • 等级
    
  • 现金券
    
  • 积分
    
  • 现金券
    
  • 积分
    
  • 金币
    
  • 等级
    
  • 铜币
    
  • 积分
    
  • 金币
    
  • 等级
    
  • 等级
    
  • 等级1
    
  • 等级
    
  • 积分
    
  • 现金
    
  • 等级卡
    
  • 等级
    
  • 等级
    
  • 联系人等级
    
  • 商品
    
  • 现金
    
  • 铜币
    
  • 银币
    
  • 积分
    
  • 资产等级
    
  • 金币
    
  • 积分
    
  • 会员等级
    
  • 特权使用等级LV
    
  • 金币
    
  • 等级
    
  • 危险等级
    
  • 等级
    
  • 危险等级
    
  • 危险等级
    
  • 等级
    
  • 等级不符
    
  • 余额
    
  • gitlab
    
  • 等级
    
  • 等级
    
  • 积分
    
  • 等级icon
    
  • 银币
    
  • 积分
    
  • 等级
    
  • 等级1-9
    
  • 现金
    
  • 商品
    
  • 等级
    
  • 金币
    
  • 等级-sss
    
  • 等级-ss
    
  • 等级-S
    
  • 等级
    
  • 积分
    
  • 等级
    
  • 商品
    
  • 等级
    
  • 等级
    
  • 现金
    
  • 等级2-06
    
  • 等级2-09
    
  • 等级2-02
    
  • 等级2-05
    
  • 等级2-03
    
  • 等级2-07
    
  • 等级2-08
    
  • 等级2-10
    
  • 等级2-04
    
  • 等级2-01
    
  • bitcoin
    
  • 余额
    
  • 积分
    
  • 商品 1
    
  • 积分 (1)
    
  • 员工等级
    
  • 现金券
    
  • 等级
    
  • 等级
    
  • 现金
    
  • 商品
    
  • 会员等级
    
  • 余额
    
  • 等级体系
    
  • 商品
    
  • 等级
    
  • 会员等级分布
    
  • 等级
    
  • 现金
    
  • 等级 (1)-01
    
  • 特惠-代理商-等级-v1~v8-01
    
  • 特惠-代理商-等级-v1~v8-03
    
  • 特惠-代理商-等级-v1~v8-04
    
  • 特惠-代理商-等级-v1~v8-05
    
  • 特惠-代理商-等级-v1~v8-06
    
  • 特惠-代理商-等级-v1~v8-07
    
  • 特惠-代理商-等级-v1~v8-08
    
  • 特惠-代理商-等级-v1~v8-09-09
    
  • 现金
    

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-chongzhi
  • 理财
    .icon-licai
  • 保险
    .icon-baoxian
  • 店铺
    .icon-dianpu
  • 图片
    .icon-tupian
  • 宝贝
    .icon-baobei
  • 品牌
    .icon-pinpai
  • 女人
    .icon-nvren
  • 取款机
    .icon-qukuanji
  • 气泡
    .icon-qipao
  • 日历
    .icon-rili
  • 钱袋
    .icon-qiandai
  • 认证用户
    .icon-renzhengyonghu
  • 禁止
    .icon-jinzhi
  • 警告
    .icon-jinggao
  • 账户
    .icon-zhanghu
  • 女商家
    .icon-nvshangjia
  • 管理员
    .icon-guanliyuan
  • 销量
    .icon-xiaoliang
  • 查找用户
    .icon-chazhaoyonghu
  • 添加用户
    .icon-tianjiayonghu
  • 人民币
    .icon-renminbi
  • .icon-jian
  • .icon-jia
  • 错误
    .icon-cuowu
  • 正确
    .icon-zhengque
  • 随机用户
    .icon-suijiyonghu
  • 附件
    .icon-fujian
  • 刷新
    .icon-shuaxin
  • 开始
    .icon-kaishi
  • 完成
    .icon-wancheng
  • 应用
    .icon-yingyong
  • 购物车满
    .icon-gouwucheman
  • 购物车空
    .icon-gouwuchekong
  • 皇冠
    .icon-huangguan
  • 锁定
    .icon-suoding
  • 解锁
    .icon-jiesuo
  • 图文详情
    .icon-tuwenxiangqing
  • 人像
    .icon-renxiang
  • 夜景
    .icon-yejing
  • 左上
    .icon-zuoshang
  • 向上
    .icon-xiangshang
  • 右上
    .icon-youshang
  • 向下
    .icon-xiangxia
  • 右下
    .icon-youxia
  • 向左
    .icon-xiangzuo
  • 新浪微博
    .icon-xinlangweibo
  • 腾讯微博
    .icon-tengxunweibo
  • 缩小
    .icon-suoxiao
  • 放大
    .icon-fangda
  • 全屏
    .icon-quanping
  • 缩小
    .icon-suoxiao1
  • 放大
    .icon-fangda1
  • 新建窗口
    .icon-xinjianchuangkou
  • 新窗口打开
    .icon-xinchuangkoudakai
  • 订单
    .icon-dingdan
  • 充电
    .icon-chongdian
  • 提升
    .icon-tisheng
  • 下降
    .icon-xiajiang
  • html
    .icon-html
  • css
    .icon-css
  • 通知
    .icon-tongzhi
  • 裁剪
    .icon-caijian
  • 皇冠
    .icon-huangguan1
  • 购物
    .icon-gouwu
  • .icon-quan
  • 店铺
    .icon-dianpu1
  • 金币
    .icon-jinbi
  • 钻石
    .icon-zuanshi
  • 支付宝
    .icon-zhifubao
  • 优质
    .icon-youzhi
  • 购物车
    .icon-gouwuche
  • 回流区价格
    .icon-huiliuqujiage
  • 回流区活动
    .icon-huiliuquhuodong
  • 充水电
    .icon-chongshuidian
  • 我的资产
    .icon-wodezichan
  • 品2
    .icon-pin2
  • 优2
    .icon-you2
  • 热2
    .icon-re2
  • 警告
    .icon-jinggao1
  • 佣金
    .icon-yongjin
  • 点击
    .icon-dianji
  • 持平
    .icon-chiping
  • 下降
    .icon-xiajiang1
  • 上升
    .icon-shangsheng
  • 二维码
    .icon-erweima
  • 链接
    .icon-lianjie
  • 点赞
    .icon-dianzan
  • 返回8
    .icon-fanhui8
  • 返回7
    .icon-fanhui7
  • 返回6
    .icon-fanhui6
  • 返回5
    .icon-fanhui5
  • 更多
    .icon-gengduo
  • 收藏-选中
    .icon-shoucangxuanzhong
  • 收藏
    .icon-shoucang
  • 返回1
    .icon-fanhui1
  • 返回2
    .icon-fanhui2
  • 返回3
    .icon-fanhui3
  • 返回4
    .icon-fanhui4
  • 方向2
    .icon-fangxiang2
  • 方向3
    .icon-fangxiang3
  • 方向4
    .icon-fangxiang4
  • 三角2
    .icon-sanjiao2
  • 三角1
    .icon-sanjiao1
  • 三角4
    .icon-sanjiao4
  • 三角3
    .icon-sanjiao3
  • 优秀
    .icon-youxiu
  • 删除
    .icon-shanchu
  • 购物车-选中
    .icon-gouwuchexuanzhong
  • 安卓下拉
    .icon-anzhuoxiala
  • 编辑
    .icon-bianji
  • 查看
    .icon-chakan
  • 链接
    .icon-lianjie1
  • 设置
    .icon-shezhi
  • 排序
    .icon-paixu
  • 排序2
    .icon-paixu2
  • 提示
    .icon-tishi
  • 帮助
    .icon-bangzhu
  • 大号选中背景
    .icon-dahaoxuanzhongbeijingeps
  • 标尺
    .icon-biaochi
  • 警告
    .icon-jinggao2
  • 错误
    .icon-cuowu1
  • kongtupian
    .icon-kongtupian
  • xiangyou
    .icon-xiangyou
  • 积分
    .icon-jifen
  • 足迹
    .icon-zuji
  • 下载
    .icon-xiazai
  • 回车
    .icon-huiche
  • 有机会展示
    .icon-youjihuizhanshi
  • 红包
    .icon-hongbao
  • 退款
    .icon-tuikuan
  • 红包
    .icon-tuikuan1
  • more
    .icon-gengduo1
  • cart
    .icon-cart
  • home
    .icon-home
  • home2
    .icon-home2
  • Camera
    .icon-camera
  • Camera2
    .icon-camera2
  • search
    .icon-search
  • refresh
    .icon-shuaxin1
  • new
    .icon-new
  • 查看2
    .icon-chakan2
  • .icon-jia1
  • .icon-jian1
  • 扫码
    .icon-iconfontscan
  • 全部订单
    .icon-quanbudingdan
  • 设置
    .icon-shezhi1
  • 现金支付
    .icon-xianjinzhifu
  • 等级
    .icon-dengji
  • 3.1收藏-选中
    .icon-31shoucangxuanzhong
  • 3.1收藏
    .icon-31shoucang
  • 3.1语音-选中
    .icon-31yuyinxuanzhong
  • 3.1语音
    .icon-31yuyin
  • 3.1关闭
    .icon-31guanbi
  • 3.1选择
    .icon-31xuanze
  • 3.1关注店铺
    .icon-31guanzhudianpu
  • 3.1选中
    .icon-31xuanzhong
  • 3.1已关注店铺
    .icon-31yiguanzhudianpu
  • 3.1点赞
    .icon-31dianzan
  • 3.1店铺
    .icon-31dianpu
  • 3.1分享
    .icon-31fenxiang
  • 3.1转发
    .icon-31zhuanfa
  • 3.1待发货
    .icon-31daifahuo
  • 3.1待付款
    .icon-31daifukuan
  • 3.1待收货
    .icon-31daishouhuo
  • 3.1待评价
    .icon-31daipingjia
  • 3.1退款退货
    .icon-tuikuantuihuo
  • 3.1会员卡
    .icon-31huiyuanqia
  • 3.1积分
    .icon-31jifen
  • 3.1优惠券
    .icon-31youhuiquan
  • 3.1天猫宝
    .icon-31tianmaobao
  • 3.1红包
    .icon-31hongbao
  • 3.1范儿-选中
    .icon-31fanerxuanzhong
  • 3.1范儿
    .icon-31faner
  • 3.1购物车-选中
    .icon-31gouwuchexuanzhong
  • 3.1购物车
    .icon-31gouwuche
  • 3.1关注-选中
    .icon-31guanzhuxuanzhong
  • 3.1关注
    .icon-31guanzhu
  • 3.1首页-选中
    .icon-31shouyexuanzhong
  • 3.1首页
    .icon-31shouye
  • 3.1我的-选中
    .icon-31wodexuanzhong
  • 3.1我的
    .icon-31wode
  • 查看
    .icon-chakan1
  • 关闭
    .icon-guanbi
  • 关注
    .icon-guanzhu
  • 火热
    .icon-huore
  • 喇叭
    .icon-laba
  • 3.1-热销
    .icon-31rexiao
  • 3.1-扫码
    .icon-31saoma
  • 3.1-上新
    .icon-31shangxin
  • 3.1-提示
    .icon-31tishi
  • 3.1-疑问
    .icon-31yiwen
  • 3.1产品参数
    .icon-31chanpincanshu
  • 3.1电话
    .icon-31dianhua
  • 3.1订单
    .icon-31dingdan
  • 3.1关注1-选中
    .icon-31guanzhu1xuanzhong
  • 3.1关注1
    .icon-31guanzhu1
  • 3.1足迹
    .icon-31zuji
  • 3.1图文详情
    .icon-31tuwenxiangqing
  • 3.1 二维码
    .icon-31erweima
  • mac
    .icon-mac
  • windows
    .icon-windows
  • android
    .icon-android
  • 余额
    .icon-yue
  • 工作流程图
    .icon-gongzuoliuchengtu
  • 新人考核标准
    .icon-xinrenkaohebiaozhun
  • 新人课程
    .icon-xinrenkecheng
  • 新人指南
    .icon-xinrenzhinan
  • 上移
    .icon-shangyi
  • service-24小时发货
    .icon-service24xiaoshifahuo
  • 好大牌
    .icon-haodapai
  • 商品
    .icon-shop
  • 等待确认
    .icon-dengdaiqueren
  • bitbucket
    .icon-bitbucket
  • 等级
    .icon-dengji1
  • 余额
    .icon-yue1
  • 商品
    .icon-goods
  • 支付宝
    .icon-zhifubao1
  • 等级一
    .icon-dengjiyi
  • 等级
    .icon-dengji2
  • 金币
    .icon-jinbi1
  • 余额
    .icon-yue2
  • 积分
    .icon-jifen1
  • 现金支付
    .icon-xianjinliuliangbiao
  • 商品
    .icon-shangpin
  • 我的金币银币
    .icon-wodejinbiyinbi
  • B010-现金
    .icon-APPicon-xianjin
  • 商品
    .icon-goods1
  • 等级
    .icon-dengji3
  • 等级
    .icon-icon-test
  • 等级
    .icon-feihuiyuan
  • 现金券
    .icon-xianjinquan
  • 积分
    .icon-jifen2
  • 现金券
    .icon-xianjinquan1
  • 积分
    .icon-jifen3
  • 金币
    .icon-jinbi2
  • 等级
    .icon-dengji4
  • 铜币
    .icon-tongbi
  • 积分
    .icon-jifen4
  • 金币
    .icon-jinbi3
  • 等级
    .icon-weibiaoti-
  • 等级
    .icon-dengji5
  • 等级1
    .icon-dengji6
  • 等级
    .icon-dengji7
  • 积分
    .icon-jifen5
  • 现金
    .icon-xianjin
  • 等级卡
    .icon-dengjiqia
  • 等级
    .icon-dengji__
  • 等级
    .icon-maijiadengji-
  • 联系人等级
    .icon-lianxirendengji
  • 商品
    .icon-goods2
  • 现金
    .icon-xianjin1
  • 铜币
    .icon-tongbi1
  • 银币
    .icon-yinbi
  • 积分
    .icon-jifen6
  • 资产等级
    .icon-zcdj
  • 金币
    .icon-jinbi4
  • 积分
    .icon-jifen7
  • 会员等级
    .icon-huiyuandengji
  • 特权使用等级LV
    .icon-tequanshiyongdengjiLV
  • 金币
    .icon-jinbi5
  • 等级
    .icon-dengji8
  • 危险等级
    .icon-weixiandengji
  • 等级
    .icon-dengji9
  • 危险等级
    .icon-weixiandengji-copy
  • 危险等级
    .icon-weixiandengji-copy1
  • 等级
    .icon-dengji10
  • 等级不符
    .icon-dengjibufu
  • 余额
    .icon-yue3
  • gitlab
    .icon-gitlab
  • 等级
    .icon-grade
  • 等级
    .icon-dengji11
  • 积分
    .icon-jifen8
  • 等级icon
    .icon-dengjiicon
  • 银币
    .icon-yinbi1
  • 积分
    .icon-jifen9
  • 等级
    .icon-dengji12
  • 等级1-9
    .icon-dengji-
  • 现金
    .icon-xianjin2
  • 商品
    .icon-shangpin1
  • 等级
    .icon-dengji13
  • 金币
    .icon-jinbi6
  • 等级-sss
    .icon-dengji-sss
  • 等级-ss
    .icon-dengji-ss
  • 等级-S
    .icon-dengji-S
  • 等级
    .icon-dengji14
  • 积分
    .icon-jifen10
  • 等级
    .icon-dengji15
  • 商品
    .icon-shangpin2
  • 等级
    .icon-dengji16
  • 等级
    .icon-dengji17
  • 现金
    .icon-haikezhangguizhushou_xianjin
  • 等级2-06
    .icon-dengji-1
  • 等级2-09
    .icon-dengji-2
  • 等级2-02
    .icon-dengji-3
  • 等级2-05
    .icon-dengji-4
  • 等级2-03
    .icon-dengji-5
  • 等级2-07
    .icon-dengji-6
  • 等级2-08
    .icon-dengji-7
  • 等级2-10
    .icon-dengji-8
  • 等级2-04
    .icon-dengji-9
  • 等级2-01
    .icon-dengji-10
  • bitcoin
    .icon-bitcoin
  • 余额
    .icon-yue4
  • 积分
    .icon-jifen11
  • 商品 1
    .icon-shangpin3
  • 积分 (1)
    .icon-jifen12
  • 员工等级
    .icon-lui-job-level
  • 现金券
    .icon-xianjinquan2
  • 等级
    .icon-dengji18
  • 等级
    .icon-dengji-copy-copy-copy-copy
  • 现金
    .icon-xianjin3
  • 商品
    .icon-shangpin4
  • 会员等级
    .icon-huiyuandengji1
  • 余额
    .icon-yue5
  • 等级体系
    .icon-dengjitixi
  • 商品
    .icon-shangpin5
  • 等级
    .icon-dengji19
  • 会员等级分布
    .icon-huiyuandengjifenbu
  • 等级
    .icon-dengji20
  • 现金
    .icon-renminbi1
  • 等级 (1)-01
    .icon-dengji-11
  • 特惠-代理商-等级-v1~v8-01
    .icon-tehui-dailishang-dengji-vv-
  • 特惠-代理商-等级-v1~v8-03
    .icon-tehui-dailishang-dengji-vv-1
  • 特惠-代理商-等级-v1~v8-04
    .icon-tehui-dailishang-dengji-vv-2
  • 特惠-代理商-等级-v1~v8-05
    .icon-tehui-dailishang-dengji-vv-3
  • 特惠-代理商-等级-v1~v8-06
    .icon-tehui-dailishang-dengji-vv-4
  • 特惠-代理商-等级-v1~v8-07
    .icon-tehui-dailishang-dengji-vv-5
  • 特惠-代理商-等级-v1~v8-08
    .icon-tehui-dailishang-dengji-vv-6
  • 特惠-代理商-等级-v1~v8-09-09
    .icon-tehui-dailishang-dengji-vv--
  • 现金
    .icon-xianjin4

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-chongzhi
  • 理财
    #icon-licai
  • 保险
    #icon-baoxian
  • 店铺
    #icon-dianpu
  • 图片
    #icon-tupian
  • 宝贝
    #icon-baobei
  • 品牌
    #icon-pinpai
  • 女人
    #icon-nvren
  • 取款机
    #icon-qukuanji
  • 气泡
    #icon-qipao
  • 日历
    #icon-rili
  • 钱袋
    #icon-qiandai
  • 认证用户
    #icon-renzhengyonghu
  • 禁止
    #icon-jinzhi
  • 警告
    #icon-jinggao
  • 账户
    #icon-zhanghu
  • 女商家
    #icon-nvshangjia
  • 管理员
    #icon-guanliyuan
  • 销量
    #icon-xiaoliang
  • 查找用户
    #icon-chazhaoyonghu
  • 添加用户
    #icon-tianjiayonghu
  • 人民币
    #icon-renminbi
  • #icon-jian
  • #icon-jia
  • 错误
    #icon-cuowu
  • 正确
    #icon-zhengque
  • 随机用户
    #icon-suijiyonghu
  • 附件
    #icon-fujian
  • 刷新
    #icon-shuaxin
  • 开始
    #icon-kaishi
  • 完成
    #icon-wancheng
  • 应用
    #icon-yingyong
  • 购物车满
    #icon-gouwucheman
  • 购物车空
    #icon-gouwuchekong
  • 皇冠
    #icon-huangguan
  • 锁定
    #icon-suoding
  • 解锁
    #icon-jiesuo
  • 图文详情
    #icon-tuwenxiangqing
  • 人像
    #icon-renxiang
  • 夜景
    #icon-yejing
  • 左上
    #icon-zuoshang
  • 向上
    #icon-xiangshang
  • 右上
    #icon-youshang
  • 向下
    #icon-xiangxia
  • 右下
    #icon-youxia
  • 向左
    #icon-xiangzuo
  • 新浪微博
    #icon-xinlangweibo
  • 腾讯微博
    #icon-tengxunweibo
  • 缩小
    #icon-suoxiao
  • 放大
    #icon-fangda
  • 全屏
    #icon-quanping
  • 缩小
    #icon-suoxiao1
  • 放大
    #icon-fangda1
  • 新建窗口
    #icon-xinjianchuangkou
  • 新窗口打开
    #icon-xinchuangkoudakai
  • 订单
    #icon-dingdan
  • 充电
    #icon-chongdian
  • 提升
    #icon-tisheng
  • 下降
    #icon-xiajiang
  • html
    #icon-html
  • css
    #icon-css
  • 通知
    #icon-tongzhi
  • 裁剪
    #icon-caijian
  • 皇冠
    #icon-huangguan1
  • 购物
    #icon-gouwu
  • #icon-quan
  • 店铺
    #icon-dianpu1
  • 金币
    #icon-jinbi
  • 钻石
    #icon-zuanshi
  • 支付宝
    #icon-zhifubao
  • 优质
    #icon-youzhi
  • 购物车
    #icon-gouwuche
  • 回流区价格
    #icon-huiliuqujiage
  • 回流区活动
    #icon-huiliuquhuodong
  • 充水电
    #icon-chongshuidian
  • 我的资产
    #icon-wodezichan
  • 品2
    #icon-pin2
  • 优2
    #icon-you2
  • 热2
    #icon-re2
  • 警告
    #icon-jinggao1
  • 佣金
    #icon-yongjin
  • 点击
    #icon-dianji
  • 持平
    #icon-chiping
  • 下降
    #icon-xiajiang1
  • 上升
    #icon-shangsheng
  • 二维码
    #icon-erweima
  • 链接
    #icon-lianjie
  • 点赞
    #icon-dianzan
  • 返回8
    #icon-fanhui8
  • 返回7
    #icon-fanhui7
  • 返回6
    #icon-fanhui6
  • 返回5
    #icon-fanhui5
  • 更多
    #icon-gengduo
  • 收藏-选中
    #icon-shoucangxuanzhong
  • 收藏
    #icon-shoucang
  • 返回1
    #icon-fanhui1
  • 返回2
    #icon-fanhui2
  • 返回3
    #icon-fanhui3
  • 返回4
    #icon-fanhui4
  • 方向2
    #icon-fangxiang2
  • 方向3
    #icon-fangxiang3
  • 方向4
    #icon-fangxiang4
  • 三角2
    #icon-sanjiao2
  • 三角1
    #icon-sanjiao1
  • 三角4
    #icon-sanjiao4
  • 三角3
    #icon-sanjiao3
  • 优秀
    #icon-youxiu
  • 删除
    #icon-shanchu
  • 购物车-选中
    #icon-gouwuchexuanzhong
  • 安卓下拉
    #icon-anzhuoxiala
  • 编辑
    #icon-bianji
  • 查看
    #icon-chakan
  • 链接
    #icon-lianjie1
  • 设置
    #icon-shezhi
  • 排序
    #icon-paixu
  • 排序2
    #icon-paixu2
  • 提示
    #icon-tishi
  • 帮助
    #icon-bangzhu
  • 大号选中背景
    #icon-dahaoxuanzhongbeijingeps
  • 标尺
    #icon-biaochi
  • 警告
    #icon-jinggao2
  • 错误
    #icon-cuowu1
  • kongtupian
    #icon-kongtupian
  • xiangyou
    #icon-xiangyou
  • 积分
    #icon-jifen
  • 足迹
    #icon-zuji
  • 下载
    #icon-xiazai
  • 回车
    #icon-huiche
  • 有机会展示
    #icon-youjihuizhanshi
  • 红包
    #icon-hongbao
  • 退款
    #icon-tuikuan
  • 红包
    #icon-tuikuan1
  • more
    #icon-gengduo1
  • cart
    #icon-cart
  • home
    #icon-home
  • home2
    #icon-home2
  • Camera
    #icon-camera
  • Camera2
    #icon-camera2
  • search
    #icon-search
  • refresh
    #icon-shuaxin1
  • new
    #icon-new
  • 查看2
    #icon-chakan2
  • #icon-jia1
  • #icon-jian1
  • 扫码
    #icon-iconfontscan
  • 全部订单
    #icon-quanbudingdan
  • 设置
    #icon-shezhi1
  • 现金支付
    #icon-xianjinzhifu
  • 等级
    #icon-dengji
  • 3.1收藏-选中
    #icon-31shoucangxuanzhong
  • 3.1收藏
    #icon-31shoucang
  • 3.1语音-选中
    #icon-31yuyinxuanzhong
  • 3.1语音
    #icon-31yuyin
  • 3.1关闭
    #icon-31guanbi
  • 3.1选择
    #icon-31xuanze
  • 3.1关注店铺
    #icon-31guanzhudianpu
  • 3.1选中
    #icon-31xuanzhong
  • 3.1已关注店铺
    #icon-31yiguanzhudianpu
  • 3.1点赞
    #icon-31dianzan
  • 3.1店铺
    #icon-31dianpu
  • 3.1分享
    #icon-31fenxiang
  • 3.1转发
    #icon-31zhuanfa
  • 3.1待发货
    #icon-31daifahuo
  • 3.1待付款
    #icon-31daifukuan
  • 3.1待收货
    #icon-31daishouhuo
  • 3.1待评价
    #icon-31daipingjia
  • 3.1退款退货
    #icon-tuikuantuihuo
  • 3.1会员卡
    #icon-31huiyuanqia
  • 3.1积分
    #icon-31jifen
  • 3.1优惠券
    #icon-31youhuiquan
  • 3.1天猫宝
    #icon-31tianmaobao
  • 3.1红包
    #icon-31hongbao
  • 3.1范儿-选中
    #icon-31fanerxuanzhong
  • 3.1范儿
    #icon-31faner
  • 3.1购物车-选中
    #icon-31gouwuchexuanzhong
  • 3.1购物车
    #icon-31gouwuche
  • 3.1关注-选中
    #icon-31guanzhuxuanzhong
  • 3.1关注
    #icon-31guanzhu
  • 3.1首页-选中
    #icon-31shouyexuanzhong
  • 3.1首页
    #icon-31shouye
  • 3.1我的-选中
    #icon-31wodexuanzhong
  • 3.1我的
    #icon-31wode
  • 查看
    #icon-chakan1
  • 关闭
    #icon-guanbi
  • 关注
    #icon-guanzhu
  • 火热
    #icon-huore
  • 喇叭
    #icon-laba
  • 3.1-热销
    #icon-31rexiao
  • 3.1-扫码
    #icon-31saoma
  • 3.1-上新
    #icon-31shangxin
  • 3.1-提示
    #icon-31tishi
  • 3.1-疑问
    #icon-31yiwen
  • 3.1产品参数
    #icon-31chanpincanshu
  • 3.1电话
    #icon-31dianhua
  • 3.1订单
    #icon-31dingdan
  • 3.1关注1-选中
    #icon-31guanzhu1xuanzhong
  • 3.1关注1
    #icon-31guanzhu1
  • 3.1足迹
    #icon-31zuji
  • 3.1图文详情
    #icon-31tuwenxiangqing
  • 3.1 二维码
    #icon-31erweima
  • mac
    #icon-mac
  • windows
    #icon-windows
  • android
    #icon-android
  • 余额
    #icon-yue
  • 工作流程图
    #icon-gongzuoliuchengtu
  • 新人考核标准
    #icon-xinrenkaohebiaozhun
  • 新人课程
    #icon-xinrenkecheng
  • 新人指南
    #icon-xinrenzhinan
  • 上移
    #icon-shangyi
  • service-24小时发货
    #icon-service24xiaoshifahuo
  • 好大牌
    #icon-haodapai
  • 商品
    #icon-shop
  • 等待确认
    #icon-dengdaiqueren
  • bitbucket
    #icon-bitbucket
  • 等级
    #icon-dengji1
  • 余额
    #icon-yue1
  • 商品
    #icon-goods
  • 支付宝
    #icon-zhifubao1
  • 等级一
    #icon-dengjiyi
  • 等级
    #icon-dengji2
  • 金币
    #icon-jinbi1
  • 余额
    #icon-yue2
  • 积分
    #icon-jifen1
  • 现金支付
    #icon-xianjinliuliangbiao
  • 商品
    #icon-shangpin
  • 我的金币银币
    #icon-wodejinbiyinbi
  • B010-现金
    #icon-APPicon-xianjin
  • 商品
    #icon-goods1
  • 等级
    #icon-dengji3
  • 等级
    #icon-icon-test
  • 等级
    #icon-feihuiyuan
  • 现金券
    #icon-xianjinquan
  • 积分
    #icon-jifen2
  • 现金券
    #icon-xianjinquan1
  • 积分
    #icon-jifen3
  • 金币
    #icon-jinbi2
  • 等级
    #icon-dengji4
  • 铜币
    #icon-tongbi
  • 积分
    #icon-jifen4
  • 金币
    #icon-jinbi3
  • 等级
    #icon-weibiaoti-
  • 等级
    #icon-dengji5
  • 等级1
    #icon-dengji6
  • 等级
    #icon-dengji7
  • 积分
    #icon-jifen5
  • 现金
    #icon-xianjin
  • 等级卡
    #icon-dengjiqia
  • 等级
    #icon-dengji__
  • 等级
    #icon-maijiadengji-
  • 联系人等级
    #icon-lianxirendengji
  • 商品
    #icon-goods2
  • 现金
    #icon-xianjin1
  • 铜币
    #icon-tongbi1
  • 银币
    #icon-yinbi
  • 积分
    #icon-jifen6
  • 资产等级
    #icon-zcdj
  • 金币
    #icon-jinbi4
  • 积分
    #icon-jifen7
  • 会员等级
    #icon-huiyuandengji
  • 特权使用等级LV
    #icon-tequanshiyongdengjiLV
  • 金币
    #icon-jinbi5
  • 等级
    #icon-dengji8
  • 危险等级
    #icon-weixiandengji
  • 等级
    #icon-dengji9
  • 危险等级
    #icon-weixiandengji-copy
  • 危险等级
    #icon-weixiandengji-copy1
  • 等级
    #icon-dengji10
  • 等级不符
    #icon-dengjibufu
  • 余额
    #icon-yue3
  • gitlab
    #icon-gitlab
  • 等级
    #icon-grade
  • 等级
    #icon-dengji11
  • 积分
    #icon-jifen8
  • 等级icon
    #icon-dengjiicon
  • 银币
    #icon-yinbi1
  • 积分
    #icon-jifen9
  • 等级
    #icon-dengji12
  • 等级1-9
    #icon-dengji-
  • 现金
    #icon-xianjin2
  • 商品
    #icon-shangpin1
  • 等级
    #icon-dengji13
  • 金币
    #icon-jinbi6
  • 等级-sss
    #icon-dengji-sss
  • 等级-ss
    #icon-dengji-ss
  • 等级-S
    #icon-dengji-S
  • 等级
    #icon-dengji14
  • 积分
    #icon-jifen10
  • 等级
    #icon-dengji15
  • 商品
    #icon-shangpin2
  • 等级
    #icon-dengji16
  • 等级
    #icon-dengji17
  • 现金
    #icon-haikezhangguizhushou_xianjin
  • 等级2-06
    #icon-dengji-1
  • 等级2-09
    #icon-dengji-2
  • 等级2-02
    #icon-dengji-3
  • 等级2-05
    #icon-dengji-4
  • 等级2-03
    #icon-dengji-5
  • 等级2-07
    #icon-dengji-6
  • 等级2-08
    #icon-dengji-7
  • 等级2-10
    #icon-dengji-8
  • 等级2-04
    #icon-dengji-9
  • 等级2-01
    #icon-dengji-10
  • bitcoin
    #icon-bitcoin
  • 余额
    #icon-yue4
  • 积分
    #icon-jifen11
  • 商品 1
    #icon-shangpin3
  • 积分 (1)
    #icon-jifen12
  • 员工等级
    #icon-lui-job-level
  • 现金券
    #icon-xianjinquan2
  • 等级
    #icon-dengji18
  • 等级
    #icon-dengji-copy-copy-copy-copy
  • 现金
    #icon-xianjin3
  • 商品
    #icon-shangpin4
  • 会员等级
    #icon-huiyuandengji1
  • 余额
    #icon-yue5
  • 等级体系
    #icon-dengjitixi
  • 商品
    #icon-shangpin5
  • 等级
    #icon-dengji19
  • 会员等级分布
    #icon-huiyuandengjifenbu
  • 等级
    #icon-dengji20
  • 现金
    #icon-renminbi1
  • 等级 (1)-01
    #icon-dengji-11
  • 特惠-代理商-等级-v1~v8-01
    #icon-tehui-dailishang-dengji-vv-
  • 特惠-代理商-等级-v1~v8-03
    #icon-tehui-dailishang-dengji-vv-1
  • 特惠-代理商-等级-v1~v8-04
    #icon-tehui-dailishang-dengji-vv-2
  • 特惠-代理商-等级-v1~v8-05
    #icon-tehui-dailishang-dengji-vv-3
  • 特惠-代理商-等级-v1~v8-06
    #icon-tehui-dailishang-dengji-vv-4
  • 特惠-代理商-等级-v1~v8-07
    #icon-tehui-dailishang-dengji-vv-5
  • 特惠-代理商-等级-v1~v8-08
    #icon-tehui-dailishang-dengji-vv-6
  • 特惠-代理商-等级-v1~v8-09-09
    #icon-tehui-dailishang-dengji-vv--
  • 现金
    #icon-xianjin4

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>