IconFont 图标
-
食物.icon-shiwu
-
食物.icon-shiwu1
-
化妆品.icon-iconfonthuazhuangpin
-
娱乐.icon-yule
-
购物.icon-shopping
-
足浴.icon-zuyu
-
休闲.icon-xiuxian-copy
-
休闲.icon-xiouxian
-
车.icon-che
-
这样玩.icon-yinle
-
银联.icon-yinlian
-
订单-fill.icon-dingdan-fill
-
二维码.icon-erweima
-
我的.icon-wode
-
订单.icon-dingdan
-
我的-fill.icon-wode-fill
-
消息.icon-xiaoxi
-
返回箭头.icon-fanhuijiantou
-
区域定位箭头.icon-quyudingweijiantou
-
首页-fill.icon-shouye-fill
-
首页.icon-shouye
-
搜索.icon-sousuo
-
女人.icon-nvren
-
休闲.icon-xiuxian
-
爱车.icon-aiche
-
购物.icon-gouwu
-
健康.icon-jiankang
-
生活服务.icon-shenghuofuwu
-
住宿.icon-zhusu
-
美食.icon-meishi
-
定位.icon-dingwei
-
返回箭头.icon-fanhuijiantou1
-
向下实.icon-xiangxiashi
-
支付宝.icon-zhifubao
-
微信.icon-weixin
-
充值银联.icon-chongzhiyinlian
-
收货地址.icon-shouhuodizhi
-
积分.icon-jifen
-
记录.icon-jilu
-
银联2.icon-yinlian1
-
对号.icon-duihao
-
余额.icon-yue
-
加号.icon-jiahao
-
减号.icon-jianhao
-
顶.icon-ding
-
待付款.icon-daifukuan
-
待评价.icon-daipingjia
-
退.icon-tui
-
待使用.icon-daishiyong
-
生日.icon-shengri
-
修改密码.icon-xiugaimima
-
合作.icon-hezuo
-
客服.icon-kefu
-
新人.icon-xinren
-
兑换.icon-duihuan
-
账户与安全.icon-zhanghuyuanquan
-
积分说明.icon-jifenshuoming
-
充值.icon-chongzhi
-
商城.icon-shangcheng
-
收藏.icon-shoucang
-
团购.icon-tuangou
-
刷新.icon-shuaxin
-
对号1.icon-duihao2
-
睁眼睛.icon-zhengyanjing
-
收藏-fill.icon-shoucang-fill
-
闭眼睛.icon-biyanjing
-
人物.icon-renwu
-
购物车.icon-gouwuche
-
电话.icon-dianhua
-
附近定位-fill.icon-fujindingwei-fill
-
附近定位.icon-fujindingwei
-
分享.icon-fenxiang
-
专享.icon-zhuanxiang
-
家族.icon-jiazu
-
成员.icon-chengyuan
-
点.icon-dian
-
验证码.icon-yanzhengma
-
手机.icon-shouji
-
密码2.icon-mima
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"。