uniapp中如何使用iconfont字体图标

iconfont-阿里巴巴矢量图标库r如何在自己的项目中使用图标库中的图标

iconfont-阿里巴巴矢量图标库

图标库下载的文件

第一步：在App.vue文件中导入css文件

<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
	@import "static/fonts/iconfont.css";
</style>

 

 

 

第二步：修改iconfont.css文件中的文件路径

 原来的代码块：

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

修改文件路径后的代码块：

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

第三步：在页面中引用图标，运行。

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

 运行看看吧。