uniAPP里如何引入阿里等自定义图标

字体:

uniAPP开发的时候,框架自带的字体图标不够用,想引入其他的自定义图标。

引入了阿里的字体图标后,字体加载不出来,有问题。

很大可能是文件路径引入的不对,不能用阿里原来的文件,需要修改一部分内容


1、下载字体图标文件,放到 uniAPP的staic/font文件夹里,总共这4个文件

iconfont.css

iconfont.ttf

iconfont.woff

iconfont.woff2

9ff6b642ca018ac63fe6051931b7d6b6_9771401e15c24f5f840116033baa0c31.png

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');

}


在这里插入图片描述

4、最后在uniAPP的页面里引入图标的标签,就可以显示图标了。