IconFont 图标

天猫

.icon-tianmao4
购物车-选中

.icon-gouwuche-xuanzhong
我的-选中

.icon-wode-xuanzhong
购物车

.icon-gouwuche
我的

.icon-wode
首页

.icon-shouye
大众点评

.icon-dazhongdianping
豆瓣

.icon-douban
分享

.icon-share6
eyeoclose

.icon-eyeoclose
eyeopen

.icon-eyeopen
phonenum

.icon-phonenum
question

.icon-question
set

.icon-set
paynumber

.icon-paynumber
暂停

.icon-zanting
暂停

.icon-zanting1
暂停

.icon-zanting2
播放

.icon-bofang
分享

.icon-fenxiang
分享

.icon-fenxiang1
播放

.icon-play
播放

.icon-bofang1
下一曲

.icon-ttpodicon
上一曲

.icon-ttpodicon1
上一曲

.icon-ttpodicon2
下一曲

.icon-ttpodicon3
分享

.icon-fenxiang11
分享

.icon-fenxiang2
播放

.icon-play1
暂停 1

.icon-zanting3
播放

.icon-bofang2
分享

.icon-fenxiang3
分享

.icon-infenicon18
暂停

.icon-pause-outline
分享

.icon-fenxiang4
上一曲

.icon-shangyiqu
下一曲

.icon-xiayiqu
暂停

.icon-zanting4
分享

.icon-fenxiang5
播放

.icon-bofang3
分享

.icon-fenxiang6
分享

.icon-share
暂停

.icon-iconfontcolor96
播放器-下一曲

.icon-bofangqixiayiqu
锁屏-下一曲

.icon-suopingxiayiqu
锁屏-上一曲

.icon-suopingshangyiqu
主题-下一曲

.icon-zhutixiayiqu
天标

.icon-tianbiao
天

.icon-tian
天猫

.icon-tianmao
天猫

.icon-tianmao1
下一曲

.icon-xiayiqu1
随机播放

.icon-suijibofang
开始暂停

.icon-weibiaoti102
上一曲

.icon-icon1
下一曲

.icon-icon2
天猫

.icon-tianmao2
05

.icon-05
07

.icon-07
10

.icon-10
24

.icon-24
25

.icon-25
26

.icon-26
27

.icon-27
28

.icon-28
29

.icon-29
31

.icon-31
38

.icon-38
暂停

.icon-crm17
39

.icon-39
暂停

.icon-zanting5
暂停活动

.icon-zantinghuodong
7天

.icon-7tian
7天

.icon-7tian1
42

.icon-42
暂停

.icon-zanting6
天猫

.icon-tianmao3
50

.icon-50
上一曲

.icon-shangyiqu-copy
我

.icon-user
默认头像

.icon-default-avatar
暂停

.icon-zanting7
上一曲

.icon-shangyiqu-copy1
随机播放

.icon-suiji2
address

.icon-address
eyeoclose

.icon-eyeoclose
eyeopen

.icon-eyeopen
phonenum

.icon-phonenum
question

.icon-question
set

.icon-set
paynumber

.icon-paynumber
音乐_暂停

.icon-yinlezanting
下一曲40

.icon-tushujiemianxiayiqu40
随机播放

.icon-suijibofang1
随机播放

.icon-suijibofang2
随机播放

.icon-suijibofang3
随机播放

.icon-icon78
上一曲

.icon-icon129
下一曲

.icon-icon226
消息(1)

.icon-xiaoxi1
消息

.icon-xiaoxi
统计图阴

.icon-tongjitu111
用户

.icon-yonghu
工作

.icon-gongzuo
资讯

.icon-zixun
资讯_填充

.icon-zixuntianchong
定位

.icon-dingwei
下一曲

.icon-next
上一曲

.icon-shangyiqu1
下一曲

.icon-xiayiqu2
淘宝

.icon-taobao
腾讯微博

