uniapp引用iconfont矢量图

阿里矢量图网址：https://www.iconfont.cn/

1、先创建【我的项目】

2、【选择图标】，【添加入库】，【添加至项目】

3、【下载至本地】

4、解压之后，把【iconfont.css】文件复制到uniapp的本地项目中

5、在步骤3的图中，选择【查看在线链接】

6、复制上述代码到【iconfont.css】文件中，整个替换掉【@font-face】部分，并在【//】前追加【https:】，如下所示：

7、在项目中的引用如下，可以使用style设置一些样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
<view class="box">
<view class="iconfont icon-email">email</view>
<view class="iconfont icon-favorite" style="font-size:40px">favorite</view>
<view class="iconfont icon-search" style="color:blue;">search</view>
</view>
</template>

<script>
export default {
data() {return {}},
methods: {},
}
</script>

<style lang="scss" scoped>
@import '../../css/iconfont.css';
.box {
padding: 50rpx;
}
</style>