IconFont 图标
-
notification_fill
-
notification
-
more
-
lock
-
mobile_fill
-
creative_fill
-
creative
-
rank_fill
-
支付宝钱包
-
余额宝
-
转账
-
信用卡还款
-
当面付
-
水电煤
-
手机充值
-
亲密付
-
股票
-
游戏充值
-
收款
-
机票
-
汇率换算
-
记账本
-
旅游特惠
-
快递
-
话费卡转让
-
手机宝令
-
钱包朋友
-
快抢
-
随身贷
-
我的保障
-
会员特权
-
成功
-
失败
-
警示
-
提示
-
帮助
-
等待
-
相机
-
手机通讯录
-
我的
-
搜索
-
地图
-
扫一扫
-
付款码
-
城市服务
-
教育缴费
-
一般
-
社交
-
通讯
-
数码
-
学习
-
礼物
-
还款
-
理财
-
工资
-
兼职
-
理财收益
-
其他收入
-
添加类目
-
财富A
-
财富B
-
paint_fill
-
paint
-
people_fill
-
people
-
repair
-
repair_fill
-
command_fill
-
command
-
community_fill
-
community
-
sponsor_fill
-
sponsor
-
单选-fill
-
单选
-
方形未选中
-
方形选中-fill
-
方形选中
-
关闭1
-
关闭2-fill
-
关闭2
-
加号
-
加号1
-
加号2-fill
-
减号
-
提示-fill
-
提示
-
问号-fill
-
问号
-
选择
-
圆形未选中
-
圆形选中-fill
-
圆形选中
-
标星-fill
-
标星
-
店铺-fill
-
店铺
-
分享
-
更多
-
购物车-fill
-
购物车
-
留言-fill
-
留言
-
朋友-fill
-
朋友
-
扫码
-
首页-fill
-
首页
-
通知-fill
-
通知
-
我的-fill
-
我的
-
信息-fill
-
信息
-
足迹
-
坐标-fill
-
向右1
-
向左1
-
相机1-fill
-
相机1
-
相机2
-
加载
-
刷新
-
wifi
-
Android更多
-
类目
-
单品
-
居家
-
品牌
-
特权专属
-
箱包
-
goods_new_fill
-
goods_new
-
news_hot_fill
-
news_hot
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.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;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。