# IconFont

# IconFont 图标

- 天猫派对
  #icon-tianmaopaidui
- 客服优先
  #icon-kefuyouxian
- 列表
  #icon-liebiao
- 充值
  #icon-chongzhi
- 咖啡
  #icon-kafei
- 药品
  #icon-yaopin
- 汉堡
  #icon-hanbao
- 口红
  #icon-kouhong
- 图书
  #icon-tushu
- 手机
  #icon-shouji
- 列表
  #icon-liebiao1
- 购物车满
  #icon-gouwucheman
- 皇冠
  #icon-huangguan
- 出租
  #icon-chuzu
- 鞋\箱包
  #icon-xiexiangbao
- 精选市场
  #icon-jingxuanshichang
- 珠宝饰品
  #icon-zhubaoshipin
- 数码手机
  #icon-shumashouji
- 鞋/包
  #icon-xiebao
- 汽车配件
  #icon-qichepeijian
- 天猫形象1
  #icon-tianmaoxingxiang1
- 天猫形象2
  #icon-tianmaoxingxiang2
- 切换器右
  #icon-qiehuanqiyou
- 切换器左
  #icon-qiehuanqizuo
- 切换器（上）
  #icon-qiehuanqishang
- 地区浮层进入梁饭团按钮
  #icon-diqufucengjinruliangfantuananniu
- 地区下拉箭头
  #icon-diquxialajiantou
- 电梯类目
  #icon-diantileimu
- 回流区进口食品
  #icon-huiliuqujinkoushipin
- 箭头粗
  #icon-jiantoucu
- 箭头细
  #icon-jiantouxi
- 家居用品
  #icon-jiajuyongpin
- 我的资产
  #icon-wodezichan
- 品牌
  #icon-pinpai
- 天猫超市-购物车
  #icon-tianmaochaoshigouwuche
- 换一批
  #icon-huanyipi
- 小箭头
  #icon-xiaojiantou
- 加
  #icon-jia
- 已关注
  #icon-yiguanzhu
- 未关注
  #icon-weiguanzhu
- 天猫提示-疑问
  #icon-yiwen
- 天猫提示-出错
  #icon-chucuo
- 天猫提示-警示
  #icon-jingshi
- 天猫提示-正确
  #icon-zhengque
- 品牌专享
  #icon-pinpaizhuanxiang
- 天猫公告
  #icon-gonggao
- 天猫-极速退款
  #icon-tianmaojisutuikuan
- 天猫-七天退货
  #icon-tianmaoqitiantuihuo
- 我
  #icon-wo
- 表情
  #icon-biaoqing
- 功能建议
  #icon-gongnengjianyi
- 换一批
  #icon-huanyipi1
- 声波
  #icon-shengbo
- 持平
  #icon-chiping
- 下降
  #icon-xiajiang
- 进入店铺
  #icon-jinrudianpu
- 朋友圈
  #icon-pengyouquan
- 新浪
  #icon-xinlang
- 微信
  #icon-weixin
- 密码
  #icon-mima
- 二维码
  #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
- 淘
  #icon-tao
- 猫
  #icon-mao
- 未选中圆圈
  #icon-weixuanzhongyuanquan
- 删除2
  #icon-shanchu2
- 电话
  #icon-dianhua
- 回到顶部
  #icon-huidaodingbu
- 购物车-选中
  #icon-gouwuchexuanzhong
- 我的-选中
  #icon-wodexuanzhong
- 拍摄-选中
  #icon-paishexuanzhong
- 关于我
  #icon-guanyuwo
- search
  #icon-fenxiang
- cart
  #icon-cart
- home
  #icon-home
- home2
  #icon-home2
- search
  #icon-search
- refresh
  #icon-shuaxin
- mine
  #icon-mine
- mine2
  #icon-mine2
- 查看2
  #icon-chakan2
- 扫码
  #icon-iconfontscan
- 设置
  #icon-shezhi

## symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过`font-size`,`color`来调整样式。
- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

### 第一步：引入项目下面生成的symbol代码：

    <script src="./iconfont.js"></script>

### 第二步：加入通用css代码（引入一次就行）：

    <style type="text/css">
    .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>