结合阿里巴巴矢量图标库实现在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. c++---天梯赛---查验身份证

    ★题目: ★题目分析:本题要求输入一个数字n,随后n行输入n个身份证号码.之后进行进一步的判断把错误的身份证号码输出.如果全部正确输出All passed. ★思路方法: ①按题目要求输入. ②对前1 ...

  2. python原始字符串

    str1='let's go' File "<input>", line 1 str1='let's go' ^ SyntaxError: invalid syntax ...

  3. 简单易用的IT运维服务器管理程序

    程序修改历史: 2012.02.04 v1.0 leopku 2012.02.09 v1.1 oldboy(老男孩) QQ:31333741 MAIL:oldboy521@gmail.com 本软件由 ...

  4. 怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件？

    李宗申 2014-9-26 23:33:33 20人评论 分类:实用方法   摘要 : 如果用户得到的离线版的Chrome插件文件(扩展名为.crx),该如何将其安装到谷歌浏览器Chrome中去呢? ...

  5. 浅谈linux虚拟内存结构

    一个虚拟存储器系统要求硬件和软件之间紧密写作(mmu(内存管理单元,虚拟地址到物理地址的翻译),TLB块表(虚拟地址到物理地址index,虚拟寻址),l1,l2,l3高速缓存(物理单元数据)物理寻址) ...

  6. redux学习日志：关于react-redux

    首先先强调一句:一定要多读官方文档,而且要精读,否则你会忽略掉很多东西! 一,Provider 刚开始看的时候,大致浏览了一下,知道了这个组件是能够接收store作为它的属性,然后它里面的子组件就可以 ...

  7. git 简单入门

    首先了解一下git的是什么: [百度百科解释]Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.[2]  Git 是 Linus Torvalds 为了帮助管理 ...

  8. linux tcp重传多会导致软中断在各个核很不均匀么？

    网络不稳定,会导致某些核的软中断很高么?那么,下面我们来分析下这个论断的准确性. 环境描述: 网卡软中断进行了绑核.设备具备80个核,960个网卡中断,没开启bbr,全部是tcp呼叫. # cat / ...

  9. 一个使用物理引擎的WebGL3D场景

    这是一个类似第三人称射击游戏(TPS)的3D场景,可以通过https://ljzc002.github.io/FPS2/index.html访问.场景运行效果如下图: 场景环境由一个天空盒和一个地面网 ...

  10. word中批量转换字母数字为Times New Roman

    通常撰写论文时,英文与中文的格式会区分开,但是一个个修改会比较费时,可以通过替换功能实现.此处以word2003为例. 1.选择 编辑→替换 界面.在“查找内容”文本框中输入"[0-9a-z ...