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

ionic自定义图标 概述 Ionic 框架中内置了很多图标，我们只需要引用 ionic icons 中的样式即可 Ionic tabs 示例工程中的 tab 图标 但是有时我们需要自己的图标，因此我们需要定义自己的图标 比如 原理 Ionic 中内置的所有图标，都是通过字体文件以css 样式的方式引入 修改起来太麻烦 因此我们想要自己的图标，可以参照这种方式，定义自己的图标 ，自定义图标实际上就成了自定义字体，归纳起来可分为三步 1这里我们需要自己准备 svg格式的矢量图 2 生成字体文件 3 在CSS中引用字体文件 自定义图标操作步骤 A将要生成的图标 做成svg格式 详情可参见 /help/platform.html B到 https://icomoon.io/app/#/select 网站生成图标 1 单击 import icons 按钮 导入我们准备好的svg 图标集，或者Add icons From Library 引用这个网站上的一些现成图标 2 选择要生成的图标，或者通过其菜单选择，全选 SelectAll / 不选None 3 点击右下角 Generate Font F按钮 进入属性设置页面 4 进行字体属性设置 5 下载字体文件及dome 6解压下载后的压缩包 可以得到以下的文件夹 其中包括demo ，style.css 及fonts 文件中的字体文件就是我们要的 使用时，一起拷贝到我们的工程中即可 C 在Ionic工程中引用 1将所要用的css 及字体文件放到一个文件夹中 2 在index.html 中引入我们的css 3 在需要的地方引用，和ionic 中自带图标的方式相同，所有图标的样式名称可在 dome.html 文件中找到 示例工程可参见 /longtaoge/iconFontDome/tree/master ion-tab title=Chats // ion-ios7-chatboxes-outline on-ios7-chatboxes 指的就是图标样式 icon-off=ion-ios7-chatboxes-outline icon-on=ion-ios7-chatboxes href=#/tab/chatsion-nav-view name=tab-chats/ion-nav-view/ion-tab @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(truetype), 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; } link href=css/style.css rel=stylesheet ion-tab title=雪 icon-off=thsicon-snowy icon-on=thsicon-snowy5 href=#/tab/dash ion-nav-view name=tab-dash/ion-nav-view/ion-tabion-tab title=雨 icon-off=thsicon-weather4 icon-on=thsicon-weather5 href=#/tab/chats ion-nav-view name=tab-chats/ion-nav-view/ion-tabion-tab title=晴 icon-off=thsicon-sun icon-on=thsicon-sun3 href=#/tab/friends ion-nav-view name=tab-friends/ion-nav-view/ion-tabion-tab title=多云 icon-off=thsicon-cloudy icon-on=thsicon-cloudy3 href=#/tab/account