diff --git a/src/assets/library/font-awesome-4.7.0-icon/icon.js.REMOVED.git-id b/src/assets/library/font-awesome-4.7.0-icon/icon.js.REMOVED.git-id
index bf812954..dea44d69 100644
--- a/src/assets/library/font-awesome-4.7.0-icon/icon.js.REMOVED.git-id
+++ b/src/assets/library/font-awesome-4.7.0-icon/icon.js.REMOVED.git-id
@@ -1 +1 @@
-d22b6dcdd003a008903fbb724373ac10b4e3a0f8
\ No newline at end of file
+822e9d488a148a997d7098a0608f482ab9f9fb7a
\ No newline at end of file
diff --git a/src/pages/demo/plugins/clipboard-polyfill/demo.vue b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
index 67879bd9..1ed5d89f 100644
--- a/src/pages/demo/plugins/clipboard-polyfill/demo.vue
+++ b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
@@ -55,19 +55,31 @@ export default {
     readText () {
       clipboard.readText().then((res) => {
         console.log(res)
-        this.$Message.success('读取成功 返回结果请查看控制台')
+        this.$message({
+          message: '读取成功 返回结果请查看控制台',
+          type: 'success'
+        })
       }, (err) => {
         console.log(err)
-        this.$Message.error('错误信息已经打印到控制台')
+        this.$message({
+          message: '错误信息已经打印到控制台',
+          type: 'error'
+        })
       })
     },
     read () {
       clipboard.read().then((res) => {
         console.log(res)
-        this.$Message.success('读取成功 返回结果请查看控制台')
+        this.$message({
+          message: '读取成功 返回结果请查看控制台',
+          type: 'success'
+        })
       }, (err) => {
         console.log(err)
-        this.$Message.error('错误信息已经打印到控制台')
+        this.$message({
+          message: '错误信息已经打印到控制台',
+          type: 'error'
+        })
       })
     }
   }
