vue3中使用iconfont图标
iconfont中点击下载至本地
将文件拷贝到项目asset中，（.ttf .woff .woff2)3个文件放入到fonts文件夹下，这个按照个人习惯归类即可，demo文件不用管它
(iconfont.css/iconfont.js)这两个文件需要在main.ts中引入
```
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import "./assets/iconfont.css";
import "./assets/iconfont.js";
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");
```
修改iconfont.css内容，注意（.ttf .woff .woff2)3个文件地址
```
@font-face {
font-family: "iconfont";
/* Project id 3168633 */
src: url('./fonts/iconfont.woff2') format('woff2'), url('./fonts/iconfont.woff') format('woff'), url('./fonts/iconfont.ttf') format('truetype');
}
[class^="icon-"],
[class*="icon-"] {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-right:before {
content: "\e743";
}
.icon-arrow-left:before {
content: "\e744";
}
.icon-arrow-up:before {
content: "\e745";
}
```
在vue组件中使用
```
<script setup lang="ts">
function iconArrorLeftClick() {
alert("click!");
}
</script>
<template>
<el-button type="primary">按钮</el-button>
<span class="icon-arrow-right" @click="iconArrorLeftClick"></span>
<span class="icon-arrow-left" @click="iconArrorLeftClick"></span>
<text class="icon-arrow-left" @click="iconArrorLeftClick"></text>
</template>
<style scoped>
.icon-arrow-right {
color: orange;
}
.icon-arrow-left {
font-size: 50px;
color: green;
}
</style>
```
如图：
