结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标。

step1:在阿里巴巴图标管理中新建项目，并添加自己选中的图标到购物车；

step2:将购物车中的图标“添加至项目”；

step3:打开“我的项目，选择图片进行编辑。根据项目需求。如果所有的图标名称前半部分都设置成统一的名称的话，只需要在图标编辑是填入后半部分名称。

step4：步骤三中的统一名称可以在“更多操作”——“编辑项目”中设置。

我这边在项目中统一使用iOS模式

 step5：选择“下载至本地”。生成的文件列表如下，只需要复制标志出的文件即可。

 step6:将文件复制到ionic2项目assets中,可以直接放在根目录，也可以新建文件夹存储。

生成的iconfont.css文件如下：

step7:在启动文件中，一般是index.html文件中引入生成的css文件，例如：

<link rel="stylesheet" href="assets/ fonts/iconfont.css">

step8:使用自定义图标。

如step6中css文件中生成的图片，使用ion-ios-后边的名称即可。

<ion-icon name="vip-notes"></ion-icon>

over!

ionic2 +Angular 使用自定义图标的更多相关文章

  1. ionic2中使用自定义图标

    在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解 ...

  2. ionic2 tabs使用自定义图标

    在ionic2中图标是通过类添加的 比如说   tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...

  3. ionic2 tabs 自定义图标

    ionic2 tabs 自定义图标 一.准备资源 tabs icon 的svg格式的矢量图片 二.生成字体样式文件 打开icoMoon网站去制作字体文件. 三.使用字体文件 解压下载的文件,将其中的f ...

  4. 为bootstrap添加更多自定义图标

    From: http://blog.csdn.net/mengxiangfeiyang/article/details/45224731 Twitter Bootstrap 真是前端开发的瑞士军刀,作 ...

  5. Windows 8.1——将网站固定到开始菜单，自定义图标、颜色和Windows推送通知

    记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容.那个功能在IE 9中被称之为JumpList.http:/ ...

  6. IconVault – 创建自定义图标字体的神器推荐

    图标字体简单来说就是外观呈现为图标的字体,同时具有矢量图形的特征,在不同的设备上使用图标的时候就不用加载不同尺寸的图片文件,能够减少 HTTP 请求数,提高页面加载速度. IconVault 这款在线 ...

  7. Sencha Touch 2.2.1 Custom Icon 自定义图标

    ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...

  8. Delphi 7使用自定义图标关联文件类型

    Delphi 7使用自定义图标关联文件类型 5.2 Delphi编程(40)  版权声明:本文为博主原创文章,未经博主允许不得转载. 在开发过程中,我们经常需要属于自己的文件类型,自定义的后缀名不仅可 ...

  9. Android开发app如何设定应用图标下的应用名称为汉字以及自定义图标

    一.应用名称为汉字 二.自定义图标

随机推荐

  1. php备份数据库类分享

    本文实例讲述了php实现MySQL数据库备份类.分享给大家供大家参考.具体分析如下:这是一个非常简单的利用php来备份mysql数据库的类文件,我们只要简单的配置好连接地址用户名与数据库即可   ph ...

  2. ssh密码

  3. 什么是redis，redis能做什么，redis应用场景

    Redis是一个key-value存储系统.Redis的出现,很大程度补偿了memcached这类key/value存储的不足,在部分场合可以对关系数据库起到很好的补充作用.这篇文章小编为大家分享了在 ...

  4. 把要写的内容做个list，半年过去了

    先说点题外话,来国家气象局的第三周,今天出去和丁书记吃了个饭,基本在聊大学时候的人和事,好像都没怎么变,只是不联系的人愈发不会再联系. 抛开学校的课程不谈,半年做了三件事:CUMT校园导航 / Ope ...

  5. 01 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之业务分析与DAO层

    作者:nnngu 项目源代码:https://github.com/nnngu/nguSeckill 这是一个整合IDEA+Maven+SSM框架的高并发的商品秒杀项目.我们将分为以下几篇文章来进行详 ...

  6. speex库音频降噪(含代码)

    speex库中音频降噪效果不错,应该是应用最广泛的吧,speex库下载地址https://www.speex.org/downloads/,可以直接下载二进制代码使用,像配置OpenCV一样配置spe ...

  7. DALI 2.0解码模块

    DALI2.0调光解码模块使用手册 一.概述(联系人:张先生,电话:13923882807,QQ:813267849) 欢迎使用本公司的DALI 2.0解码模块,该模块支持"DALI第二套协 ...

  8. label+input实现开关切换效果

    Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px ...

  9. UML图学习之二 类图

    类图(ClassDiagrams)是根据系统中的类以及各类之间的关系描述系统的静态视图.类图不仅显示系统内信息的结构,还描述系统内这些信息的行为.类图的一个重要目的是为其他图(如顺序图.交互图)定义一 ...

  10. flask + Python3 实现的的API自动化测试平台---- IAPTest接口测试平台（总结感悟篇）

    前言: 在前进中去发现自己的不足,在学习中去丰富自己的能力,在放弃时想想自己最初的目的,在困难面前想想怎么踏过去.在不断成长中去磨炼自己. 正文: 时间轴 flask + Python3 实现的的AP ...