diff --git a/src/pages/demo/plugins/font-awesome/components/IconCell.vue b/src/pages/demo/plugins/font-awesome/components/IconCell.vue
new file mode 100644
index 00000000..7d96562c
--- /dev/null
+++ b/src/pages/demo/plugins/font-awesome/components/IconCell.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-popover
+      ref="pop"
+      placement="right"
+      :title="icon"
+      width="300"
+      trigger="hover">
+      <div class="icon-group">
+        <span :class="'fa fa-' + icon"></span>
+      </div>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-tooltip effect="dark" :content="iconClass" placement="top">
+            <el-button @click="copy(iconClass)" style="width: 100%;">复制Class</el-button>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="12">
+          <el-tooltip effect="dark" :content="iconHtml" placement="top">
+            <el-button @click="copy(iconHtml)" style="width: 100%;">复制HTML</el-button>
+          </el-tooltip>
+        </el-col>
+      </el-row>
+    </el-popover>
+    <el-tag type="info" v-popover:pop>
+      <span :class="'fa fa-' + icon"></span>
+    </el-tag>
+    <span style="font-size: 10px;">{{icon}}</span>
+  </div>
+</template>
+
+<script>
+import clipboard from 'clipboard-polyfill'
+export default {
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    iconClass () {
+      return `fa fa-${this.icon}`
+    },
+    iconHtml () {
+      return `<i class="fa fa-${this.icon}"></i>`
+    }
+  },
+  methods: {
+    copy (text) {
+      clipboard.writeText(text)
+      this.$message({
+        message: `${text} 复制到剪贴板`,
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-group {
+  text-align: center;
+  font-size: 100px;
+}
+</style>
diff --git a/src/pages/demo/plugins/font-awesome/index.vue b/src/pages/demo/plugins/font-awesome/index.vue
index 74b59304..2feaaeb2 100644
--- a/src/pages/demo/plugins/font-awesome/index.vue
+++ b/src/pages/demo/plugins/font-awesome/index.vue
@@ -1,17 +1,19 @@
 <template>
   <Container type="ghost">
-    <el-card v-for="(item, index) in icon" :key="index" :class="index === icon.length - 1 ? '' : 'dd-mb'">
-      <template slot="header">{{item.title}}</template>
+    <el-card>
+      <template slot="header">
+        <el-radio-group v-model="showIndex" size="mini">
+          <el-radio-button
+            v-for="(item, index) in radioOptions"
+            :key="index"
+            :label="item.value">
+            {{item.label}}
+          </el-radio-button>
+        </el-radio-group>
+      </template>
       <el-row style="margin: -10px;">
-        <el-col
-          v-for="(iconItem, iconIndex) in item.icon"
-          :key="iconIndex"
-          :span="6"
-          class="dd-p-10">
-          <el-tag type="info">
-            <span :class="'fa fa-' + iconItem"></span>
-          </el-tag>
-          <span style="font-size: 10px;">{{iconItem}}</span>
+        <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="dd-p-10">
+          <IconCell :icon="iconItem"></IconCell>
         </el-col>
       </el-row>
     </el-card>
@@ -20,10 +22,26 @@
 
 <script>
 import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
+import IconCell from './components/IconCell'
 export default {
+  components: {
+    IconCell
+  },
   data () {
     return {
-      icon
+      icon,
+      showIndex: 0
+    }
+  },
+  computed: {
+    iconShow () {
+      return this.icon[this.showIndex]
+    },
+    radioOptions () {
+      return this.icon.map((e, index) => ({
+        label: e.title,
+        value: index
+      }))
     }
   }
 }
diff --git a/src/pages/demo/plugins/js-cookie/demo.vue b/src/pages/demo/plugins/js-cookie/demo.vue
index c5a18979..dc578974 100644
--- a/src/pages/demo/plugins/js-cookie/demo.vue
+++ b/src/pages/demo/plugins/js-cookie/demo.vue
@@ -26,26 +26,26 @@ export default {
   methods: {
     set (name = 'default-name', value = 'default-value') {
       Cookies.set(name, value)
-      this.$Message.info(`设置数据 ${name} = ${value}`)
+      this.$message.info(`设置数据 ${name} = ${value}`)
     },
     setExpires (name = 'default-name', value = 'default-value', expires = 1) {
       Cookies.set(name, value, {
         expires
       })
-      this.$Message.info(`设置数据 ${name} = ${value} 有效期 ${expires} 天`)
+      this.$message.info(`设置数据 ${name} = ${value} 有效期 ${expires} 天`)
     },
     get (name = 'default-name') {
       const value = Cookies.get(name)
-      this.$Message.info(`获取数据 ${name} = ${value}`)
+      this.$message.info(`获取数据 ${name} = ${value}`)
     },
     getAll () {
       const value = Cookies.get()
       console.log(value)
-      this.$Message.info('结果已经打印到控制台')
+      this.$message.info('结果已经打印到控制台')
     },
     remove (name = 'default-name') {
       Cookies.remove(name)
-      this.$Message.info(`删除数据 ${name}`)
+      this.$message.info(`删除数据 ${name}`)
     }
   }
 }
diff --git a/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue b/src/pages/demo/plugins/mock/components/MockDemoCard.vue
similarity index 100%
rename from src/pages/demo/plugins/mock/componnets/MockDemoCard.vue
rename to src/pages/demo/plugins/mock/components/MockDemoCard.vue
diff --git a/src/pages/demo/plugins/mock/demoDPD.vue b/src/pages/demo/plugins/mock/demoDPD.vue
index 39361e7a..739e1d55 100644
--- a/src/pages/demo/plugins/mock/demoDPD.vue
+++ b/src/pages/demo/plugins/mock/demoDPD.vue
@@ -24,7 +24,7 @@ import Vue from 'vue'
 import clone from '@/assets/library/tool/clone.js'
 import Mock from 'mockjs'
 import settingDPD from './data/settingDPD'
-import MockDemoCard from './componnets/MockDemoCard'
+import MockDemoCard from './components/MockDemoCard'
 export default {
   components: {
     MockDemoCard
diff --git a/src/pages/demo/plugins/mock/demoDTD.vue b/src/pages/demo/plugins/mock/demoDTD.vue
index d0c9cc8d..0ab78675 100644
--- a/src/pages/demo/plugins/mock/demoDTD.vue
+++ b/src/pages/demo/plugins/mock/demoDTD.vue
@@ -36,7 +36,7 @@ import Vue from 'vue'
 import clone from '@/assets/library/tool/clone.js'
 import Mock from 'mockjs'
 import settingDTD from './data/settingDTD'
-import MockDemoCard from './componnets/MockDemoCard'
+import MockDemoCard from './components/MockDemoCard'
 // mixin
 import regexp from './mixins/regexp'
 import fn from './mixins/function'