「uniapp」自定义iconfont

1. 进入阿里图标库

2. 搜索自己需要的图标

点击加入购物车中

3. 将购物车中的图标添加到项目中

首先进入购物车 点击添加至项目,没有项目就新建一个项目

4. 将图标下载至本地

5. 将文件复制到uniapp项目中

1// 将.ttf文件 @/common 引入
2@font-face {
3  font-family: "iconfont"; /* Project id 2570483 */
4  src: url('@/common/iconfont.ttf?t=1621932269219') format('truetype');
5}

6. 在app.vue 中全局引入iconfont.css

@import url("./common/iconfont.css");

7. 在页面中使用 iconfont 图标

1<!-- 第一种 font class  -->
2<text class="iconfont icon-youhuiquan" style="color: #F0AD4E; font-size: 80rpx;" ></text>
3<!-- 第二种 Unicode -->
4<text class="iconfont" style="color: #F0AD4E; font-size: 80rpx;" >&#xe608;</text>

8. 在模拟器中显示结果