uniAPP开发的时候,框架自带的字体图标不够用,想引入其他的自定义图标。
引入了阿里的字体图标后,字体加载不出来,有问题。
很大可能是文件路径引入的不对,不能用阿里原来的文件,需要修改一部分内容
1、下载字体图标文件,放到 uniAPP的staic/font文件夹里,总共这4个文件
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2

2、在App.vue 的css 样式里,引入
注意style不要带scope,否则样式就只在本页面有效
<style>
@import url('static/font/iconfont.css');
</style>3、最关键的一步,很多都是因为这一步,图标显示不出来
打开 iconfont.css 的文件,顶部有原文件的 这段引入文件的代码,
是这样的
@font-face {
font-family: "iconfont"; /* Project id 5170822 */
src: url('iconfont.woff2?t=1780291700723') format('woff2'),
url('iconfont.woff?t=1780291700723') format('woff'),
url('iconfont.ttf?t=1780291700723') format('truetype');
}改为下面这样,指向对应的路径,照着下面的抄
@font-face {
font-family: "iconfont"; /* Project id 5170822 */
src: url('@/static/font/iconfont.woff2') format('woff2'),
url('@/static/font/iconfont.woff') format('woff'),
url('@/static/font/iconfont.ttf') format('truetype');
}