vue中iconfont的几种使用方式详解

第一种：1.0、首先在iconfont中的项目中做如下操作：

1.1、在index.html中做如下操作：

1.3、使用在app.vue中使用

1.4、对应黄框中的内容即：直接将复制的代码放到黄框的位置

第二种方式：2.0：依然是复制下边这个内容

2.1、然后在浏览器中打开并复制其内容：

2.2、将复制的内容放到一个css文件中：

2.3、在main.js中导入

2.4、在app.vue中使用：

app.vue中的内容如下：

<template>
  <i class="iconfont icon-xiazai my_icon"></i>
  <i class="iconfont icon-xinxi"></i>
</template>
<script setup>
</script>

<style scoped lang="less">
.my_icon{
  font-size: 30px;
  background-color: pink;
}
</style>

这两个方法的共同结果如下：