Iconfont-阿里巴巴矢量图标库（Ionic使用Iconfont-阿里巴巴矢量图标库）

目前应该是有很多小伙伴对于Ionic使用Iconfont-阿里巴巴矢量图标库方面的信息比较感兴趣，现在小编就收集了一些与Ionic使用Iconfont-阿里巴巴矢量图标库相关的信息来分享给大家，感兴趣的小伙伴可以接着往下看，希望会帮助到你哦

Iconfont提供了近百万数量的图标,并且有多种使用方式。

使用字体图标,相对图片占用小,更清晰,大小颜色更易控制。

ionic官方提供的图标不够用,没有具体业务方面合适的图标，因此下面介绍Ionic使用Iconfont-阿里巴巴矢量图标库的方法。

材料/工具iconfont方法1登录Iconfont官网。

2搜索图标并加入购物车。

3点击右上角购物车图标,在打开的窗口中,点击"添加至项目",没有项目则会提示创建项目。

4在app中使用自定义字体图标-Iconfont官方方式。

效果图如图所示。

5在“图标管理”“我的项目”中编辑图标,并生成图标链接。

6复制生成的链接并添加到appsrc/index.html文件中.注意:给链接加上“http:”或“https:”否则在真机上显示不出来。

当然也可以把资源下载到本地进行引用iconfont.css。

7复制生成的链接。

8在tab中使用自定义字体图标-ionic方式。

效果图如图所示。

9挑选图标并下载到本地。

10复制字体文件到项目中。

11到项目中进行粘贴。

12新建一个tab.scss文件。

13复制下载的iconfont.css文件的内容到其中。

14修改后的tab.scss。

15在tab中使用。

16其实在任何地方都可以用zhifubao和qq,也可以不用新建tab.scss,直接把自定义的css写在src/theme/variables.scss文件中,因为所有的.scss最终编译的css都放在了www/build/main.css文件中。

17在tab中使用自定义图标-图片方式。

效果图如图所示。

18命名可以根据个人喜好。

19查看图片代码，如图所示。

20如图所示，仍为图片代码。

本文到此结束，希望对大家有所帮助。