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

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

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

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

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

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

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

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

生成的iconfont.css文件如下：

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

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

step8:使用自定义图标。

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

  1. <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. for循环去重排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 配置国内PIP源方法

    python开发者都知道,当我们pip install安装扩展库的时候,经常遇到安装失败(超时)等,有时候是因为国外镜像被屏蔽了,带来不少麻烦, 随着国内python开发的增多,越来越多企业都开放了自 ...

  3. 怎么解决dede首页网址自动加上index.html

    怎样去掉dedecms5.7(织梦)首页url后index.html有三种方法 1.去配置你的空间的默认首页地址.把index.html移到默认文本最前面.(确保你的默认文档里面有index.html ...

  4. Eclipse版本

    Eclipse  3.1  IO 木卫一,伊奥                       2005Eclipse  3.2  Callisto 木卫四,卡里斯托        2006Eclipse ...

  5. Java中的对象Object方法之---wait()和notifiy()

    这一篇咋们继续,接着来介绍wait()和notify()方法,我们都知道这两个方法和之前介绍的方法不太一样,那就是这两个方法是对象Object上的,不属于Thread类上的.我们也知道这两个方法是实现 ...

  6. SecurityException

    摘录自http://www.cnblogs.com/haorenjie/archive/2012/09/12/2682655.html public boolean checkNetwork() { ...

  7. fhs文件系统层级结构

    文件系统:操作系统用于明确存储设备或分区上的文件的方法和数据结构:层次化管理文件的结构就是文件系统: linux层次化文件结构,倒树状结构文件结构        FHS  filesystem hie ...

  8. yarn 淘宝源安装与使用用法

    Yarn 淘宝源 yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_sit ...

  9. Oracle多表连接查询

    连接:将一张表中的行按照某种条件和另一张表中的行连接起来形成一个新行的的过程. 根据连接查询返回的结果,分为3类: 内连接(inner join) 外连接(outer join) 交叉连接(cross ...

  10. Centos7 开放防火墙端口命令

    Centos 7 使用firewalld代替了原来的iptables,使用方法如下: >>>关闭防火墙 systemctl stop firewalld.service       ...