您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页Ionic2像使用字体图标一样使用png图标等

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>

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务