ionic使用iconfont - 阿里巴巴矢量图标库是什么
;4、css使用font-face声明字体;5、css定义使用iconfont的样式;6、挑选相应图标并获取字体编码,应用于页面就可以显示图标了。如何下载阿里巴巴矢量图标库1、输入“阿里巴
Iconfont提供了近百万数量的图标,并且有多种使用方式。使用字体图标,相对图片占用小,更清晰,大小颜色更易控制。ionic官方提供的图标不够用,没有具体业务方面合适的图标，因此下面介绍Ionic使用Iconfont-阿里巴巴矢量图标库的方法。
材料/工具
iconfont
方法
登录Iconfont官网。
搜索图标并加入购物车。
点击右上角购物车图标,在打开的窗口中,点击"添加至项目",没有项目则会提示创建项目。
在app中使用自定义字体图标-Iconfont官方方式。效果图如图所示。
在“图标管理”“我的项目”中编辑图标,并生成图标链接。
复制生成的链接并添加到appsrc/index.html文件中.注意:给链接加上“http:”或“https:”否则在真机上显示不出来。当然也可以把资源下载到本地进行引用iconfont.css。
复制生成的链接。
在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中使用自定义图标-图片方式。效果图如图所示。
命名可以根据个人喜好。
查看图片代码，如图所示。
如图所示，仍为图片代码。
扩展阅读，以下内容您可能还感兴趣。
ionic favicon.ico在哪
Icon一般都在Resources文件夹里
ionic favicon.ico在哪
Icon一般都在Resources文件夹里
iconfont阿里巴巴矢量图标库怎么用？
使用方法为：
1、打开解压的文件夹中的demo.html；
2、看到下载的图标，按照demo的步骤，配置ionic的项目；
3、静态文件存放目录，新建font文件夹用来存放字体文件（可自定义存放）；
4、css使用font-face声明字体；
5、css定义使用iconfont的样式；
6、挑选相应图标并获取字体编码，应用于页面就可以显示图标了。
如何下载阿里巴巴矢量图标库
1、输入“阿里巴巴矢量图标库”百度搜索第一位就是；
2、打开网址，你可以选择右上角的搜索，搜索自己要的图标，例如*；
3、也可以选择去图标库自行选择想要的图标；
4、选择图标，点击图标变成橘色，即放在暂存架；
5、再次点击即可取消，或者在暂存架中鼠标滑过图标，图标右上角有删除小按钮也可删除选中；
6、选择好要用的图标后，点击暂存架的下载至本地，解压待用即可。
请教ios上使用阿里巴巴iconfont的问题
下载图标
1
由于度娘*，自己百度下载地址吧~
输入“阿里巴巴矢量图标库”百度搜索第一位就是啦
2
打开网址，你可以选择右上角的搜索，搜索自己要的图标，例如*
3
也可以选择去图标库自行选择想要的图标
4
选择图标，点击图标变成橘色，即放在暂存架
5
再次点击即可取消，或者在暂存架中鼠标滑过图标，图标右上角有删除小按钮也可删除选中
6
选择好要用的图标后，点击暂存架的下载至本地，解压待用
END
项目引用
1
打开解压的文件夹中的demo.html
2
我们下载的图标可看到了吧，按照demo的步骤，下面我们配置ionic的项目
3
静态文件存放目录，新建font文件夹用来存放字体文件（可自定义存放）
4
css使用font-face声明字体
5
css定义使用iconfont的样式
6
挑选相应图标并获取字体编码，应用于页面就可以显示图标啦
END
Tab及其他标签引用图标
1
大家发现，Ionic的图标只要加个类似ion-happy ion-XXX的class就可以应用相应的图标，那么我们怎么用阿里巴巴的矢量图标呢，不要急也有办法
打开直接解压的图标文件中的iconfont.css文件
2
将那些.icon-XXX:before{content:'XXXX'}也复制到你的css文件中去
看过ionic css文件源码的童鞋，是不是看到这些有点熟悉呢
3
那就对啦，只要在class中加 iconfont icon-XXX就可以使用图标了
如果P4P没有用好的话，反而会影响到自然流量，建议系统学习一下P4P
《史上最全P4P系列课》
