uni小程序使用icon步骤

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

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

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

uni小程序使用icon步骤_第1张图片

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

uni小程序使用icon步骤_第2张图片

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

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

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

uni小程序使用icon步骤_第3张图片 

原代码

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

我的文件路径

uni小程序使用icon步骤_第4张图片

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

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

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

你可能感兴趣的:(小程序,前端)