diff --git a/src/pages/demo/plugins/font-awesome/list.vue b/src/pages/demo/plugins/font-awesome/list.vue
index 1ffec704..cfb5af63 100644
--- a/src/pages/demo/plugins/font-awesome/list.vue
+++ b/src/pages/demo/plugins/font-awesome/list.vue
@@ -36,7 +36,7 @@ export default {
   data () {
     return {
       icon,
-      showIndex: 0
+      showIndex: 12
     }
   },
   computed: {
diff --git a/src/pages/demo/plugins/font-awesome/select.vue b/src/pages/demo/plugins/font-awesome/select.vue
index df9caf60..e012f392 100644
--- a/src/pages/demo/plugins/font-awesome/select.vue
+++ b/src/pages/demo/plugins/font-awesome/select.vue
@@ -1,13 +1,25 @@
 <template>
   <div>
     <el-card class="dd-mb">
-      <p class="dd-mt-0">禁止用户输入 可以清空 icon = {{icon}}</p>
+      <p class="dd-mt-0">
+        禁止用户输入 可以清空 icon = {{icon || '未选择'}}
+        <i v-if="icon" :class="'fa fa-' + icon"></i>
+      </p>
       <IconSelect v-model="icon"></IconSelect>
-      <p>禁止用户输入 不可以清空 icon2 = {{icon2}}</p>
+      <p>
+        禁止用户输入 不可以清空 icon2 = {{icon2 || '未选择'}}
+        <i v-if="icon2" :class="'fa fa-' + icon2"></i>
+      </p>
       <IconSelect v-model="icon2" :clearable="false"></IconSelect>
-      <p>用户可以输入 可以清空 icon3 = {{icon3}}</p>
+      <p>
+        用户可以输入 可以清空 icon3 = {{icon3 || '未选择'}}
+        <i v-if="icon3" :class="'fa fa-' + icon3"></i>
+      </p>
       <IconSelect v-model="icon3" :user-input="true"></IconSelect>
-      <p>用户可以输入 不可以清空 icon4 = {{icon4}}</p>
+      <p>
+        用户可以输入 不可以清空 icon4 = {{icon4 || '未选择'}}
+        <i v-if="icon4" :class="'fa fa-' + icon4"></i>
+      </p>
       <IconSelect v-model="icon4" :user-input="true" :clearable="false"></IconSelect>
     </el-card>
     <el-card>
diff --git a/static/markdownFiles/article/图标选择组件使用方法.md b/static/markdownFiles/article/图标选择组件使用方法.md
index 75666cb7..5005a17b 100644
--- a/static/markdownFiles/article/图标选择组件使用方法.md
+++ b/static/markdownFiles/article/图标选择组件使用方法.md
@@ -1,13 +1,25 @@
 ```
-<p class="dd-mt-0">禁止用户输入 可以清空 icon = {{icon}}</p>
+<p class="dd-mt-0">
+  禁止用户输入 可以清空 icon = {{icon || '未选择'}}
+  <i v-if="icon" :class="'fa fa-' + icon"></i>
+</p>
 <IconSelect v-model="icon"></IconSelect>
 
-<p>禁止用户输入 不可以清空 icon2 = {{icon2}}</p>
+<p>
+  禁止用户输入 不可以清空 icon2 = {{icon2 || '未选择'}}
+  <i v-if="icon2" :class="'fa fa-' + icon2"></i>
+</p>
 <IconSelect v-model="icon2" :clearable="false"></IconSelect>
 
-<p>用户可以输入 可以清空 icon3 = {{icon3}}</p>
+<p>
+  用户可以输入 可以清空 icon3 = {{icon3 || '未选择'}}
+  <i v-if="icon3" :class="'fa fa-' + icon3"></i>
+</p>
 <IconSelect v-model="icon3" :user-input="true"></IconSelect>
 
-<p>用户可以输入 不可以清空 icon4 = {{icon4}}</p>
+<p>
+  用户可以输入 不可以清空 icon4 = {{icon4 || '未选择'}}
+  <i v-if="icon4" :class="'fa fa-' + icon4"></i>
+</p>
 <IconSelect v-model="icon4" :user-input="true" :clearable="false"></IconSelect>
 ```
\ No newline at end of file