查询的很多相关的的文章，很多都无法正常使用。

使用场景：uniapp使用vue2开发的移动端项目

方法一

1.将对应的icon图标下载到本地

2.引入对应的文件，最后可以保留两个文件

3.修改iconfont.css中的内容为下面的内容（重点）

注意：base64后面的内容是将iconfont.ttf转换得到的

文件转base64地址：预览https://a.liaoyouliang.com/api/preview/file/202508191441357e6c4144-dff6-4caa-863c-32c7654b9e46

@font-face {
	font-family: "iconfont";
	src: url("data:font/truetype;charset=utf-8;base64,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") format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-gongdan:before {
	content: "\ec37";
}

.icon-gongdanqueren:before {
	content: "\ec36";
}

4.使用

	<view class="iconfont icon-gongdan" style="color: red"></view>

方法二：

1.在 https://www.iconfont.cn/ 上传对应的svg，并给这个添加前缀，用于区分同一项目下使用多套的icon图表

2.下载出来之后保留两个文件：

iconfont.css 和 iconfont.woff

3.在iconfont.css文件中

`font-family` 就是这套字体（图标）的“名字 / ID”，后续所有地方都是靠它来“点名使用”这套 iconfont 的。

4.在app.vue中引入这个文件

5.在组件中使用（红色框内代码）