diff --git a/frontend_nuxt/components/Dropdown.vue b/frontend_nuxt/components/Dropdown.vue
index b1d82baa2..6cc680874 100644
--- a/frontend_nuxt/components/Dropdown.vue
+++ b/frontend_nuxt/components/Dropdown.vue
@@ -19,13 +19,7 @@
                     class="option-icon"
                     :alt="label.name"
                   />
-                  <component
-                    v-else-if="isIconComponent(label.icon)"
-                    :is="label.icon"
-                    class="option-icon"
-                    :size="16"
-                  />
-                  <i v-else :class="['option-icon', label.icon]"></i>
+                  <component v-else :is="label.icon" class="option-icon" :size="16" />
                 </template>
                 <span>{{ label.name }}</span>
               </div>
@@ -44,13 +38,7 @@
                   class="option-icon"
                   :alt="selectedLabels[0].name"
                 />
-                <component
-                  v-else-if="isIconComponent(selectedLabels[0].icon)"
-                  :is="selectedLabels[0].icon"
-                  class="option-icon"
-                  :size="16"
-                />
-                <i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
+                <component v-else :is="selectedLabels[0].icon" class="option-icon" :size="16" />
               </template>
               <span>{{ selectedLabels[0].name }}</span>
             </div>
@@ -87,13 +75,7 @@
                 class="option-icon"
                 :alt="o.name"
               />
-              <component
-                v-else-if="isIconComponent(o.icon)"
-                :is="o.icon"
-                class="option-icon"
-                :size="16"
-              />
-              <i v-else :class="['option-icon', o.icon]"></i>
+              <component v-else :is="o.icon" class="option-icon" :size="16" />
             </template>
             <span>{{ o.name }}</span>
           </slot>
@@ -129,13 +111,7 @@
                     class="option-icon"
                     :alt="o.name"
                   />
-                  <component
-                    v-else-if="isIconComponent(o.icon)"
-                    :is="o.icon"
-                    class="option-icon"
-                    :size="16"
-                  />
-                  <i v-else :class="['option-icon', o.icon]"></i>
+                  <component v-else :is="o.icon" class="option-icon" :size="16" />
                 </template>
                 <span>{{ o.name }}</span>
               </slot>
@@ -273,10 +249,6 @@ export default {
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
     }
 
