Ionic2像使用字体图标一样使用png图标等

在前面写了一篇文章是关于在ionic中使用iconfont的，但是在实际的开发过程中会发现，前端设计的很多图标都是png或者jpg的，无法像使用字体图标一样进行使用。
但是我们一般使用png这样的图标的时候都是使用img标签或者是某标签给它加上background-image的方式。
如果我们想要像使用字体图标那样使用png图标我们可以按照下面的方式操作。

比如我们要自定义一个load图标
先在assets中建立images文件夹放入load.png图片
然后在variables.scss文件中添加以下代码即可

ion-icon[name="ion-custom-load"]::before {background-image: url("../assets/images/load.png");width: 16px;height: 16px;background-size: 16px;
}

最后我们就可以在页面中使用了：

<ion-icon name="ion-custom-load"></ion-icon>

Ionic2像使用字体图标一样使用png图标等相关推荐

python 图标字体_Python+PyQt：使用图标字体打造无边框通用导航界面
Python是一种面向对象的高级动态编程语言,相比于其它如C/C++语言,具有上手快.代码少.开发效率高的特点,Qt是跨平台的C++图形用户界面应用程序开发框架,是当前主流的GUI开发工具之一,其在P ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
font-face字体图标和inconfont矢量图标库
font-face字体图标 font-face是css3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中. 好处: 1.可以非常方便的改变大小和颜色 2.放大后不会失真 3.减少请求次数和 ...
easyui 图标_logo设计和图标设计有哪些不同？
原标题:logo设计和图标设计有哪些不同? 本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 logo设计和图标设计有哪些不同?对于LOGO和图标概念上的异同的争论, ...
el-table 树形表格自定义展开图标_IconJar for Mac(图标素材设计软件)
IconJar for Mac是一款Mac平台上非常优秀的图标素材设计软件.IconJar for Ma设计风格质朴.功能实用,使用方法简单,拖入式导入即可.IconJar Mac能够浏览设计资源文件 ...
flutter中使用图标（含自制图标库方案）
flutter中使用图标(含自定义图标图) 作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...
html如何让网页有图标,HTML设置网页图标的两种方法
在写HTML页面时少不了要使用各种小图标,来丰富页面元素. 我们经常会使用两种方式来做网页图标背景精灵矢量图标库使用背景精灵实现网页图标通俗的讲就是把小图标整合到一张图中,然后在css引入背景 ...
图标设计原则_图标设计的7个原则
图标设计原则重点 (Top highlight) More in the iconography series:• Foundations of Iconography• 5 Ways to Cre ...
使用iconfont.ttf图标文字库代替图标图片
1 效果 2 下载字体库 1) 选中图标 -- 添加入库: 2) 添加至项目: 3) 下载项目中的图标字体库: 4)获取图标字体库iconfont.ttf 5)查看图标对应的unicode值 3 修改 ...

Ionic2像使用字体图标一样使用png图标等

Ionic2像使用字体图标一样使用png图标等相关推荐

最新文章

热门文章