ionic2 +Angular 使用自定义图标
结合阿里巴巴矢量图标库实现在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 使用自定义图标的更多相关文章
- ionic2中使用自定义图标
在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解 ...
- ionic2 tabs使用自定义图标
在ionic2中图标是通过类添加的 比如说 tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...
- ionic2 tabs 自定义图标
ionic2 tabs 自定义图标 一.准备资源 tabs icon 的svg格式的矢量图片 二.生成字体样式文件 打开icoMoon网站去制作字体文件. 三.使用字体文件 解压下载的文件,将其中的f ...
- 为bootstrap添加更多自定义图标
From: http://blog.csdn.net/mengxiangfeiyang/article/details/45224731 Twitter Bootstrap 真是前端开发的瑞士军刀,作 ...
- Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容.那个功能在IE 9中被称之为JumpList.http:/ ...
- IconVault – 创建自定义图标字体的神器推荐
图标字体简单来说就是外观呈现为图标的字体,同时具有矢量图形的特征,在不同的设备上使用图标的时候就不用加载不同尺寸的图片文件,能够减少 HTTP 请求数,提高页面加载速度. IconVault 这款在线 ...
- Sencha Touch 2.2.1 Custom Icon 自定义图标
ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...
- Delphi 7使用自定义图标关联文件类型
Delphi 7使用自定义图标关联文件类型 5.2 Delphi编程(40) 版权声明:本文为博主原创文章,未经博主允许不得转载. 在开发过程中,我们经常需要属于自己的文件类型,自定义的后缀名不仅可 ...
- Android开发app如何设定应用图标下的应用名称为汉字以及自定义图标
一.应用名称为汉字 二.自定义图标
随机推荐
- Spring MVC集成Swagger
什么是Swagger? 大部分 Web 应用程序都支持 RESTful API,但不同于 SOAP API——REST API 依赖于 HTTP 方法,缺少与 Web 服务描述语言(Web Servi ...
- DTD约束
DTD约束 一,导入DTD方式 二,DTD语法 2)DTD语法 约束标签 <!ELEMENT 元素名称类别>或<!ELEMENT 元素名称(元素内容)> 类别: 空标签: ...
- 从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...
- WPF 实现新手指引功能 DEMO
需求 1.接口化.其他人实现接口就行 2.动态定位到visualTree中任意控件位置,即随意只显示任何部位 3.指示文本控件和箭头控件随意更改(位置,大小,高度,偏移等基本属性) 4.抽出主题 [d ...
- EntityFramework默认映射规则
我不太习惯通过CodeFirst去维护数据库(尽管这是未来实现自动编程的必经之路),还是喜欢通过数据库设计工具如PowerDesigner去建表.如果不想对EF的实体和数据表做什么映射的话,就要注意默 ...
- 最常用Python开源框架有哪些?
Python开源框架有很多,像Django.Flask.webpy等等,但哪些是最常用到的呢?我们收集了一些Python使用者的宝贵意见,把他们认为最常用的Python开源框架简单的介绍给大家. 一. ...
- ArcGIS字段计算器分割字段中的字符串
ArcGIS字段计算器分割字段中的字符串 实例:在一个字段中存有长宽高三个属性数据,以x分割.例如sss为字段名(字段属性为文本类型),数据格式为:100x200x300,利用字段计算器分别将三个数存 ...
- Linuxc - Makefile完成项目的管理。
Makefile完成项目的管理. root@jiqing-virtual-machine:~/cspace/les2# ls main.c Makefile max.c max.h min.c min ...
- Node.js之单利模式
在iOS中我们经常用到单利模式,这样就能够实现在多处共享同一数据,那么在Node.js中也存在这种模式. 我们知道,Node.js中模块的概念很重要,在写模块的接口的时候,只需要暴露出一个实例对象就能 ...
- 阿里java开发手册中命名规约解读之DO/BO/DTO/VO/AO
前言 在阅读<阿里巴巴Java开发手册>时,看到命名规则中有这样一条 虽然知道这些是根据Java对象的角色所分配名称的后缀,但是没有弄清楚分别是什么意思,日常开发中也没有使用到. 网上查找 ...