小程序引入iconfont和使用背景圖
一、小程序引入iconfont圖標。
這種方法不能引入多色圖標,多色圖標請使用圖片,或者base64轉碼引入。
- 在阿里iconfont圖標庫中新建項目,把蒐藏的圖標保存到項目中,點擊下載到本地。
- 解壓下載的圖標文件,依次打開找到,iconfont.css文件。
Ctrl+A全選。複製。
- 在項目中新建icon.css,把剛剛複製的代碼粘貼進去。去掉沒用的部分。再在app.全局樣式引入,就可以用了。
二、小程序引入使用背景圖片。
由於某種神祕力量,小程序並不能像平常css3屬性那樣引入本地背景圖片。
只支持,網絡圖片,base64轉碼圖片。或者image標籤定位實現。
1.網絡圖片,讓後端傳到服務器中就可以用了。
background:url(網絡圖片);
2.base64轉碼後引入。base64轉碼網站
background: url(data:image/png;base64,iVBORw0KGgoAAA很長一段)
3.用image標籤實現。
//僞代碼啊
.box{
position: relative;
}
.image{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}