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>

```

如图：