uni小程序使用icon步骤

如果需要的icon不多，可以下载 

1 登录选择要下载的icon  https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

2 将选中的图标放在购物车中

 3 选择下载代码 -会下载一个zip包

4 将tff文件复制到你uni项目的static文件夹的font文件夹里面（font是自己命名的）

5 在font文件夹中新建一个font.styl文件（我用的预处理器是stylus,所以建了一个styl文件），将压缩包里面的css文件复制到font.styl中

但是下面这个代码需要根据你的路径进行修改，否则会报错

 

原代码

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1682413533175') format('truetype');
}

修改后的路径 （需要加~@/static/）根据自己的路径进行修改

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('~@/static/images/font/iconfont.ttf?t=1682413533175') format('truetype');
}

我的文件路径

 6 然后就可以在App.vue中引入

	@import url("/static/images/font/iconfont.styl");

7 使用就直接可以用类名的方式使用了

<div class="iconfont icon-icon-test"></div>