使用图片的规则
wxml
:可以使用静态图片(相对路径图片)和上传到github的图片
wxss
:在wxss内只能使用网络图片,是公司服务器上的图片也可以是上传到github上的
字体图标
:iconfonts下载到本地,上传到服务上,wxss里面全部使用网络地址;注意:wxapp服务器地址需要为https,不然会有问题
字体图片下载
:https://icomoon.io/
上传自己的图标 svg格式(UI设计)
@font-face {
font-family: 'icomoon';
src: url('./fonts/icomoon.eot?lzaqut');
src: url('./fonts/icomoon.eot?lzaqut#iefix') format('embedded-opentype'),
url('https://static.botue.com/paradise/fonts/icomoon.ttf?lzaqut') format('truetype'),
url('https://static.botue.com/paradise/fonts/icomoon.woff?lzaqut') format('woff'),
url('https://static.botue.com/paradise/fonts/icomoon.svg?lzaqut#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-heart:before {
content: "\e900";
}
.icon-down:before {
content: "\e901";
}
.icon-clock:before {
content: "\e902";
}
.icon-location:before {
content: "\e903";
}
.icon-calendar:before {
content: "\e904";
}
.icon-headset:before {
content: "\e906";
}
.icon-flag:before {
content: "\f11d";
}
.icon-user:before {
content: "\f2c0";
}
tabBar
:不支持网络图片,只能使用本地的图标