在前面写了一篇文章是关于在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>
在前面写了一篇文章是关于在ionic中使用iconfont的，但是在实际的开发过程中会发现，前端设计的很多图标都是...
一、什么叫做字体图标? 可以像使用字体一样使用图标 一般辨别是否是字体图标主要是看图标是否是纯色 二、字体图标有那...
Fluttter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文...
Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件...
Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。字体图标用于显示...
9字体图标 1. 字体图标优点 2. 字体图标使用流程 总体来说，字体图标按照如下流程： 3. 设计字体图标...
阿里字体图标库介绍及图标字体的使用方法 这篇文章只讲阿里字体图标库的使用，暂不讲图标制作，阿里矢量图标库上的字体图...
Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。虽然，Glyph...
近几年图标字体使用非常广泛，它的优点是可以自定义图标颜色、大小等参数，且图标不会失真。本文将教你轻松导出图标字体中...
常用字体图标库 阿里字体图标库 iconfont fontawesome 字体图标库 首先使用阿里的字体图标库上个...
本文标题：Ionic2像使用字体图标一样使用png图标等
本文链接：https://www.haomeiwen.com/subject/xhufrxtx.html
网友评论