ionic2中使用自定义图标
在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标)。
先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标。
下载完成后解压,打开文件demo_unicode.html可以看到它提供的使用方法,我们在ionic2中按照以下方法使用:
1、在项目的assets目录下新建fonts文件夹,然后将下载解压后的iconfont.woff、iconfont.ttf、iconfont.svg、iconfont.eot添加到fonts文件夹中。
2、将font-face和自定义样式写入app.scss
@font-face {
font-family: 'iconfont';
src: url('../assets/fonts/iconfont.eot');
src: url('../assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/iconfont.woff') format('woff'),
url('../assets/fonts/iconfont.ttf') format('truetype'),
url('../assets/fonts/iconfont.svg#iconfont') format('svg');
} .iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
} .ion-qq:before {
content: '\e601'
}
3、在html页面使用图标
<i class="iconfont ion-qq"></i>
还有一种方式是按原有方式使用图标,需要修改第二步中的修改为以下代码:
@font-face {
font-family: 'Ionicons';
src: url('../assets/fonts/iconfont.eot');
src: url('../assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/iconfont.woff') format('woff'),
url('../assets/fonts/iconfont.ttf') format('truetype'),
url('../assets/fonts/iconfont.svg#iconfont') format('svg');
} .icon{
font-family: "Ionicons" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
} .ion-ios-qq:before {
content: '\e601'
}
.ion-md-qq:before {
content: '\e601'
}
然后就可以按照
<ion-icon name="qq"></ion-icon>
来使用。 原文:http://blog.csdn.net/u010730897/article/details/53906285?utm_source=itdadao&utm_medium=referral
ionic2中使用自定义图标的更多相关文章
- ionic2 +Angular 使用自定义图标
结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标. step1:在阿里巴巴图标管理中新建项目,并添加自己选中的图标到购物车: step2:将购物车中的图标"添加至项目" ...
- ionic2 tabs使用自定义图标
在ionic2中图标是通过类添加的 比如说 tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- 【翻译】在Ext JS应用程序中使用自定义图标
原文:Using Custom Icons in Your Ext JS App 作者:Lee BoonstraLee is a technical trainer at Sencha. She's ...
- ionic2 tabs 自定义图标
ionic2 tabs 自定义图标 一.准备资源 tabs icon 的svg格式的矢量图片 二.生成字体样式文件 打开icoMoon网站去制作字体文件. 三.使用字体文件 解压下载的文件,将其中的f ...
- Ionic2中集成腾讯Bugly之自定义插件
Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...
- 在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
- ztree树形图自定义图标在jeecg框架中不显示
有时候工作遇到问题,就会硬着头皮去解决,今天给大家说一个ztree树形图自定义图标在jeecg框架中不显示的解决方法 对于这个问题,官方观法说法是在节点元素中加入icon的字段,然后后跟图标的url, ...
- EasyUI中使用自定义的icon图标
我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里面加入我 ...
随机推荐
- 031_keepalive+nginx保证nginx高可用
一. yum -y install keepalived keepalived配置: keepalived.conf: vrrp_instance proxy { state BACKUP inter ...
- 005_tcp/ip监控
system.monitor.tcpstat 一.listen+established+time wait+close wait. listen:SELECT mean("listen&qu ...
- maven项目部署到Tomcat
1.安装Tomcat,地址:http://tomcat.apache.org,我安装的版本为9.0.0.M22,安装的目录为C:\apache-tomcat,设置环境变量CATALINA_HOME为C ...
- 30个mysql千万级大数据SQL查询优化技巧详解
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- 路由跟踪表满,日志报错nf_conntrack: table full, dropping packet.
“连接跟踪表已满,开始丢包”!相信不少用iptables的同学都会见过这个错误信息吧,这个问题曾经也困扰过我好长一段时间.此问题的解决办法有四种(nf_conntrack 在CentOS 5 / ke ...
- python中的zip、map、reduce 、lambda、filter函数的使用
飞机票 lambda函数 lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是 ...
- JavaScript从入门到精通(附光盘1张):作者:明日科技出版社:清华大学出版社出版时间:2012年09月
本书介绍 一:本书 pdf 获取信息 本书下载:请申请加入本群 (QQ群:668345923), 并联系群主. 本群主有:本书pdf 全文教材 及附带的 光盘内容 二:本书目录介绍 第1篇 基 ...
- Confluence 6 导入模板的备注
创建你自己的模板组件(template bundles).你可以使用插件(add-on,也可以被称 plugin)来创建模板组件然后将这些模板组件上传到你的 Confluence 站点中.你可以从你的 ...
- Confluence 6 使用一个主题到站点
主题被用来在你的 Confluence 站点中应用表现形式.请查看 Working with Themes 页面来查看如何应用你的整个站点和如何添加更多的主题. 希望在站点中应用主题: 进入 > ...
- PHP之十六个魔术方法
1.__construct,__destruct__constuct构建对象的时被调用:__destruct明确销毁对象或脚本结束时被调用:2.__get,__set__set当给不可访问或不存在属性 ...