在前面寫了一篇文章是關於在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>