Ionic使用Iconfont-阿里巴巴矢量图标库原创

阅读：59次时间：2019-12-29 14:12:15来源：用户

最佳经验

由作者撰写原创经验并推荐置顶

Iconfont带来了近百万数量的小图标,并且有多种多样应用形式，运用字体小图标,比较图片占用小,更清楚,尺寸色调更易控制，ionic官方网站提供的小图标不足够,找不到详细业务层面适宜的标识，因此接下来详细介绍Ionic使用Iconfont-阿里巴巴矢量图标库的方法，以下内容是由微蓝经验网用户发布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
如图所示，仍为图片代码。