-    const isIconComponent = (icon) => {
-      return typeof icon === 'string' && !icon.includes(' ')
-    }
-
     expose({ toggle, close })
 
     return {
@@ -291,7 +263,6 @@ export default {
       isSelected,
       loading,
       isImageIcon,
-      isIconComponent,
       setSearch,
       isMobile,
     }
diff --git a/frontend_nuxt/components/InviteCodeActivityComponent.vue b/frontend_nuxt/components/InviteCodeActivityComponent.vue
index 98bfed71a..f6013b61d 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">
-        <info />
+        <info-icon />
         <span class="invite-code-description-title-text">邀请规则说明</span>
       </div>
       <div class="invite-code-description-content">
diff --git a/frontend_nuxt/components/LotteryForm.vue b/frontend_nuxt/components/LotteryForm.vue
index 30bcdcd8b..64b3bddde 100644
--- a/frontend_nuxt/components/LotteryForm.vue
+++ b/frontend_nuxt/components/LotteryForm.vue
@@ -10,7 +10,7 @@
       <span class="prize-row-title">奖品图片</span>
       <label class="prize-container">
         <BaseImage v-if="data.prizeIcon" :src="data.prizeIcon" class="prize-preview" alt="prize" />
-        <i v-else class="fa-solid fa-image default-prize-icon"></i>
+        <image-files v-else class="default-prize-icon" />
         <div class="prize-overlay">上传奖品图片</div>
         <input type="file" class="prize-input" accept="image/*" @change="onPrizeIconChange" />
       </label>
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index 1224e7066..b7c48b6da 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -34,7 +34,7 @@
             to="/about"
             @click="handleItemClick"
           >
-            <info class="menu-item-icon" />
+            <info-icon class="menu-item-icon" />
             <span class="menu-item-text">关于</span>
           </NuxtLink>
           <NuxtLink
diff --git a/frontend_nuxt/components/MessageEditor.vue b/frontend_nuxt/components/MessageEditor.vue
index d58a0b0bf..bb04b45e7 100644
--- a/frontend_nuxt/components/MessageEditor.vue
+++ b/frontend_nuxt/components/MessageEditor.vue
@@ -6,7 +6,7 @@
     <div class="message-bottom-container">
       <div class="message-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/MessageFloatWindow.vue b/frontend_nuxt/components/MessageFloatWindow.vue
index f5370b91a..a2da5a350 100644
--- a/frontend_nuxt/components/MessageFloatWindow.vue
+++ b/frontend_nuxt/components/MessageFloatWindow.vue
@@ -3,20 +3,10 @@
     <iframe :src="iframeSrc" frameborder="0" ref="iframeRef" @load="injectBaseTag"></iframe>
 
     <div class="float-actions">
-      <i
-        class="fas fa-chevron-down"
-        v-if="floatHeight !== MINI_HEIGHT"
-        title="收起至 100px"
-        @click="collapseToMini"
-      ></i>
-      <i
-        class="fas fa-chevron-up"
-        v-if="floatHeight !== DEFAULT_HEIGHT"
-        title="回弹至 60vh"
-        @click="reboundToDefault"
-      ></i>
-      <i class="fas fa-expand" title="在页面中打开" @click="expand"></i>
-      <i class="fas fa-times" title="关闭" @click="close"></i>
+      <down v-if="floatHeight !== MINI_HEIGHT" title="收起至 100px" @click="collapseToMini" />
+      <up v-if="floatHeight !== DEFAULT_HEIGHT" title="回弹至 60vh" @click="reboundToDefault" />
+      <expand-up title="在页面中打开" @click="expand" />
+      <close-icon title="关闭" @click="close" />
     </div>
   </div>
 </template>
diff --git a/frontend_nuxt/components/MilkTeaActivityComponent.vue b/frontend_nuxt/components/MilkTeaActivityComponent.vue
index 665fb251f..292ce6536 100644
--- a/frontend_nuxt/components/MilkTeaActivityComponent.vue
+++ b/frontend_nuxt/components/MilkTeaActivityComponent.vue
@@ -2,7 +2,7 @@
   <div class="milk-tea-activity">
     <div class="milk-tea-description">
       <div class="milk-tea-description-title">
-        <i class="fas fa-info-circle"></i>
+        <info-icon />
         <span class="milk-tea-description-title-text">升级规则说明</span>
       </div>
       <div class="milk-tea-description-content">
@@ -29,7 +29,7 @@
         />
       </div>
       <div v-else class="user-level">
-        <div class="user-level-text"><i class="fas fa-user-circle"></i> 请登录查看自身等级</div>
+        <div class="user-level-text"><user-icon /> 请登录查看自身等级</div>
       </div>
     </div>
     <div
diff --git a/frontend_nuxt/components/PostLottery.vue b/frontend_nuxt/components/PostLottery.vue
index 80d973393..166ee1a83 100644
--- a/frontend_nuxt/components/PostLottery.vue
+++ b/frontend_nuxt/components/PostLottery.vue
@@ -10,13 +10,13 @@
               :src="lottery.prizeIcon"
               alt="prize"
             />
-            <i v-else class="fa-solid fa-gift default-prize-icon"></i>
+            <gift v-else class="default-prize-icon" />
           </div>
           <div class="prize-name">{{ lottery.prizeDescription }}</div>
           <div class="prize-count">x {{ lottery.prizeCount }}</div>
         </div>
         <div class="prize-end-time prize-info-right">
-          <i v-if="!lotteryEnded" class="fas fa-stopwatch prize-end-time-icon"></i>
+          <stopwatch v-if="!lotteryEnded" class="prize-end-time-icon" />
           <div v-if="!isMobile && !lotteryEnded" class="prize-end-time-title">离结束</div>
           <div class="prize-end-time-value">{{ countdown }}</div>
           <div v-if="!isMobile" class="join-prize-button-container-desktop">
@@ -26,7 +26,8 @@
               @click="joinLottery"
             >
               <div class="join-prize-button-text">
-                参与抽奖 <i class="fas fa-coins"></i> {{ lottery.pointCost }}
+                参与抽奖 <paper-money-two class="join-prize-button-text-icon" />
+                {{ lottery.pointCost }}
               </div>
             </div>
             <div v-else-if="hasJoined" class="join-prize-button-disabled">
@@ -43,7 +44,7 @@
           @click="joinLottery"
         >
           <div class="join-prize-button-text">
-            参与抽奖 <i class="fas fa-coins"></i> {{ lottery.pointCost }}
+            参与抽奖 <paper-money-two class="join-prize-button-text-icon" /> {{ lottery.pointCost }}
           </div>
         </div>
         <div v-else-if="hasJoined" class="join-prize-button-disabled">
@@ -61,7 +62,7 @@
         @click="gotoUser(p.id)"
       />
       <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
-        <i class="fas fa-medal medal-icon"></i>
+        <medal-one class="medal-icon"></medal-one>
         <span class="prize-member-winner-name">获奖者: </span>
         <BaseImage
           v-for="w in lotteryWinners"
diff --git a/frontend_nuxt/components/PostPoll.vue b/frontend_nuxt/components/PostPoll.vue
index 6e3b02c44..a6ef9ba7e 100644
--- a/frontend_nuxt/components/PostPoll.vue
+++ b/frontend_nuxt/components/PostPoll.vue
@@ -34,7 +34,7 @@
             <div class="poll-option-title" v-else>单选</div>
 
             <div class="poll-left-time">
-              <i class="fas fa-stopwatch poll-left-time-icon"></i>
+              <stopwatch class="poll-left-time-icon" />
               <div class="poll-left-time-title">离结束</div>
               <div class="poll-left-time-value">{{ countdown }}</div>
             </div>
@@ -55,9 +55,7 @@
             </div>
 
             <div class="multi-selection-container">
-              <div class="join-poll-button" @click="submitMultiPoll">
-                <i class="fas fa-check"></i> 确认投票
-              </div>
+              <div class="join-poll-button" @click="submitMultiPoll"><check /> 确认投票</div>
             </div>
           </template>
           <template v-else>
@@ -77,9 +75,7 @@
             </div>
 
             <div class="single-selection-container">
-              <div class="join-poll-button" @click="submitSinglePoll">
-                <i class="fas fa-check"></i> 确认投票
-              </div>
+              <div class="join-poll-button" @click="submitSinglePoll"><check /> 确认投票</div>
             </div>
           </template>
         </div>
@@ -95,22 +91,20 @@
         class="poll-option-button"
         @click="showPollResult = false"
       >
-        <i class="fas fa-chevron-left"></i> 投票
+        <arrow-left /> 投票
       </div>
       <div
         v-else-if="!pollEnded && !hasVoted"
         class="poll-option-button"
         @click="showPollResult = true"
       >
-        <i class="fas fa-chart-bar"></i> 结果
-      </div>
-      <div v-else-if="pollEnded" class="poll-option-hint">
-        <i class="fas fa-stopwatch"></i> 投票已结束
+        <chart-histogram /> 结果
       </div>
+      <div v-else-if="pollEnded" class="poll-option-hint"><stopwatch /> 投票已结束</div>
       <div v-else class="poll-option-hint">
         <div>您已投票，等待结束查看结果</div>
         <div class="poll-left-time">
-          <i class="fas fa-stopwatch poll-left-time-icon"></i>
+          <stopwatch class="poll-left-time-icon" />
           <div class="poll-left-time-title">离结束</div>
           <div class="poll-left-time-value">{{ countdown }}</div>
         </div>
diff --git a/frontend_nuxt/components/PostTypeSelect.vue b/frontend_nuxt/components/PostTypeSelect.vue
index fd713628c..5fa16eab7 100644
--- a/frontend_nuxt/components/PostTypeSelect.vue
+++ b/frontend_nuxt/components/PostTypeSelect.vue
@@ -31,9 +31,9 @@ export default {
 
     const fetchTypes = async () => {
       return [
-        { id: 'NORMAL', name: '普通帖子', icon: 'fa-regular fa-file' },
-        { id: 'LOTTERY', name: '抽奖帖子', icon: 'fa-solid fa-gift' },
-        { id: 'POLL', name: '投票帖子', icon: 'fa-solid fa-square-poll-vertical' },
+        { id: 'NORMAL', name: '普通帖子', icon: 'file-text' },
+        { id: 'LOTTERY', name: '抽奖帖子', icon: 'gift' },
+        { id: 'POLL', name: '投票帖子', icon: 'ranking-list' },
       ]
     }
 
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index feeac2adf..af293dbaf 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -42,7 +42,7 @@
         @click="toggleReaction('LIKE')"
       >
         <like v-if="!userReacted('LIKE')" />
-        <i v-else class="fas fa-heart"></i>
+        <like v-else theme="filled" />
         <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
       </div>
       <slot></slot>
diff --git a/frontend_nuxt/components/SearchDropdown.vue b/frontend_nuxt/components/SearchDropdown.vue
index 4d8b7ce4d..7489be8b4 100644
--- a/frontend_nuxt/components/SearchDropdown.vue
+++ b/frontend_nuxt/components/SearchDropdown.vue
@@ -13,7 +13,7 @@
     >
       <template #display="{ setSearch }">
         <div class="search-input">
-          <i class="search-input-icon fas fa-search"></i>
+          <search-icon class="search-input-icon" />
           <input
             class="text-input"
             v-model="keyword"
@@ -24,7 +24,7 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
+          <i :class="['result-icon', iconMap[option.type]]"></i>
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.text)"></div>
             <div v-if="option.subText" class="result-sub" v-html="highlight(option.subText)"></div>
diff --git a/frontend_nuxt/components/SearchPersonDropdown.vue b/frontend_nuxt/components/SearchPersonDropdown.vue
index d6b25bba0..0587d7c10 100644
--- a/frontend_nuxt/components/SearchPersonDropdown.vue
+++ b/frontend_nuxt/components/SearchPersonDropdown.vue
@@ -13,7 +13,7 @@
     >
       <template #display="{ setSearch }">
         <div class="search-input">
-          <i class="search-input-icon fas fa-search"></i>
+          <search-icon class="search-input-icon" />
           <input
             class="text-input"
             v-model="keyword"
diff --git a/frontend_nuxt/pages/activities.vue b/frontend_nuxt/pages/activities.vue
index c30feee28..1371ceb1b 100644
--- a/frontend_nuxt/pages/activities.vue
+++ b/frontend_nuxt/pages/activities.vue
@@ -18,7 +18,7 @@
           <div class="activity-list-page-card-content">{{ a.content }}</div>
           <div class="activity-list-page-card-footer">
             <div class="activity-list-page-card-footer-start-time">
-              <i class="fas fa-clock"></i>
+              <stopwatch />
               <span>开始于 {{ TimeManager.format(a.startTime) }}</span>
             </div>
           </div>
diff --git a/frontend_nuxt/pages/forgot-password.vue b/frontend_nuxt/pages/forgot-password.vue
index 0e4f55b8a..0481a38ed 100644
--- a/frontend_nuxt/pages/forgot-password.vue
+++ b/frontend_nuxt/pages/forgot-password.vue
@@ -21,7 +21,7 @@
         <div class="primary-button disabled" v-else>提交中...</div>
       </div>
       <div class="hint-message">
-        <i class="fas fa-info-circle"></i>
+        <info-icon />
         使用 Google 注册的用户可使用对应的邮箱进行找回密码
       </div>
     </div>
diff --git a/frontend_nuxt/pages/login.vue b/frontend_nuxt/pages/login.vue
index b07b97495..05aea08d7 100644
--- a/frontend_nuxt/pages/login.vue
+++ b/frontend_nuxt/pages/login.vue
@@ -16,7 +16,7 @@
 
         <div v-else class="login-page-button-primary disabled">
           <div class="login-page-button-text">
-            <i class="fas fa-spinner fa-spin"></i>
+            <loading-four />
             登录中...
           </div>
         </div>
@@ -28,7 +28,7 @@
           >
         </div>
         <div class="hint-message">
-          <i class="fas fa-info-circle"></i>
+          <info-icon />
           使用右侧第三方OAuth注册/登录的用户可使用对应的邮箱进行重设密码
         </div>
       </div>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 6ccb94057..04589759d 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -3,14 +3,14 @@
     <div v-if="!loading" class="chat-header">
       <div class="header-main">
         <div class="back-button" @click="goBack">
-          <i class="fas fa-arrow-left"></i>
+          <arrow-left />
         </div>
         <h2 class="participant-name">
           {{ isChannel ? conversationName : otherParticipant?.username }}
         </h2>
       </div>
       <div v-if="!isFloatMode" class="float-control">
-        <i class="fas fa-compress" @click="minimize" title="最小化"></i>
+        <collapse-text-input class="float-control-icon" @click="minimize" title="最小化" />
       </div>
     </div>
 
@@ -48,7 +48,7 @@
               :content-id="item.id"
               @update:modelValue="(v) => (item.reactions = v)"
             >
-              <i class="fas fa-reply reply-btn" @click="setReply(item)"> 写个回复...</i>
+              <div class="reply-btn"><next @click="setReply(item)" /> 写个回复...</div>
             </ReactionsGroup>
           </template>
         </BaseTimeline>
@@ -66,7 +66,7 @@
       <div v-if="replyTo" class="active-reply">
         正在回复 {{ replyTo.sender.username }}:
         {{ stripMarkdownLength(replyTo.content, 50) }}
-        <i class="fas fa-times close-reply" @click="replyTo = null"></i>
+        <close-icon class="close-reply" @click="replyTo = null" />
       </div>
       <MessageEditor :loading="sending" @submit="sendMessage" />
     </div>
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 3fabfe102..8d301d437 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="messages-container">
     <div class="page-title">
-      <i class="fas fa-comments"></i>
+      <message-emoji />
       <span class="page-title-text">选择聊天</span>
     </div>
     <div v-if="!isFloatMode" class="float-control">
-      <i class="fas fa-compress" @click="minimize" title="最小化"></i>
+      <collapse-text-input class="float-control-icon" @click="minimize" title="最小化" />
     </div>
     <BaseTabs v-model="activeTab" :tabs="tabs">
       <div v-if="activeTab === 'messages'">
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 9a5fa8e46..9e0b45a8b 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -4,7 +4,7 @@
       <template #right>
         <div class="message-page-header-right">
           <div class="message-page-header-right-item" @click="markAllRead">
-            <i class="fas fa-bolt message-page-header-right-item-button-icon"></i>
+            <check-correct class="message-page-header-right-item-button-icon" />
             <span class="message-page-header-right-item-button-text"> 已读所有消息 </span>
           </div>
         </div>
diff --git a/frontend_nuxt/pages/new-post.vue b/frontend_nuxt/pages/new-post.vue
index 0329a345c..94c9814dd 100644
--- a/frontend_nuxt/pages/new-post.vue
+++ b/frontend_nuxt/pages/new-post.vue
@@ -13,13 +13,13 @@
           <PostTypeSelect v-model="postType" />
         </div>
         <div class="post-options-right">
-          <div class="post-clear" @click="clearPost"><i class="fa-solid fa-eraser"></i> 清空</div>
+          <div class="post-clear" @click="clearPost"><clear-icon /> 清空</div>
           <div class="ai-generate" @click="aiGenerate">
-            <i class="fa-solid fa-robot"></i>
+            <smart-optimization />
             MD 格式优化
           </div>
           <div class="post-draft" @click="saveDraft">
-            <i class="fa-solid fa-floppy-disk"></i>
+            <save-icon />
             存草稿
           </div>
           <div
@@ -30,9 +30,7 @@
           >
             发布
           </div>
-          <div v-else class="post-submit-loading">
-            <i class="fa-solid fa-spinner fa-spin"></i> 发布中...
-          </div>
+          <div v-else class="post-submit-loading"><loading-four /> 发布中...</div>
         </div>
       </div>
       <LotteryForm v-if="postType === 'LOTTERY'" :data="lottery" />
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index 5f16bcf2d..789ace3c1 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -25,7 +25,7 @@
 
           <div class="point-info">
             <p v-if="authState.loggedIn && point !== null">
-              <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
+              <span><paper-money-two class="coin-icon" /></span>我的积分：<span
                 class="point-value"
                 >{{ point }}</span
               >
@@ -37,7 +37,7 @@
               <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
               <div class="goods-item-name">{{ good.name }}</div>
               <div class="goods-item-cost">
-                <i class="fas fa-coins"></i>
+                <paper-money-two />
                 {{ good.cost }} 积分
               </div>
               <div
@@ -185,7 +185,7 @@
                   参与，获得 {{ item.amount }} 积分
                 </template>
                 <template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
-                <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
+                <paper-money-two /> 你目前的积分是 {{ item.balance }}
               </div>
               <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
             </template>
diff --git a/frontend_nuxt/pages/posts/[id]/edit.vue b/frontend_nuxt/pages/posts/[id]/edit.vue
index b8d57a252..25af27295 100644
--- a/frontend_nuxt/pages/posts/[id]/edit.vue
+++ b/frontend_nuxt/pages/posts/[id]/edit.vue
@@ -12,9 +12,9 @@
           <TagSelect v-model="selectedTags" creatable />
         </div>
         <div class="post-options-right">
-          <div class="post-clear" @click="clearPost"><i class="fa-solid fa-eraser"></i> 清空</div>
+          <div class="post-clear" @click="clearPost"><clear-icon /> 清空</div>
           <div class="ai-generate" @click="aiGenerate">
-            <i class="fa-solid fa-robot"></i>
+            <smart-optimization />
             MD 格式优化
           </div>
           <div class="post-cancel" @click="cancelEdit">取消</div>
@@ -26,9 +26,7 @@
           >
             更新
           </div>
-          <div v-else class="post-submit-loading">
-            <i class="fa-solid fa-spinner fa-spin"></i> 更新中...
-          </div>
+          <div v-else class="post-submit-loading"><loading-four /> 更新中...</div>
         </div>
       </div>
     </div>
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 9cd9d1858..ea2410981 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -22,7 +22,7 @@
             class="article-subscribe-button"
             @click="subscribePost"
           >
-            <i class="fas fa-user-plus"></i>
+            <people-plus />
             <div class="article-subscribe-button-text">
               {{ isMobile ? '订阅' : '订阅文章' }}
             </div>
@@ -32,14 +32,14 @@
             class="article-unsubscribe-button"
             @click="unsubscribePost"
           >
-            <i class="fas fa-user-minus"></i>
+            <people-minus-one />
             <div class="article-unsubscribe-button-text">
               {{ isMobile ? '退订' : '取消订阅' }}
             </div>
           </div>
           <DropdownMenu v-if="articleMenuItems.length > 0" :items="articleMenuItems">
             <template #trigger>
-              <i class="fas fa-ellipsis-vertical action-menu-icon"></i>
+              <more-one class="action-menu-icon" />
             </template>
           </DropdownMenu>
         </div>
@@ -53,7 +53,7 @@
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
               {{ author.username }}
-              <i class="fas fa-medal medal-icon"></i>
+              <medal-one class="medal-icon" />
               <NuxtLink
                 v-if="author.displayMedal"
                 class="user-medal"
@@ -69,7 +69,7 @@
           <div v-if="!isMobile" class="info-content-header">
             <div class="user-name">
               {{ author.username }}
-              <i class="fas fa-medal medal-icon"></i>
+              <medal-one class="medal-icon" />
               <NuxtLink
                 v-if="author.displayMedal"
                 class="user-medal"
@@ -88,7 +88,7 @@
           <div class="article-footer-container">
             <ReactionsGroup v-model="postReactions" content-type="post" :content-id="postId">
               <div class="make-reaction-item copy-link" @click="copyPostLink">
-                <i class="fas fa-link"></i>
+                <link-icon />
               </div>
             </ReactionsGroup>
           </div>
@@ -707,8 +707,8 @@ const unsubscribePost = async () => {
 
 const fetchCommentSorts = () => {
   return Promise.resolve([
-    { id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
-    { id: 'OLDEST', name: '最旧', icon: 'fas fa-hourglass-start' },
+    { id: 'NEWEST', name: '最新', icon: 'lightning' },
+    { id: 'OLDEST', name: '最旧', icon: 'history-icon' },
     // { id: 'MOST_INTERACTIONS', name: '最多互动', icon: 'fas fa-fire' }
   ])
 }
diff --git a/frontend_nuxt/pages/settings.vue b/frontend_nuxt/pages/settings.vue
index d5a7cd396..d668312f9 100644
--- a/frontend_nuxt/pages/settings.vue
+++ b/frontend_nuxt/pages/settings.vue
@@ -7,7 +7,7 @@
       @crop="onCropped"
     />
     <div v-if="isLoadingPage" class="loading-page">
-      <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
     </div>
     <div v-else>
       <div class="settings-title">个人资料设置</div>
@@ -133,15 +133,15 @@ const onCropped = ({ file, url }) => {
 }
 const fetchPublishModes = () => {
   return Promise.resolve([
-    { id: 'DIRECT', name: '直接发布', icon: 'fas fa-bolt' },
-    { id: 'REVIEW', name: '审核后发布', icon: 'fas fa-search' },
+    { id: 'DIRECT', name: '直接发布', icon: 'send-icon' },
+    { id: 'REVIEW', name: '审核后发布', icon: 'search-icon' },
   ])
 }
 const fetchPasswordStrengths = () => {
   return Promise.resolve([
-    { id: 'LOW', name: '低', icon: 'fas fa-lock-open' },
-    { id: 'MEDIUM', name: '中', icon: 'fas fa-lock' },
-    { id: 'HIGH', name: '高', icon: 'fas fa-user-shield' },
+    { id: 'LOW', name: '低', icon: 'unlock' },
+    { id: 'MEDIUM', name: '中', icon: 'lock-one' },
+    { id: 'HIGH', name: '高', icon: 'lock' },
   ])
 }
 const fetchAiLimits = () => {
@@ -154,8 +154,8 @@ const fetchAiLimits = () => {
 }
 const fetchRegisterModes = () => {
   return Promise.resolve([
-    { id: 'DIRECT', name: '直接注册', icon: 'fas fa-user-check' },
-    { id: 'WHITELIST', name: '白名单邀请制', icon: 'fas fa-envelope' },
+    { id: 'DIRECT', name: '直接注册', icon: 'send-icon' },
+    { id: 'WHITELIST', name: '白名单邀请制', icon: 'search-icon' },
   ])
 }
 const loadAdminConfig = async () => {
diff --git a/frontend_nuxt/pages/signup.vue b/frontend_nuxt/pages/signup.vue
index fd0de9995..1fca21591 100644
--- a/frontend_nuxt/pages/signup.vue
+++ b/frontend_nuxt/pages/signup.vue
@@ -35,7 +35,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <i class="fas fa-spinner fa-spin"></i>
+            <loading-four />
             发送中...
           </div>
         </div>
@@ -56,7 +56,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <i class="fas fa-spinner fa-spin"></i>
+            <loading-four />
             验证中...
           </div>
         </div>
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index c36871f33..8f9867be0 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -45,7 +45,7 @@
               content="经验值可通过发帖、评论等操作获得，达到目标后即可提升等级，解锁更多功能。"
               placement="bottom"
             >
-              <info class="profile-exp-info" />
+              <info-icon class="profile-exp-info" />
             </ToolTip>
           </div>
         </div>
diff --git a/frontend_nuxt/plugins/iconpark.client.ts b/frontend_nuxt/plugins/iconpark.client.ts
index da5c4978d..03c3da450 100644
--- a/frontend_nuxt/plugins/iconpark.client.ts
+++ b/frontend_nuxt/plugins/iconpark.client.ts
@@ -41,6 +41,27 @@ import {
   Mail,
   Lock,
   User,
+  Send,
+  Unlock,
+  LockOne,
+  ImageFiles,
+  ExpandUp,
+  Close,
+  ArrowLeft,
+  CollapseTextInput,
+  Stopwatch,
+  PaperMoneyTwo,
+  Check,
+  ChartHistogram,
+  CheckCorrect,
+  PeoplePlus,
+  PeopleMinusOne,
+  SmartOptimization,
+  Save,
+  Clear,
+  FileText,
+  History,
+  Lightning,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -52,7 +73,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Edit', Edit)
   nuxtApp.vueApp.component('HashtagKey', HashtagKey)
   nuxtApp.vueApp.component('Remind', Remind)
-  nuxtApp.vueApp.component('Info', Info)
+  nuxtApp.vueApp.component('InfoIcon', Info)
   nuxtApp.vueApp.component('ChartLine', ChartLine)
   nuxtApp.vueApp.component('Finance', Finance)
   nuxtApp.vueApp.component('Up', Up)
@@ -85,4 +106,25 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('UserIcon', User)
   nuxtApp.vueApp.component('Mail', Mail)
   nuxtApp.vueApp.component('Lock', Lock)
+  nuxtApp.vueApp.component('SendIcon', Send)
+  nuxtApp.vueApp.component('Unlock', Unlock)
+  nuxtApp.vueApp.component('LockOne', LockOne)
+  nuxtApp.vueApp.component('ImageFiles', ImageFiles)
+  nuxtApp.vueApp.component('ExpandUp', ExpandUp)
+  nuxtApp.vueApp.component('CloseIcon', Close)
+  nuxtApp.vueApp.component('ArrowLeft', ArrowLeft)
+  nuxtApp.vueApp.component('CollapseTextInput', CollapseTextInput)
+  nuxtApp.vueApp.component('Stopwatch', Stopwatch)
+  nuxtApp.vueApp.component('PaperMoneyTwo', PaperMoneyTwo)
+  nuxtApp.vueApp.component('Check', Check)
+  nuxtApp.vueApp.component('ChartHistogram', ChartHistogram)
+  nuxtApp.vueApp.component('CheckCorrect', CheckCorrect)
+  nuxtApp.vueApp.component('PeoplePlus', PeoplePlus)
+  nuxtApp.vueApp.component('PeopleMinusOne', PeopleMinusOne)
+  nuxtApp.vueApp.component('SmartOptimization', SmartOptimization)
+  nuxtApp.vueApp.component('SaveIcon', Save)
+  nuxtApp.vueApp.component('ClearIcon', Clear)
+  nuxtApp.vueApp.component('FileText', FileText)
+  nuxtApp.vueApp.component('HistoryIcon', History)
+  nuxtApp.vueApp.component('Lightning', Lightning)
 })