diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index b8a4f9af..e72ac60c 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -20,7 +20,7 @@ const BlogPostCard = ({ post, tags }) => {
         <div>
           <Link href={`/category/${post.category}`} passHref>
             <span className='cursor-pointer dark:text-gray-200  font-light text-gray-500 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
-              <FontAwesomeIcon icon={faFolder} size='sm' className='mr-1 w-5 text-sm' />{post.category}
+              <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
             </span>
           </Link>
           <span className='mx-2 dark:text-gray-400 text-gray-500'>|</span>
diff --git a/components/CategoryList.js b/components/CategoryList.js
index d036dc5d..ba84f6b9 100644
--- a/components/CategoryList.js
+++ b/components/CategoryList.js
@@ -17,7 +17,7 @@ const CategoryList = ({ currentCategory, categories }) => {
       return (
         <Link key={category} href={`/category/${category}`} passHref>
           <li
-            className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap dark:text-gray-300 
+            className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-light text-sm whitespace-nowrap dark:text-gray-300 
                  ${selected
                 ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
                 : 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700 dark:bg-gray-600 dark:border-gray-600'
diff --git a/components/Footer.js b/components/Footer.js
index 7c67918e..a35f9340 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -10,16 +10,16 @@ const Footer = ({ fullWidth = true }) => {
     <footer
       className='bg-gray-800 dark:bg-black dark:border-gray-900 border-t flex-shrink-0 justify-center text-center m-auto w-full text-gray-400 text-sm p-6'
     >
-      <FontAwesomeIcon size='sm' className='text-sm w-5' icon={faCopyright} /> {` ${y}`} <span> <a href='https://blog.tangly1024.com/article/about' className='underline font-bold text-gray-100'>blog.tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold text-gray-100'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-100'>NotionNext</a>.</span>
+      <FontAwesomeIcon icon={faCopyright} /> {` ${y}`} <span> <a href='https://blog.tangly1024.com/article/about' className='underline font-bold text-gray-100'>blog.tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold text-gray-100'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-100'>NotionNext</a>.</span>
       <br />
-      <FontAwesomeIcon size='sm' className='text-sm w-5' icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a>
+      <FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a>
       <span > <Link href='/article/privacy-policy' ><a className='ml-1 font-bold underline'>隐私政策</a></Link></span>
 
       <span id='busuanzi_container_site_pv' className='hidden'>
-            <FontAwesomeIcon size='sm' className='text-sm w-5' icon={faEye}/><span id='busuanzi_value_site_pv' className='px-1'> </span>pv
+            <FontAwesomeIcon icon={faEye}/><span id='busuanzi_value_site_pv' className='px-1'> </span>pv
       </span>
       <span id='busuanzi_container_site_uv' className='pl-2 hidden'>
-        <FontAwesomeIcon size='sm' className='text-sm w-5' icon={faUser}/> <span id='busuanzi_value_site_uv' className='px-1'> </span>uv   </span>
+        <FontAwesomeIcon icon={faUser}/> <span id='busuanzi_value_site_uv' className='px-1'> </span>uv   </span>
     </footer>
   )
 }
diff --git a/components/LoadingCover.js b/components/LoadingCover.js
index 3b9910f5..f404992b 100644
--- a/components/LoadingCover.js
+++ b/components/LoadingCover.js
@@ -4,7 +4,7 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 export default function LoadingCover () {
   return (<div id="loading-cover" className={'bg-white dark:bg-gray-800 dark:text-white text-black animate__animated animate__fadeIn flex-grow flex flex-col justify-center z-10 w-full h-screen container mx-auto'}>
   <div className="mx-auto">
-    <FontAwesomeIcon icon={faSpinner} spin={true} className="text-2xl" />
+    <FontAwesomeIcon icon={faSpinner} spin size='2x'/>
   </div>
 </div>
   )
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index aa207e14..e10e9a6d 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -28,12 +28,12 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white cursor-pointer duration-100 font-light flex flex-nowrap align-middle ' +
+            <a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap align-middle ' +
               (selected ? 'bg-blue-500 text-white ' : ' ')} >
-              <div className='my-auto w-5 justify-center flex'>
+              <div className='my-auto justify-center flex'>
                 <FontAwesomeIcon icon={link.icon} />
               </div>
-              <div className={'ml-4 w-32'}>{link.name}</div>
+              <div className={'ml-4'}>{link.name}</div>
             </a>
           </Link>
         } else {
diff --git a/components/SearchInput.js b/components/SearchInput.js
index 424a8d60..bcc09d13 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -42,14 +42,14 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'w-full pl-2 transition font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'w-full pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
     />
     {(searchKey && searchKey.length && <FontAwesomeIcon icon={faTimes} className='text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
 
-    <div className='p-3 text-xl bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center align-middle cursor-pointer'
+    <div className='p-3 bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center align-middle cursor-pointer'
       onClick={() => { handleSearch(searchKey) }}>
         <FontAwesomeIcon spin={onLoading} icon={onLoading ? faSpinner : faSearch} className='hover:scale-125 hover:text-black transform duration-200 dark:text-gray-300 dark:hover:text-white text-gray-600 cursor-pointer ' />
     </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index 1fdd730f..04c1b0fb 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -42,7 +42,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {posts && (
         <section className='mt-4'>
           <div className='text-sm pb-4 px-5  flex flex-nowrap justify-between'>
-            <div className='font-light text-gray-600  dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2 w-5' />{locale.COMMON.LATEST_POSTS}</div>
+            <div className='font-light text-gray-600  dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
           </div>
           <LatestPostsGroup posts={posts} />
         </section>
@@ -52,7 +52,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {categories && (
         <section className='mt-8'>
           <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2 w-5' />{locale.COMMON.CATEGORY}</div>
+            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
               <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -67,7 +67,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {tags && (
         <section className='mt-8'>
           <div className='text-sm py-2 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2 w-5'/>{locale.COMMON.TAGS}</div>
+            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2'/>{locale.COMMON.TAGS}</div>
             <Link href='/tag' passHref>
               <div className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
diff --git a/pages/_app.js b/pages/_app.js
index 92fbd3a1..f07873aa 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -6,6 +6,10 @@ import 'animate.css'
 import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
+// 解决React-FontAwesome图标问题
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })