更换字体

这是第一个图标(蜜蜂推荐)是撸主原来的图标

这是UI给的效果图的图标，显然默认的图标不符合要求

查找图标所在的样式，在tabs.html文件中

icon-off="ion-ios-star" icon-on="ion-iso-sunny"

ion-ios-star为实体，ion-ios-star-outline为线框

点击时出现过渡

释放鼠标显示的样式为实体

1.用图片代替字体，弊端(点击的时候没有样式)

思路：将字体设置为全透明，后面加背景图，显示出背景图图标

.ion-ios-sunny-outline:before {  content: "11";  background-image:url("../img/icon_star_off.png");  background-repeat: no-repeat;  background-size: 25px 25px;  color:rgba(0,0,0,0);}.ion-ios-sunny:before {  content: "11";  background-image:url("../img/icon_star_on.png");  background-repeat: no-repeat;  background-size: 25px 25px;  color:rgba(0,0,0,0);}

效果：

点击图标，过渡效果（弊端：没有过渡效果）

释放鼠标效果

2.从字体库找字体替换默认字体(推荐使用)

阿里图标库：

下载后的文件夹

将

四个文件拷贝到你的地址中

复制iconfont.css里面的代码到你的css样式表中，然后在tabs.html中使用它。

效果：

点击图标，过渡效果（弊端：没有过渡效果）

释放鼠标效果

PS:大家觉得位置不对，那是因为撸主原来用背景图的方式做的图标，有位置改动。在写文档的时候并没有改回来，用字体的时候大家根据实际效果改就好。