uniapp使用阿里字体图标库

YingMuMonkey

已于 2022-08-11 10:32:40 修改

阅读量720

点赞数

分类专栏：随记文章标签：前端

于 2022-08-01 16:26:08 首次发布

本文链接：https://blog.csdn.net/yingdaomonkey/article/details/126104003

版权

随记专栏收录该内容

100 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在uniapp中使用阿里字体图标库，包括图标添加、文件下载、静态资源引用及代码应用步骤。通过修改iconfont.css中的URL为绝对路径，并在页面及pages.json中正确引用，实现图标在应用内的显示，特别是顶部导航栏图标的设置。

摘要由CSDN通过智能技术生成

uniapp使用阿里字体图标库
	1、在阿里官网将图标添加至项目
	2、并下载至本地
	3、在static文件夹下新建iconfont文件夹
	4、修改iconfont.css中的连接地址，改为绝对地址，如：url('@/static/iconfont/iconfont.ttf?t=1659339357883') format('truetype');
	
一、标签内使用
	<view class=" iconfont icon-lanya"></view> 
	
二、pages.json中使用，设置顶部导航栏图标

	下载的iconfont.css中是这样的：
	.icon-lanya:before {
	  content: "\e65f";
	}

	在pages.json中使用时应该在pages.json中改成（e前面加u）
	"text": "\ue65f",
	"fontSrc": "/static/iconfont/iconfont.ttf",