.icon-tengxunweibo
人人

.icon-renren
邮箱

.icon-youxiang
微信

.icon-weixin
支付宝

.icon-zhifubao
印象笔记

.icon-yinxiangbiji
Facebook

.icon-Facebook
dribbble

.icon-dribbble
linkedin

.icon-linkedin
Instagram

.icon-Instagram
pinterest

.icon-pinterest
qq空间

.icon-qqkongjian
reddit

.icon-reddit
tumblr

.icon-tumblr
知乎

.icon-zhihu
优酷

.icon-youku
twitter

.icon-twitter
quora

.icon-quora
path

.icon-path
有道云笔记

.icon-youdaoyunbiji
snapchat

.icon-snapchat
line

.icon-line
新浪微博

.icon-xinlangweibo
qq

.icon-qq
whatsapp

.icon-whatsapp
分类

.icon-fenlei
分类-选中

.icon-fenlei-xuanzhong
朋友圈

.icon-pengyouquan
向上

.icon-xiangshang
向下

.icon-xiangxia
时钟1

.icon-shizhong1
向左

.icon-xiangzuo
太和殿

.icon-01
长城

.icon-02
明十三陵

.icon-03
中央电视台总部大楼

.icon-051
天坛

.icon-06
埃菲尔铁塔-法

.icon-071
随机播放

.icon-random
悉尼歌剧院-澳

.icon-08
自由女神-美

.icon-09
白宫-美

.icon-101
帝国大厦-美

.icon-11
比萨斜塔-意

.icon-12
东京塔-日

.icon-14
埃及金字塔

.icon-17
罗马斗兽场

.icon-18
复活节岛石像

.icon-20
里约热内卢基督像-巴西

.icon-21
icon_twitter

.icon-twitter1
icon_facebook

.icon-facebook
微信

.icon-weixin1
icon_Yahoo

.icon-Yahoo
icon_Skye

.icon-Skye
icon_Google

.icon-Google
icon_anzhuo

.icon-anzhuo
icon_yamaxun

.icon-yamaxun
icon_linkedin

.icon-linkedin1
微信朋友圈

.icon-weixinpengyouquan
icon_YouTube

.icon-YouTube
qq

.icon-qq1
新浪

.icon-xinlang
facebook

.icon-facebook1
icon_Qzone

.icon-Qzone
icon_QQ

.icon-QQ
icon_xinlang

.icon-xinlang1
icon_tenxun_weibo

.icon-QQ_weibo
icon_zhifubao

.icon-zhifubao1
icon_taobao

.icon-taobao1
icon_weichat

.icon-weichat
icon_douban

.icon-douban1
icon_renren

.icon-renren1
icon_email

.icon-email
icon_youku

.icon-youku1
twitter

.icon-twitter2
苹果

.icon-pingguo
收藏

.icon-shoucang
卡券

.icon-qiaquan
文件

.icon-wenjian
编辑

.icon-bianji
设置

.icon-shezhi
地点

.icon-didian
飞机

.icon-feiji
电话

.icon-dianhua
垃圾桶

.icon-lajitong
手机

.icon-shouji
钱包

.icon-qianbao
邮箱

.icon-youxiang1
钥匙

.icon-yuechi
学位

.icon-xuewei
评分

.icon-pingfen
闹钟

.icon-naozhong
键盘

.icon-jianpan
百度

.icon-baidu
百度2

.icon-baidu2
QQ

.icon-QQ1
百度1

.icon-baidu1
QQ2

.icon-QQ2
QQ1

.icon-QQ11
淘宝

.icon-taobao2
淘宝1

.icon-taobao11
淘宝2

.icon-taobao21
腾讯微博1

.icon-tengxunweibo1
腾讯微博

.icon-tengxunweibo2
微信

.icon-weixin2
腾讯微博2

.icon-tengxunweibo21
微信1

.icon-weixin11
微信2

.icon-weixin21
新浪微博

