diff --git a/pages.json b/pages.json
index 86185878423640d8d66cf41ec57a48a6b1d310e6..e32d7d62d575d68e9023a1b11ba436332820da16 100644
--- a/pages.json
+++ b/pages.json
@@ -1630,6 +1630,13 @@
 				"navigationBarTitleText": "letter-spacing"
 			}
 		},
+		{
+			"path": "pages/CSS/text/font-icon",
+			"group": "2,14,15",
+			"style": {
+				"navigationBarTitleText": "font-icon"
+			}
+		},
 		{
 			"path": "pages/CSS/text/line-height",
 			"group": "2,14,12",
@@ -2877,6 +2884,10 @@
 						{
 							"id": "css.properties.text.letter-spacing",
 							"name": "letter-spacing"
+						},
+						{
+							"id": "css.properties.text.font-icon",
+							"name": "font-icon"
 						}
 					]
 				},
diff --git a/pages/CSS/text/font-icon.uvue b/pages/CSS/text/font-icon.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..e937d22b20b94c8713b269f1e61b6f06d6bfab4d
--- /dev/null
+++ b/pages/CSS/text/font-icon.uvue
@@ -0,0 +1,144 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1;">
+  <!-- #endif -->
+<view style="align-items: center;align-self: center;">
+  <view class="iconContainer">
+    <view class="iconItem" v-for="item in uniIcons">
+      <text class="icon">{{String.fromCharCode(parseInt(item.code,16))}}</text>
+      <text class="code">\u{{item.code}}</text>
+      <text class="name">{{item.name}}</text>
+    </view>
+  </view>
+</view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+  type Icon = {
+    name : string,
+    code : string,
+  }
+
+  export default {
+    data() {
+      return {
+        uniIcons: [ //图标数据
+          {
+            'name':'forward',
+            'code':'E600',
+          },
+          {
+            'name':'back',
+            'code':'E601',
+          },
+          {
+            'name':'share',
+            'code':'E602',
+          },
+          {
+            'name':'favorites',
+            'code':'E604',
+          },
+          {
+            'name':'home',
+            'code':'E605',
+          },
+          {
+            'name':'more',
+            'code':'E606',
+          },
+          {
+            'name':'close',
+            'code':'E650',
+          },
+          {
+            'name':'down',
+            'code':'E661',
+          },
+          {
+            'name':'circle',
+            'code':'EA01',
+          },
+          {
+            'name':'info',
+            'code':'EA03',
+          },
+          {
+            'name':'info circle',
+            'code':'EA04',
+          },
+          {
+            'name':'success',
+            'code':'EA06',
+          },
+          {
+            'name':'success circle',
+            'code':'EA07',
+          },
+          {
+            'name':'success no circle',
+            'code':'EA08',
+          },
+          {
+            'name':'cancel circle',
+            'code':'EA0B',
+          },
+          {
+            'name':'warn',
+            'code':'EA0F',
+          },
+          {
+            'name':'clear',
+            'code':'EA14',
+          },
+          {
+            'name':'download',
+            'code':'EA19',
+          },
+          {
+            'name':'waitnig',
+            'code':'EA1E',
+          },
+          {
+            'name':'search',
+            'code':'EA23',
+          }
+        ] as Icon[],
+      }
+    }
+  }
+</script>
+
+<style>
+.iconContainer {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.iconItem {
+  width: 100px;
+  height: 150px;
+  justify-content: center;
+  align-items: center;
+}
+.icon {
+  width: 48px;
+  height: 48px;
+  font-family: uni-icon;
+  font-size: 42px;
+  line-height: 48px;
+  color: #333;
+  margin-bottom: 8px;
+}
+.code {
+  font-size: 14px;
+  color: #f00;
+}
+.name {
+  font-size: 12px;
+  color: #000;
+}
+</style>