unicloud云开发进阶19-项目3在项目中引入iconfont字体库

iconfont引入以及坑

复制视频给的icon文件到static文件夹下，自建的fonts文件夹中

还要在app.vue中引入字体图标的css文件

<style lang="scss">
	/*每个页面公共css */
  @import "@/uni_modules/uview-ui/index.scss";
  @import "@/static/fonts/iconfont.css";
</style>

然后现在是报错的，因为字符图标的css文件里是相对路径，uniapp不认这样的路径，所以需要在iconfont.css文件中，路径前面加上@/static/fonts/

@font-face {
  font-family: "iconfont"; /* Project id 3682224 */
  src: url('@/static/fonts/iconfont.woff2?t=1667640554436') format('woff2'),
       url('@/static/fonts/iconfont.woff?t=1667640554436') format('woff'),
       url('@/static/fonts/iconfont.ttf?t=1667640554436') format('truetype');
}

在项目首页中引入字体图标

<template>
	<view class="home">
    首页
    <text class="iconfont icon-collection-fill"></text>
	</view>
</template>

图标中间的collection-fill就是这个图标的名字 在下载下来的字体图标库文件夹中，有一个html文件，能找到下载的图标名称，复制进来就行