.icon-xinlangweibo1
新浪微博1

.icon-xinlangweibo11
新浪微博2

.icon-xinlangweibo2
个人中心

.icon-icongerenzhongxin-01
回到首页

.icon-iconhuidaoshouye
angle-left

.icon-angle-left
angle-double-left

.icon-angle-double-left
angle-double-right

.icon-angle-double-right
angle-down

.icon-angle-down
angle-double-up

.icon-angle-double-up
angle-double-down

.icon-angle-double-down
angle-up

.icon-angle-up
angle-right

.icon-angle-right
arrow-small-down

.icon-arrow-small-down
arrow-down

.icon-arrow-down
arrow-left

.icon-arrow-left
arrow-right

.icon-arrow-right
arrow-small-left

.icon-arrow-small-left
arrow-small-right

.icon-arrow-small-right
arrow-up

.icon-arrow-up
arrow-small-up

.icon-arrow-small-up
chevron-thin-left

.icon-chevron-thin-left
chevron-thin-down

.icon-chevron-thin-down
chevron-thin-right

.icon-chevron-thin-right
chevron-thin-up

.icon-chevron-thin-up
triangle-down

.icon-triangle-down
rewind

.icon-rewind
triangle-left

.icon-triangle-left
triangle-right

.icon-triangle-right
triangle-up

.icon-triangle-up
fast-forward

.icon-fast-forward
客服

.icon-kefu
收起

.icon-shouqi-01
播放

.icon-bofang4
标签

.icon-biaoqian
WIFI

.icon-WIFI
错

.icon-cuo
点赞

.icon-dianzan
定位

.icon-dingwei1
对

.icon-dui
耳机

.icon-erji
更多

.icon-gengduo
风景

.icon-fengjing
光盘

.icon-guangpan
个人

.icon-geren
更多

.icon-gengduo-2
铃声

.icon-lingsheng
加

.icon-jia
蓝牙

.icon-lanya
女

.icon-nv
男

.icon-nan
设置

.icon-shezhi1
视频

.icon-shipin
收藏

.icon-shoucang1
搜索

.icon-sousuo
锁

.icon-suo
下拉

.icon-xiala
通知

.icon-tongzhi
下一首

.icon-xiayishou
下载

.icon-xiazai
信息

.icon-xinxi
语音

.icon-yuyin
转换

.icon-zhuanhuan
坐标

.icon-zuobiao
声音

.icon-shengyin
收藏

.icon-shoucang2
复制

.icon-fuzhi
安全设置

.icon-anquanshezhi
手机

.icon-shouji1
退出

.icon-tuichu
消息

.icon-xiaoxi2
工作记录

.icon-gongzuojilu
发现订单

.icon-faxiandingdan
个人信息

.icon-gerenxinxi
我的订单

.icon-wodedingdan
提交订单

.icon-tijiaodingdan
确认完成

.icon-querenwancheng
已绑定

.icon-yibangding
未绑定

.icon-weibangding
保存

.icon-baocun
取消

.icon-quxiao
添加

.icon-tianjia
编辑

.icon-bianji1
日期选择

.icon-riqixuanze
删除

.icon-shanchu
地址

.icon-dizhi-01
右箭头

.icon-youjiantou-01
优惠券

.icon-youhuiquan-01
待收货

.icon-daishouhuo-01
全部订单

.icon-quanbudingdan-01
优惠券-个人

.icon-youhuiquan-geren-01
删除

.icon-shanchu-01
放大镜

.icon-fangdajing
关闭

.icon-guanbi-01
没有订单

.icon-meiyoudingdan-01
选中

.icon-xuanzhong-01
未选中

.icon-weixuanzhong-01
支付

.icon-zhifu-01
左箭头

.icon-zuojiantou-01
更多

.icon-gengduo-01

font-class引用

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

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

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

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

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

<i class="iconfont icon-xxx"></i>

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