diff --git a/themes/Empty/LayoutPage.js b/themes/Empty/LayoutPage.js
index d4355d46..f25ee48f 100644
--- a/themes/Empty/LayoutPage.js
+++ b/themes/Empty/LayoutPage.js
@@ -1,4 +1,4 @@
-import LayoutBase from '../Hexo/LayoutBase'
+import LayoutBase from '../Empty/LayoutBase'
 
 export const LayoutPage = (props) => {
   const { page } = props
diff --git a/themes/Hexo/Layout404.js b/themes/Hexo/Layout404.js
index a1dfe4cd..6b9db681 100644
--- a/themes/Hexo/Layout404.js
+++ b/themes/Hexo/Layout404.js
@@ -1,6 +1,4 @@
 import BLOG from '@/blog.config'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import LayoutBase from './LayoutBase'
@@ -26,7 +24,7 @@ export const Layout404 = props => {
       <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
         <div className="dark:text-gray-200">
           <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
-            <FontAwesomeIcon icon={faSpinner} spin={true} className="mr-2" />
+            <i className="mr-2 fas fa-spinner animate-spin" />
             404
           </h2>
           <div className="inline-block text-left h-32 leading-10 items-center">
diff --git a/themes/Hexo/LayoutCategoryIndex.js b/themes/Hexo/LayoutCategoryIndex.js
index f0d1e978..6585e290 100644
--- a/themes/Hexo/LayoutCategoryIndex.js
+++ b/themes/Hexo/LayoutCategoryIndex.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faFolder, faTh } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import Card from './components/Card'
 import LayoutBase from './LayoutBase'
@@ -18,7 +16,7 @@ export const LayoutCategoryIndex = props => {
     <LayoutBase {...props} meta={meta}>
       <Card className="bg-white dark:bg-gray-700 w-full min-h-screen">
         <div className="dark:text-gray-200 mb-5 mx-3">
-          <FontAwesomeIcon icon={faTh} className="mr-4" />
+          <i className="mr-4 fas fa-th" />
           {locale.COMMON.CATEGORY}:
         </div>
         <div id="category-list" className="duration-200 flex flex-wrap mx-8">
@@ -30,7 +28,7 @@ export const LayoutCategoryIndex = props => {
                     ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-blue-600 hover:text-white'
                   }
                 >
-                  <FontAwesomeIcon icon={faFolder} className="mr-4" />
+                  <i className="mr-4 fas fa-folder" />
                   {category}({categories[category]})
                 </div>
               </Link>
diff --git a/themes/Hexo/LayoutTagIndex.js b/themes/Hexo/LayoutTagIndex.js
index 879fe696..662bbe48 100644
--- a/themes/Hexo/LayoutTagIndex.js
+++ b/themes/Hexo/LayoutTagIndex.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faTag } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Card from './components/Card'
 import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'
@@ -18,7 +16,7 @@ export const LayoutTagIndex = props => {
     <LayoutBase {...props} meta={meta}>
       <Card className='w-full'>
         <div className="dark:text-gray-200 mb-5 ml-4">
-          <FontAwesomeIcon icon={faTag} className="mr-4" />
+          <i className="mr-4 fas fa-tag" />
           {locale.COMMON.TAGS}:
         </div>
         <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
diff --git a/themes/Hexo/components/BlogPostCard.js b/themes/Hexo/components/BlogPostCard.js
index 758772df..1e7a332b 100644
--- a/themes/Hexo/components/BlogPostCard.js
+++ b/themes/Hexo/components/BlogPostCard.js
@@ -1,6 +1,4 @@
 import BLOG from '@/blog.config'
-import { faFolder } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
@@ -51,7 +49,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
           <Link href={`/category/${post.category}`} passHref>
               <a className='cursor-pointer font-light text-sm hover:underline transform'>
-                <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
+                <i className='mr-1 fas fa-folder' />{post.category}
               </a>
             </Link>
             <div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
diff --git a/themes/Hexo/components/Catalog.js b/themes/Hexo/components/Catalog.js
index 830e6b04..540c0d75 100644
--- a/themes/Hexo/components/Catalog.js
+++ b/themes/Hexo/components/Catalog.js
@@ -2,9 +2,6 @@ import React from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faStream } from '@fortawesome/free-solid-svg-icons'
-// import { cs } from 'react-notion-x'
 
 /**
  * 目录导航组件
@@ -55,7 +52,7 @@ const Catalog = ({ toc }) => {
   }, throttleMs))
 
   return <div className='px-3'>
-    <div className='w-full'><FontAwesomeIcon className='mr-1' icon={faStream}/> 目录</div>
+    <div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
     <div className='w-full py-1'>
       <Progress/>
     </div>
diff --git a/themes/Hexo/components/CategoryGroup.js b/themes/Hexo/components/CategoryGroup.js
index e89159c4..69865b56 100644
--- a/themes/Hexo/components/CategoryGroup.js
+++ b/themes/Hexo/components/CategoryGroup.js
@@ -1,5 +1,3 @@
-import { faFolder, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
 
@@ -16,7 +14,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
             ? 'hover:text-white dark:hover:text-white bg-blue-600 text-white '
             : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-blue-600') +
             '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
-              <div>            <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={'mr-2'} />{category}({categories[category]})</div>
+              <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category}({categories[category]})</div>
             </a>
         </Link>
       })}
diff --git a/themes/Hexo/components/Footer.js b/themes/Hexo/components/Footer.js
index 57ad7797..50aacc75 100644
--- a/themes/Hexo/components/Footer.js
+++ b/themes/Hexo/components/Footer.js
@@ -1,5 +1,3 @@
-import { faCopyright, faEye, faShieldAlt, faUsers, faHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import BLOG from '@/blog.config'
 
@@ -11,16 +9,16 @@ const Footer = ({ title }) => {
     <footer
       className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
     >
-      <FontAwesomeIcon icon={faCopyright} /> {`${startYear}${currentYear}`} <span><FontAwesomeIcon icon={faHeart} className='mx-1 animate-pulse'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
+      <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
       <br/>
 
       <span>Powered by <a href='https://notion.so' className='underline font-bold text-gray-500 dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-500 dark:text-gray-300'>NotionNext</a>.</span></span>
 
-      {BLOG.BEI_AN && <><br /><FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
+      {BLOG.BEI_AN && <><br /><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
       <span className='hidden busuanzi_container_site_pv'>
-            <FontAwesomeIcon icon={faEye}/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
+            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
       <span className='pl-2 hidden busuanzi_container_site_uv'>
-        <FontAwesomeIcon icon={faUsers}/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
         <br/>
         <h1>{title}</h1>
     </footer>
diff --git a/themes/Hexo/components/Header.js b/themes/Hexo/components/Header.js
index 6a527cb8..f177ee0d 100644
--- a/themes/Hexo/components/Header.js
+++ b/themes/Hexo/components/Header.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
@@ -116,7 +114,7 @@ export default function Header () {
         }}
         className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
       >
-        <FontAwesomeIcon icon={faAngleDown} className='animate-bounce'/>
+        <i className='animate-bounce fas fa-angle-down'/>
       </div>
     </header>
   )
diff --git a/themes/Hexo/components/HeaderArticle.js b/themes/Hexo/components/HeaderArticle.js
index 30601cab..b51df350 100644
--- a/themes/Hexo/components/HeaderArticle.js
+++ b/themes/Hexo/components/HeaderArticle.js
@@ -1,5 +1,3 @@
-import { faFolderOpen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
@@ -50,13 +48,15 @@ export default function HeaderArticle ({ post }) {
 
             <section className="flex-wrap shadow-text flex justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
               <div>
-                <Link href={`/category/${post.category}`} passHref>
+                {post.category && <>
+                  <Link href={`/category/${post.category}`} passHref>
                   <a className="cursor-pointer text-md mr-2 dark:hover:text-white border-b dark:border-gray-500 border-dashed">
-                    <FontAwesomeIcon icon={faFolderOpen} className="mr-1" />
+                    <i className="mr-1 fas fa-folder-open" />
                     {post.category}
                   </a>
-                </Link>
-                <span className="mr-2">|</span>
+                  </Link>
+                  <span className="mr-2">|</span>
+                </>}
 
                 {post.type[0] !== 'Page' && (
                   <>
diff --git a/themes/Hexo/components/JumpToTopButton.js b/themes/Hexo/components/JumpToTopButton.js
index f680f549..2453a88d 100644
--- a/themes/Hexo/components/JumpToTopButton.js
+++ b/themes/Hexo/components/JumpToTopButton.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import CONFIG_HEXO from '../config_hexo'
 
@@ -19,7 +17,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
   return (<div className='flex space-x-1 items-center transform hover:scale-105 duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
         <div className='dark:text-gray-200' title={locale.POST.TOP} >
-          <FontAwesomeIcon icon={faArrowUp} />
+          <i className='fas fa-arrow-up' />
         </div>
         {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
     </div>)
diff --git a/themes/Hexo/components/LatestPostsGroup.js b/themes/Hexo/components/LatestPostsGroup.js
index 8e9d7bc8..c7e4ebd9 100644
--- a/themes/Hexo/components/LatestPostsGroup.js
+++ b/themes/Hexo/components/LatestPostsGroup.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faArchive, faFileAlt } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -21,7 +19,7 @@ const LatestPostsGroup = ({ posts }) => {
 
   return <>
       <div className='font-sans mb-2 px-1 flex flex-nowrap justify-between'>
-        <div><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
+        <div><i className='mr-2 fas fa-archive' />{locale.COMMON.LATEST_POSTS}</div>
       </div>
       {posts.map(post => {
         const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
@@ -30,7 +28,7 @@ const LatestPostsGroup = ({ posts }) => {
             <a className={ 'my-1  flex font-light'}>
               <div className={ (selected ? 'text-white  bg-blue-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-blue-600 px-2 duration-200 w-full ' +
                 'hover:text-white dark:hover:text-white cursor-pointer' }>
-                <FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
+                <i className='mr-2 fas fa-file-alt'/>
                 <div className='truncate'>{post.title}</div>
               </div>
             </a>
diff --git a/themes/Hexo/components/MenuButtonGroup.js b/themes/Hexo/components/MenuButtonGroup.js
index e62a3215..a761d498 100644
--- a/themes/Hexo/components/MenuButtonGroup.js
+++ b/themes/Hexo/components/MenuButtonGroup.js
@@ -2,22 +2,24 @@ import React from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArchive, faHome, faTag, faTh, faUser } from '@fortawesome/free-solid-svg-icons'
 import CONFIG_HEXO from '../config_hexo'
 
-const MenuButtonGroup = ({ postCount }) => {
+const MenuButtonGroup = (props) => {
+  const { postCount, customNav } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const archiveSlot = <div className='bg-blue-300 dark:bg-blue-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
 
-  const links = [
-    { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    { id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
-    { id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
-    { id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
+  let links = [
+    { id: 0, icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { id: 1, icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    { id: 2, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
+    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
+    { id: 4, icon: 'fas fa-user', name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
   ]
+  if (customNav) {
+    links = links.concat(customNav)
+  }
   return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans w-full'>
       {links.map(link => {
         if (link.show) {
@@ -26,7 +28,7 @@ const MenuButtonGroup = ({ postCount }) => {
           <a className={'py-1.5 my-1 px-5 duration-300 text-base justify-between hover:bg-blue-600 hover:text-white hover:shadow-lg cursor-pointer flex flex-nowrap items-center ' +
               (selected ? 'bg-blue-600 text-white' : ' ')} >
               <div className='my-auto items-center justify-center flex '>
-                <FontAwesomeIcon icon={link.icon} />
+                <i className={link.icon} />
                 <div className={'ml-4'}>{link.name}</div>
               </div>
               {link.slot}
diff --git a/themes/Hexo/components/PaginationNumber.js b/themes/Hexo/components/PaginationNumber.js
index 8b99f564..7224e078 100644
--- a/themes/Hexo/components/PaginationNumber.js
+++ b/themes/Hexo/components/PaginationNumber.js
@@ -1,8 +1,6 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * 数字翻页插件
@@ -29,7 +27,7 @@ const PaginationNumber = ({ page, totalPage }) => {
           rel='prev'
           className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
         >
-          <FontAwesomeIcon icon={faAngleLeft}/>
+          <i className='fas fa-angle-left'/>
         </div>
       </Link>
 
@@ -41,7 +39,7 @@ const PaginationNumber = ({ page, totalPage }) => {
           rel='next'
           className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-t-2 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
         >
-          <FontAwesomeIcon icon={faAngleRight}/>
+          <i className='fas fa-angle-right'/>
         </div>
       </Link>
     </div>
diff --git a/themes/Hexo/components/SearchInput.js b/themes/Hexo/components/SearchInput.js
index e728c320..edc3879f 100644
--- a/themes/Hexo/components/SearchInput.js
+++ b/themes/Hexo/components/SearchInput.js
@@ -1,7 +1,5 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons'
 
 const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   const [searchKey, setSearchKey] = useState(currentSearch || '')
@@ -54,12 +52,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
 
     <div className='-ml-8 cursor-pointer dark:hover:bg-gray-800 float-right items-center justify-center py-2'
       onClick={() => { handleSearch(searchKey) }}>
-        <FontAwesomeIcon spin={onLoading} icon={onLoading ? faSpinner : faSearch} className='hover:text-black transform duration-200 text-gray-500 cursor-pointer' />
+        <i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
     </div>
 
     {(searchKey && searchKey.length &&
       <div className='-ml-12 cursor-pointer dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-        <FontAwesomeIcon icon={faTimes} className='hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
+        <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
       </div>
       )}
   </div>
diff --git a/themes/Hexo/components/SideRight.js b/themes/Hexo/components/SideRight.js
index f76ca950..af89c216 100644
--- a/themes/Hexo/components/SideRight.js
+++ b/themes/Hexo/components/SideRight.js
@@ -4,8 +4,6 @@ import BLOG from '@/blog.config'
 import Card from './Card'
 import MenuButtonGroup from './MenuButtonGroup'
 import SearchInput from './SearchInput'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChartArea, faTh } from '@fortawesome/free-solid-svg-icons'
 import CategoryGroup from './CategoryGroup'
 import LatestPostsGroup from './LatestPostsGroup'
 import TagGroups from './TagGroups'
@@ -51,7 +49,7 @@ export default function SideRight (props) {
       </Card>
       <Card>
         <div className='ml-2 mb-3 font-sans'>
-          <FontAwesomeIcon icon={faChartArea} /> 统计
+          <i className='fas fa-chart-area' /> 统计
         </div>
         <div className='text-xs font-sans font-light justify-center mx-7'>
           <div className='inline'>
@@ -78,7 +76,7 @@ export default function SideRight (props) {
       {showCategory && (
         <Card>
           <div className='ml-2 mb-1 font-sans'>
-            <FontAwesomeIcon icon={faTh} /> 分类
+            <i className='fas fa-th'/> 分类
           </div>
           <CategoryGroup
             currentCategory={currentCategory}
@@ -96,7 +94,7 @@ export default function SideRight (props) {
       </Card>}
 
       {post && post.toc && (
-        <Card className='sticky top-4'>
+        <Card className='sticky top-12'>
           <Catalog toc={post.toc} />
         </Card>
       )}
diff --git a/themes/Hexo/components/SocialButton.js b/themes/Hexo/components/SocialButton.js
index 4a4c6a2e..45290dfb 100644
--- a/themes/Hexo/components/SocialButton.js
+++ b/themes/Hexo/components/SocialButton.js
@@ -1,7 +1,4 @@
 import BLOG from '@/blog.config'
-import { faGithub, faTelegram, faTwitter, faWeibo } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faRss } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 
 /**
@@ -13,22 +10,22 @@ const SocialButton = () => {
   return <div className='w-full justify-center flex-wrap flex'>
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 '>
       {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
-        <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-github'/>
       </a>}
       {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
-        <FontAwesomeIcon icon={faTwitter} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-twitter'/>
       </a>}
       {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
-        <FontAwesomeIcon icon={faTelegram} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-telegram'/>
       </a>}
       {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
-        <FontAwesomeIcon icon={faWeibo} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-weibo'/>
       </a>}
       {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
-        <FontAwesomeIcon icon={faEnvelope} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fas fa-envelope'/>
       </a>}
       <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fas fa-rss'/>
       </a>
     </div>
   </div>
diff --git a/themes/Hexo/components/TagGroups.js b/themes/Hexo/components/TagGroups.js
index 9f87776f..793ef429 100644
--- a/themes/Hexo/components/TagGroups.js
+++ b/themes/Hexo/components/TagGroups.js
@@ -1,5 +1,3 @@
-import { faTag } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import TagItemMini from './TagItemMini'
 
 /**
@@ -13,7 +11,7 @@ const TagGroups = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
     <div id='tags-group' className='dark:border-gray-600 space-y-2'>
-      <div className='font-light text-xs ml-2 mb-2'><FontAwesomeIcon icon={faTag} className='mr-1' />标签</div>
+      <div className='font-light text-xs ml-2 mb-2'><i className='mr-1 fas fa-tag' />标签</div>
       <div className='px-4'>
       {
         tags.map(tag => {
diff --git a/themes/Hexo/components/TagItemMini.js b/themes/Hexo/components/TagItemMini.js
index e687413f..63adeb12 100644
--- a/themes/Hexo/components/TagItemMini.js
+++ b/themes/Hexo/components/TagItemMini.js
@@ -1,5 +1,3 @@
-import { faTag } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false }) => {
@@ -9,7 +7,7 @@ const TagItemMini = ({ tag, selected = false }) => {
        ${selected
       ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-blue-900'
       : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-blue-800`}` }>
-    <div className='font-light dark:text-gray-400'>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+    <div className='font-light dark:text-gray-400'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </a>
   </Link>
 }
diff --git a/themes/Hexo/components/TocDrawerButton.js b/themes/Hexo/components/TocDrawerButton.js
index 60553462..fca2f356 100644
--- a/themes/Hexo/components/TocDrawerButton.js
+++ b/themes/Hexo/components/TocDrawerButton.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faListOl } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import CONFIG_HEXO from '../config_hexo'
 
@@ -17,7 +15,7 @@ const TocDrawerButton = (props) => {
   }
   const { locale } = useGlobal()
   return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 flex justify-center items-center' title={locale.POST.TOP} >
-    <FontAwesomeIcon icon={faListOl}/>
+    <i className='fas fa-list-ol'/>
   </div>)
 }
 
diff --git a/themes/Hexo/components/TopNav.js b/themes/Hexo/components/TopNav.js
index 5e1f4a3b..5b20b54d 100644
--- a/themes/Hexo/components/TopNav.js
+++ b/themes/Hexo/components/TopNav.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faBars, faTag, faThList, faTimes } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import throttle from 'lodash.throttle'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
@@ -60,10 +58,10 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
     { categories && (
         <section className='mt-8'>
           <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
+            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
             <Link href={'/category'} passHref>
               <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
+                {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
               </a>
             </Link>
           </div>
@@ -74,10 +72,10 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
     { tags && (
         <section className='mt-4'>
           <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTag} className='mr-2'/>{locale.COMMON.TAGS}</div>
+            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag'/>{locale.COMMON.TAGS}</div>
             <Link href={'/tag'} passHref>
               <a className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
+                {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
               </a>
             </Link>
           </div>
@@ -101,7 +99,7 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
         {/* 右侧功能 */}
         <div className='mr-1 flex lg:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
           <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
-          { isOpen ? <FontAwesomeIcon icon={faTimes} size={'lg'}/> : <FontAwesomeIcon icon={faBars} size={'lg'}/> }
+          { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
           </div>
         </div>
       </div>
diff --git a/themes/index.js b/themes/index.js
index e9b63872..5acc65dd 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -3,7 +3,7 @@
  */
 
 // export * from './Empty' //  空主题
-export * from './NEXT'
+// export * from './NEXT'
 // export * from './Fukasawa'
-// export * from './Hexo'
+export * from './Hexo'
 // export * from './Medium'