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