ionic自定义图标样式详细资料

《ionic自定义图标样式详细资料》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、ionic自定义图标概述Ionic框架中内置了很多图标，我们只需要引用ionicicons中的样式即可Ionictabs示例工程中的tab图标

2、ew>但是有时我们需要自己的图标，因此我们需要定义自己的图标比如原理Ionic中内置的所有图标，都是通过字体文件以css样式的方式引入@font-face{font-family:"Ionicons";src:url("../fonts/ionicons.eot?v=1.5.2");src:url("../fonts/ionicons.eot?v=1.5.2#iefix")format("embedded-opentype"),url("../fonts/ionicons.ttf?v=1.5.2")format("t

3、ruetype"),url("../fonts/ionicons.woff?v=1.5.2")format("woff"),url("../fonts/ionicons.svg?v=1.5.2#Ionicons")format("svg");font-weight:normal;font-style:normal;}修改起来太麻烦因此我们想要自己的图标，可以参照这种方式，定义自己的图标，自定义图标实际上就成了自定义字体，归纳起来可分为三步1这里我们需要自己准备svg格式的矢量图2生成字体文件3在CSS中引用字体文件自定义图标操作步骤A将

4、要生成的图标做成svg格式详情可参见http://www.iconfont.cn/help/platform.htmlB到https://icomoon.io/app/#/select网站生成图标1单击importicons按钮导入我们准备好的svg图标集，或者AddiconsFromLibrary引用这个网站上的一些现成图标2选择要生成的图标，或者通过其菜单选择，全选SelectAll/不选None3点击右下角GenerateFontF按钮进入属性设置页面4进行字体属性设置5下载字体文件及dome6解压下载后的压缩包可以得到以下的文件

5、夹其中包括demo，style.css及fonts文件中的字体文件就是我们要的使用时，一起拷贝到我们的工程中即可C在Ionic工程中引用1将所要用的css及字体文件放到一个文件夹中2在index.html中引入我们的css3在需要的地方引用，和ionic中自带图标的方式相同，所有图标的样式名称可在dome.html文件中找到

6、ref="#/tab/dash">

7、sun3"href="#/tab/friends">示例工程可参见https://github.com/longtaoge/iconFo

8、ntDome/tree/master