Ionic2像使用字體圖標一樣使用png圖標等

在前面寫了一篇文章是關于在ionic中使用iconfont的,但是在實際的開發(fā)過程中會發(fā)現,前端設計的很多圖標都是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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容