Preface
The project developed by uni-app is multi-terminal and universal, but we know that the compatibility of each terminal to the code is not the same; the
app terminal does not support the css style introduced in main.js and needs to be quoted in the style;
WeChat applet does not The local font icon file does not support relative path, it needs to be replaced with network path;
In order to apply a set of styles to multiple ends, we use the following way to achieve
First open the official website of Alibaba Vector
Copy the code in the figure, that is the network path;
In the uni-app project, under the app.vue file, paste the network address in style and add https:
and modify it to the following style
/*每个页面公共css */
@font-face {
font-family: 'iconfont';
src: url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.eot');
src: url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.woff') format('woff'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
You can download the vector icon project to the local, open the iconfont.css file in it, modify the path to the above network path, and quote it in the style: pay attention to the absolute path
import url('@/static/iconfont/iconfont.css')
The way to use in the page is
<text class="iconfont" style="font-size: 100rpx;"></text>
<text class="iconfont icon-chazishanchudaibiankuang"></text>
Currently, H5, app, wx applets can be displayed normally...待更新