diff --git a/frontend_nuxt/components/BaseInput.vue b/frontend_nuxt/components/BaseInput.vue
index 211e19ec8..cdaebf429 100644
--- a/frontend_nuxt/components/BaseInput.vue
+++ b/frontend_nuxt/components/BaseInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="base-input">
-    <i v-if="icon" :class="['base-input-icon', icon]" />
+    <component v-if="icon" :is="icon" class="base-input-icon" size="14" />
 
     <!-- 普通输入框 -->
     <input
@@ -29,7 +29,7 @@ export default {
   inheritAttrs: false,
   props: {
     modelValue: { type: [String, Number], default: '' },
-    icon: { type: String, default: '' },
+    icon: { type: [String, Object], default: '' },
     type: { type: String, default: 'text' },
     textarea: { type: Boolean, default: false },
   },
@@ -66,7 +66,6 @@ export default {
 
 .base-input-icon {
   opacity: 0.5;
-  font-size: 14px;
 }
 
 .base-input-text {
diff --git a/frontend_nuxt/components/BaseTabs.vue b/frontend_nuxt/components/BaseTabs.vue
index 0f505f3ac..84d702751 100644
--- a/frontend_nuxt/components/BaseTabs.vue
+++ b/frontend_nuxt/components/BaseTabs.vue
@@ -13,7 +13,6 @@
             :is="tab.icon"
             class="base-tabs-item-icon"
           />
-          <i v-else-if="tab.icon" :class="tab.icon"></i>
           <div class="base-tabs-item-label">{{ tab.label }}</div>
         </div>
       </div>
diff --git a/frontend_nuxt/components/CategorySelect.vue b/frontend_nuxt/components/CategorySelect.vue
index 68af8f283..214b6b362 100644
--- a/frontend_nuxt/components/CategorySelect.vue
+++ b/frontend_nuxt/components/CategorySelect.vue
@@ -15,7 +15,7 @@
               class="option-icon"
               :alt="option.name"
             />
-            <i v-else :class="['option-icon', option.icon]"></i>
+            <!-- <i v-else :class="['option-icon', option.icon]"></i> -->
           </template>
           <span>{{ option.name }}</span>
           <span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>
diff --git a/frontend_nuxt/components/CommentEditor.vue b/frontend_nuxt/components/CommentEditor.vue
index 422fb563c..68203de89 100644
--- a/frontend_nuxt/components/CommentEditor.vue
+++ b/frontend_nuxt/components/CommentEditor.vue
@@ -7,7 +7,7 @@
     <div class="comment-bottom-container">
       <div class="comment-submit" :class="{ disabled: isDisabled }" @click="submit">
         <template v-if="!loading"> 发布评论 </template>
-        <template v-else> <i class="fa-solid fa-spinner fa-spin"></i> 发布中... </template>
+        <template v-else> <loading-four /> 发布中... </template>
       </div>
     </div>
   </div>
diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index 8fb7ebe96..d87f19f14 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -71,8 +71,8 @@
         />
       </div>
       <div v-if="replyCount && level < 2" class="reply-toggle" @click="toggleReplies">
-        <i v-if="showReplies" class="fas fa-chevron-up reply-toggle-icon"></i>
-        <i v-else class="fas fa-chevron-down reply-toggle-icon"></i>
+        <up v-if="showReplies" class="reply-toggle-icon" />
+        <down v-else class="reply-toggle-icon" />
         {{ replyCount }}条回复
       </div>
       <div v-if="showReplies && level < 2" class="reply-list">
@@ -375,7 +375,6 @@ const handleContentClick = (e) => {
 }
 
 .reply-toggle-icon {
-  margin-right: 5px;
 }
 
 .common-info-content-header {
diff --git a/frontend_nuxt/components/InviteCodeActivityComponent.vue b/frontend_nuxt/components/InviteCodeActivityComponent.vue
index eed2bfefc..98bfed71a 100644
--- a/frontend_nuxt/components/InviteCodeActivityComponent.vue
+++ b/frontend_nuxt/components/InviteCodeActivityComponent.vue
@@ -2,7 +2,7 @@
   <div class="invite-code-activity">
     <div class="invite-code-description">
       <div class="invite-code-description-title">
-        <i class="fas fa-info-circle"></i>
+        <info />
         <span class="invite-code-description-title-text">邀请规则说明</span>
       </div>
       <div class="invite-code-description-content">
@@ -17,7 +17,7 @@
     <div v-if="inviteLink" class="invite-code-link-content">
       <p class="invite-code-link-content-text">
         邀请链接：{{ inviteLink }}
-        <span @click="copyLink"><i class="fas fa-copy copy-icon"></i></span>
+        <span @click="copyLink"><copy class="copy-icon" /></span>
       </p>
     </div>
 
diff --git a/frontend_nuxt/components/LoginOverlay.vue b/frontend_nuxt/components/LoginOverlay.vue
index e1a7907b7..af508a404 100644
--- a/frontend_nuxt/components/LoginOverlay.vue
+++ b/frontend_nuxt/components/LoginOverlay.vue
@@ -2,7 +2,7 @@
   <div class="login-overlay">
     <div class="login-overlay-blur"></div>
     <div class="login-overlay-content">
-      <i class="fa-solid fa-user login-overlay-icon"></i>
+      <user-icon class="login-overlay-icon" />
       <div class="login-overlay-text">请先登录，点击跳转到登录页面</div>
       <div class="login-overlay-button" @click="goLogin">登录</div>
     </div>
diff --git a/frontend_nuxt/pages/forgot-password.vue b/frontend_nuxt/pages/forgot-password.vue
index 024d00dd9..0e4f55b8a 100644
--- a/frontend_nuxt/pages/forgot-password.vue
+++ b/frontend_nuxt/pages/forgot-password.vue
@@ -2,20 +2,20 @@
   <div class="forgot-page">
     <div class="forgot-content">
       <div class="forgot-title">找回密码</div>
- 
+
       <div v-if="step === 0" class="step-content">
-        <BaseInput icon="fas fa-envelope" v-model="email" placeholder="邮箱" />
+        <BaseInput icon="mail" v-model="email" placeholder="邮箱" />
         <div v-if="emailError" class="error-message">{{ emailError }}</div>
         <div class="primary-button" @click="sendCode" v-if="!isSending">发送验证码</div>
         <div class="primary-button disabled" v-else>发送中...</div>
       </div>
       <div v-else-if="step === 1" class="step-content">
-        <BaseInput icon="fas fa-envelope" v-model="code" placeholder="邮箱验证码" />
+        <BaseInput icon="mail" v-model="code" placeholder="邮箱验证码" />
         <div class="primary-button" @click="verifyCode" v-if="!isVerifying">验证</div>
         <div class="primary-button disabled" v-else>验证中...</div>
       </div>
       <div v-else class="step-content">
-        <BaseInput icon="fas fa-lock" v-model="password" type="password" placeholder="新密码" />
+        <BaseInput icon="lock" v-model="password" type="password" placeholder="新密码" />
         <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
         <div class="primary-button" @click="resetPassword" v-if="!isResetting">重置密码</div>
         <div class="primary-button disabled" v-else>提交中...</div>
diff --git a/frontend_nuxt/pages/login.vue b/frontend_nuxt/pages/login.vue
index 473babd7c..b07b97495 100644
--- a/frontend_nuxt/pages/login.vue
+++ b/frontend_nuxt/pages/login.vue
@@ -6,9 +6,9 @@
       </div>
 
       <div class="email-login-page-content">
-        <BaseInput icon="fas fa-envelope" v-model="username" placeholder="邮箱/用户名" />
+        <BaseInput icon="mail" v-model="username" placeholder="邮箱/用户名" />
 
-        <BaseInput icon="fas fa-lock" v-model="password" type="password" placeholder="密码" />
+        <BaseInput icon="lock" v-model="password" type="password" placeholder="密码" />
 
         <div v-if="!isWaitingForLogin" class="login-page-button-primary" @click="submitLogin">
           <div class="login-page-button-text">登录</div>
diff --git a/frontend_nuxt/pages/settings.vue b/frontend_nuxt/pages/settings.vue
index 5e5355580..d5a7cd396 100644
--- a/frontend_nuxt/pages/settings.vue
+++ b/frontend_nuxt/pages/settings.vue
@@ -23,7 +23,7 @@
         </div>
         <div class="form-row username-row">
           <BaseInput
-            icon="fas fa-user"
+            icon="user-icon"
             v-model="username"
             @input="usernameError = ''"
             placeholder="用户名"
diff --git a/frontend_nuxt/pages/signup.vue b/frontend_nuxt/pages/signup.vue
index c301524ab..fd0de9995 100644
--- a/frontend_nuxt/pages/signup.vue
+++ b/frontend_nuxt/pages/signup.vue
@@ -6,16 +6,11 @@
       </div>
 
       <div v-if="emailStep === 0" class="email-signup-page-content">
-        <BaseInput
-          icon="fas fa-envelope"
-          v-model="email"
-          @input="emailError = ''"
-          placeholder="邮箱"
-        />
+        <BaseInput icon="mail" v-model="email" @input="emailError = ''" placeholder="邮箱" />
         <div v-if="emailError" class="error-message">{{ emailError }}</div>
 
         <BaseInput
-          icon="fas fa-user"
+          icon="user-icon"
           v-model="username"
           @input="usernameError = ''"
           placeholder="用户名"
@@ -23,7 +18,7 @@
         <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
 
         <BaseInput
-          icon="fas fa-lock"
+          icon="lock"
           v-model="password"
           @input="passwordError = ''"
           type="password"
@@ -51,7 +46,7 @@
       </div>
 
       <div v-if="emailStep === 1" class="email-signup-page-content">
-        <BaseInput icon="fas fa-envelope" v-model="code" placeholder="邮箱验证码" />
+        <BaseInput icon="mail" v-model="code" placeholder="邮箱验证码" />
         <div
           v-if="!isWaitingForEmailVerified"
           class="signup-page-button-primary"
diff --git a/frontend_nuxt/plugins/iconpark.client.ts b/frontend_nuxt/plugins/iconpark.client.ts
index f13f0e32c..da5c4978d 100644
--- a/frontend_nuxt/plugins/iconpark.client.ts
+++ b/frontend_nuxt/plugins/iconpark.client.ts
@@ -37,6 +37,10 @@ import {
   AlarmClock,
   Bookmark,
   Inbox,
+  LoadingFour,
+  Mail,
+  Lock,
+  User,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -77,4 +81,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('AlarmClock', AlarmClock)
   nuxtApp.vueApp.component('Bookmark', Bookmark)
   nuxtApp.vueApp.component('Inbox', Inbox)
+  nuxtApp.vueApp.component('LoadingFour', LoadingFour)
+  nuxtApp.vueApp.component('UserIcon', User)
+  nuxtApp.vueApp.component('Mail', Mail)
+  nuxtApp.vueApp.component('Lock', Lock)
 })