结合阿里巴巴矢量图标库实现在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. screen乱码问题

    在 .screenrc下设置: defencoding gbk encoding gbk gbk detatch+reattach后,设置失效,这时可以直接用命令来配置: ctrl+a :defenc ...

  2. win10安装配置jdk的环境变量

    换了个硬盘,用上了win10,发现win10安装好jdk之后,配置环境变量这个相对于win7和xp还是有那么一丢丢区别的,趁着夜色,随笔一记. 1.安装jdk之后,或者也可以用之前安装好的文件夹,先记 ...

  3. vue-cli的webpack模版项目配置解析-build/dev-server.js

    我们在使用vue-cli搭建vuejs项目(Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目)的时候,会自动生成一系列文件,其中就包含webpack配置文件.我们现在来看下,这些配置到 ...

  4. Angular CLI: 发布到 GitHub Pages

    发布 Angular 应用的简单方式是使用 GitHub Pages. 首先需要创建一个 GitHub 账号,随后,为您的项目创建一个仓库.记下 GitHub 中的用户名和项目名称. 例如,我的 Gi ...

  5. Docker问题： Layer already being pulled by another client. Waiting.什么原因

    问题描述:Layer already being pulled by another client. Waiting. 问题分析:这是 1.8版本的一个bug,会在1.9版本中修复.http://st ...

  6. 修改ncnn的openmp异步处理方法 附C++样例代码

    ncnn刚发布不久,博主在ios下尝试编译. 遇上了openmp的编译问题. 寻找各种解决方案无果,亲自操刀. 采用std::thread 替换 openmp. ncnn项目地址: https://g ...

  7. git 签出(恢复)指定文件

    在项目开发中,偶尔会因为误删文件或其他原因需要从git仓库中恢复某些文件.此篇文章将介绍如何通过git从历史提交记录.分支记录恢复指定文件. 1. git checkout 说明:使用git chec ...

  8. -bash: warning: setlocale: LC_CTYPE: cannot change locale (EN_US.UTF-8): No such file or directory

    出问题原因: 通过 su - 切换用户时候,LANG设置为en或者设置错误,切换角色会出现这个错误 如何解决? echo $LANG # 查看 LANG 参数 sed 's#LANG=en#LANG= ...

  9. Windows核心编程&进程

    1. 进程的定义 说白了进程就是一个正在运行的执行程序,包含内核对象和独立的地址空间,内核对象负责统计和管理进程信息,地址空间包括所有可执行文件或DLL 模块的代码和数据.动态内存分配(线程堆和栈的分 ...

  10. linkin大话面向对象--闭包和回调

      先来理解2个概念:闭包和回调   什么是闭包? 闭包是一个可调用的对象,它记录了一些信息,这些信息来自于创建他的作用域.通过这个定义,可以看出内部类是面向对象的闭包,因为他不仅包含了外部类对象的信 ...