Ionic2像使用字体图标一样使用png图标等
2017-08-09 11:10
225 查看
在前面写了一篇文章是关于在ionic中使用iconfont的,但是在实际的开发过程中会发现,前端设计的很多图标都是png或者jpg的,无法像使用字体图标一样进行使用。
但是我们一般使用png这样的图标的时候都是使用img标签或者是某标签给它加上background-image的方式。
如果我们想要像使用字体图标那样使用png图标我们可以按照下面的方式操作。
比如我们要自定义一个load图标
先在assets中建立images文件夹放入load.png图片
然后在variables.scss文件中添加以下代码即可
最后我们就可以在页面中使用了:
但是我们一般使用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>
相关文章推荐
- 字体图标使用方法——以Iconfont为例
- 字体图标的简单使用(一)
- iOS iconfont字体图标使用
- 为什么要用和如何使用字体图标
- wpf 使用Font-Awesome图标字体
- jQuery插件fontIconPicker配合FontAwesome字体图标库的使用
- android 使用字体图标(Icon Font)
- 微信小程序中使用阿里矢量字体图标
- Bootstrap 字体图标,下拉列表组件的使用
- CSS网页使用Font Awesome图标字体时,css定义 content 属性
- 如何在HTML中使用图标字体 - icon font?
- 网页图标使用字体文件来定义
- Android使用字体代替图标
- 字体图标库使用方法
- CSS3 iconfont矢量字体图标的使用
- 在iOS应用中使用字体图标及制作字体库
- 使用字体图标
- 矢量图标,图标字体的使用,font awesome
- font-face字体图标制作和使用