uniapp-x使用iconfont阿里矢量图标库

首先可以前往阿里矢量图标库：https://www.iconfont.cn/

然后在搜索框中搜索你想要的图标，搜索成功后，把鼠标放到图标上，会出现购物车的按钮，点击即可加入购物车

添加好所有你需要的图标之后，可以点击右上角的 购物车

出现购物车侧边栏，可以点击 添加至项目

添加到项目之后，我们可以在左上角 资源管理 下的 我的项目 中查看

然后点击项目设置

勾选 TTF 格式并保存

接着我们就可以下载图标压缩包资源到本地了，注意是unicode

压缩包下载完成之后，打开把所有的内容全部解压出来

项目引入图标字体文件

• 将iconfont.ttf放到static目录下
• 新建common/css目录，将iconfont.css放到common/css目录下

使用方式（H5、安卓APP、微信小程序已验证）

修改iconfont.css内容，删除不必要的内容

@font-face {
font-family: “iconfont”;
src: url(‘/static/iconfont.ttf’);
}

.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
}

App.uvue

<style>
@import ‘@/common/css/iconfont.css’;
</style>

使用

说明：这⾥得⽤ \u 替换 &#x，例如：原图标unicode为&#xe702，转义后为**\ue702**

pages/index/index.uvue

<template>
<view>
<text class=”iconfont” style=”font-size: 30px;color: red”>{{ ‘\ue60d’ }}</text>
</view>
</template>

<script></script>

<style></style>