diff --git a/package.json b/package.json
index 881fcd7..6f405da 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,9 @@
   ],
   "dependencies": {
     "@element-plus/icons": "^0.0.11",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@vueuse/core": "^6.7.1",
     "@vueuse/motion": "^2.0.0-beta.4",
     "animate.css": "^4.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b73365..f3df28b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,9 @@ specifiers:
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
   "@element-plus/icons": ^0.0.11
+  "@fortawesome/fontawesome-svg-core": ^1.2.36
+  "@fortawesome/free-solid-svg-icons": ^5.15.4
+  "@fortawesome/vue-fontawesome": ^3.0.0-5
   "@types/element-resize-detector": 1.1.3
   "@types/mockjs": 1.0.3
   "@types/node": 14.14.14
@@ -70,6 +73,9 @@ specifiers:
 
 dependencies:
   "@element-plus/icons": 0.0.11
+  "@fortawesome/fontawesome-svg-core": 1.2.36
+  "@fortawesome/free-solid-svg-icons": 5.15.4
+  "@fortawesome/vue-fontawesome": 3.0.0-5_a4ef6aa86ab1c63b266771040e7bf2c7
   "@vueuse/core": 6.7.5_vue@3.2.21
   "@vueuse/motion": 2.0.0-beta.4_vue@3.2.21
   animate.css: 4.1.1
@@ -756,6 +762,50 @@ packages:
       - supports-color
     dev: true
 
+  /@fortawesome/fontawesome-common-types/0.2.36:
+    resolution:
+      {
+        integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+      }
+    engines: { node: ">=6" }
+    requiresBuild: true
+    dev: false
+
+  /@fortawesome/fontawesome-svg-core/1.2.36:
+    resolution:
+      {
+        integrity: sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+      }
+    engines: { node: ">=6" }
+    requiresBuild: true
+    dependencies:
+      "@fortawesome/fontawesome-common-types": 0.2.36
+    dev: false
+
+  /@fortawesome/free-solid-svg-icons/5.15.4:
+    resolution:
+      {
+        integrity: sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+      }
+    engines: { node: ">=6" }
+    requiresBuild: true
+    dependencies:
+      "@fortawesome/fontawesome-common-types": 0.2.36
+    dev: false
+
+  /@fortawesome/vue-fontawesome/3.0.0-5_a4ef6aa86ab1c63b266771040e7bf2c7:
+    resolution:
+      {
+        integrity: sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==
+      }
+    peerDependencies:
+      "@fortawesome/fontawesome-svg-core": ~1 || >=1.3.0-beta1
+      vue: ">= 3.0.0 < 4"
+    dependencies:
+      "@fortawesome/fontawesome-svg-core": 1.2.36
+      vue: 3.2.21
+    dev: false
+
   /@humanwhocodes/config-array/0.5.0:
     resolution:
       {
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 960b52e..2f65926 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -68,7 +68,12 @@ function hasOneShowingChild(
 }
 
 function resolvePath(routePath) {
-  return path.resolve(props.basePath, routePath);
+  const httpReg = /^http(s?):\/\//;
+  if (httpReg.test(routePath)) {
+    return props.basePath + "/" + routePath;
+  } else {
+    return path.resolve(props.basePath, routePath);
+  }
 }
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index 854470a..eb5cb76 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { usI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
+import { useFontawesome } from "../src/plugins/fontawesome";
 import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
@@ -26,7 +27,12 @@ Object.keys(directives).forEach(key => {
 getServerConfig(app).then(async config => {
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(router).use(MotionPlugin).use(useElementPlus).use(usI18n);
+  app
+    .use(router)
+    .use(MotionPlugin)
+    .use(useElementPlus)
+    .use(usI18n)
+    .use(useFontawesome);
   await router.isReady();
   app.mount("#app");
 });
diff --git a/src/plugins/fontawesome/index.ts b/src/plugins/fontawesome/index.ts
new file mode 100644
index 0000000..7361bc2
--- /dev/null
+++ b/src/plugins/fontawesome/index.ts
@@ -0,0 +1,15 @@
+/** 兼容fontawesome4和5版本
+ * 4版本: www.fontawesome.com.cn/faicons/
+ * 5版本：https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free
+ * https://github.com/FortAwesome/vue-fontawesome
+ */
+import { App } from "vue";
+import "font-awesome/css/font-awesome.css";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+export function useFontawesome(app: App) {
+  library.add(faUserSecret);
+  app.component("font-awesome-icon", FontAwesomeIcon);
+}