为什么使用阿里巴巴矢量图标库Iconfont
- Iconfont提供了近百万数量的图标,并且有多种使用方式
- 我们要使用字体图标,相对图片占用小,更清晰,大小颜色更易控制
- ionic官方提供的图标不够用,没有具体业务方面合适的图标
如何使用Iconfont
- 搜索图标并加入购物车
搜索图标并加入购物车
- 点击右上角购物车图标,在打开的窗口中,点击"添加至项目",没有项目则会提示创建项目
将图标添加至项目
创建项目
- 四种方式
一.在app中使用自定义字体图标-Iconfont官方方式
-
效果图
在app内容区域中使用自定义图标
-
在图标管理-我的项目中编辑图标,并生成图标链接
Paste_Image.png -
复制生成的链接并添加到app
src/index.html文件中.注意:给链接加上http:或https:否则在真机上显示不出来.当然也可以把资源下载到本地进行引用iconfont.css
复制生成的css链接
在index.html添加css链接 效果图完整代码如下.注意:这里用的是class,不像ionic图标使用的是name属性
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
<style>
.my-icon>i{
font-size: 32px;
height: 36px;
margin:10px;
}
</style>
</ion-header>
<ion-content>
<div class="my-icon">
<i class="iconfont icon-patorl-task" color="primary"></i>
<i class="iconfont icon-patorl-record" color="primary"></i>
<i class="iconfont icon-repair-task" color="energized"></i>
<i class="iconfont icon-repair-record" color="energized"></i>
<i class="iconfont icon-experiment-task" color="secondary"></i>
<i class="iconfont icon-experiment-record" color="secondary"></i>
<i class="iconfont icon-guard-task" color="danger"></i>
<i class="iconfont icon-guard-record" color="danger"></i>
</div>
<ion-list>
<ion-item>
试验记录
<ion-icon class="iconfont icon-experiment-record" color="secondary" item-right></ion-icon>
</ion-item>
<ion-item>
巡检记录
<ion-icon class="iconfont icon-patorl-record" color="primary" item-right></ion-icon>
</ion-item>
<ion-item>
<ion-icon class="iconfont icon-patorl-task" color="primary" item-left></ion-icon>
巡检任务
</ion-item>
<ion-item>
<ion-icon class="iconfont icon-experiment-task" color="secondary" item-left></ion-icon>
试验任务
</ion-item>
</ion-list>
</ion-content>
二.在tab中使用自定义字体图标-ionic方式
-
效果图
-
挑选图标并下载到本地
-
复制字体文件到项目中
-
新建一个
tab.scss文件,并复制下载的iconfont.css文件的内容到其中
-
修改后的
tab.scss
-
在tab中使用
-
其实在任何地方都可以用
zhifubao和qq,也可以不用新建tab.scss,直接把自定义的css写在src/theme/variables.scss文件中,因为所有的.scss最终编译的css都放在了www/build/main.css文件中
三.在tab中使用自定义图标-图片方式
-
效果图
在tab中使用自定义图标
-
看图看代码
- 上图代码
.ion-ios-my-test:before {
content: url("../assets/icon/test.png");
}
.ion-ios-my-test-outline:before {
content: url("../assets/icon/test-outline.png");
}
.tab-button[aria-selected=true] .ion-md-my-test:before {
content: url("../assets/icon/test.png");
}
.tab-button[aria-selected=false] .ion-md-my-test:before {
content: url("../assets/icon/test-outline.png");
}
四.在tab中使用自定义图标-svg
- 可以在Iconfont官网上下载svg格式.完整代码可以看这里
最后
很多人都犯得错误
