diff --git a/index.html b/index.html
index 29c49b5..9ecd2a4 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,10 @@
             rel="icon"
             href="/favicon.ico"
         />
+        <link
+            rel="stylesheet"
+            href="https://at.alicdn.com/t/c/font_4859862_a3w79dfjgfg.css"
+        />
         <script>
             window.process = {};
         </script>
diff --git a/src/views/demo/iconfont.vue b/src/views/demo/iconfont.vue
new file mode 100644
index 0000000..29151bd
--- /dev/null
+++ b/src/views/demo/iconfont.vue
@@ -0,0 +1,24 @@
+<template>
+    <el-card header="Iconfont示例">
+        <i
+            v-for="icon in iconList"
+            :key="icon"
+            class="iconfont"
+            :class="`${icon}`"
+        ></i>
+    </el-card>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const iconList = ref();
+iconList.value = ['icon-yinhangka', 'icon-tupian', 'icon-RectangleCopy', 'icon-RectangleCopy1', 'icon-RectangleCopy2', 'icon-RectangleCopy3'];
+</script>
+
+<style lang="scss" scoped>
+.iconfont {
+    font-size: 48px;
+    color: #333;
+}
+</style>