结合阿里巴巴矢量图标库实现在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. POJ 1422 Air Raid

    题目链接: http://poj.org/problem?id=1422 Description Consider a town where all the streets are one-way a ...

  2. 【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

    原文链接:https://github.com/ethereum/wiki/wiki/White-Paper 当中本聪在2009年1月启动比特币区块链时,他同时向世界引入了两种未经测试的革命性的新概念 ...

  3. 如何使用mysql命令行

    现在向大家介绍mysql命令行下,从数据库的建立到表数据的删除全过程,希望对网友有所帮助 方法/步骤 1.登陆mysql 打cmd命令终端,如果已经添加了mysql的环境变量,可以直接使用命令 mys ...

  4. [知了堂学习笔记]_Java代码实现MySQL数据库的备份与还原

    通常在MySQL数据库的备份和恢复的时候,多是采用在cmd中执行mysql命令来实现. 例如: mysqldump -h127.0.0.1 -uroot -ppass test > d:/tes ...

  5. python简单词频统计

    任务 简单统计一个小说中哪些个汉字出现的频率最高 知识点 文件操作 字典 排序 lambda 代码 import codecs import matplotlib.pyplot as plt from ...

  6. window安装swagger editor

    1.下载 nodejs,并安装 2. 下载swagger editor并安装 2.1 git clone https://github.com/swagger-api/swagger-editor.g ...

  7. BSA Network Shell系列-runcmd/runscript命令

    runcmd和runscript ## 1 功能概述 runcmd/runscript:runcmd在一台或多台机器执行Network Shell命令(单个命令),而runscript执行的是脚本,二 ...

  8. k8s 如何 Failover？- 每天5分钟玩转 Docker 容器技术（127）

    上一节我们有 3 个 nginx 副本分别运行在 k8s-node1 和 k8s-node2 上.现在模拟 k8s-node2 故障,关闭该节点. 等待一段时间,Kubernetes 会检查到 k8s ...

  9. 开发步骤Dubbo、spring mvc、springboot、SSM开发步骤

    一.Dubbo开发步骤: 链接:https://pan.baidu.com/s/1pMPO1kf 密码:9zaa 第一: 1.创建consumer工程2.在pom.xml文件下添加配置3.添加appl ...

  10. python---进程与线程

    进程和线程 什么是线程(thread)什么是进程 线程:操作系统能够进行运算调度的最小单位.它被包含在进程中,是进程中的实际运作单位.是一串指令的集合 一个线程指的是进程中一个单一顺序的控制流,一个进 ...