refs #2606 Use vue-fontawesome in Contents/SideBar

src/renderer/components/TimelineSpace/Contents/Lists/Index.vue

@@ -17,7 +17,7 @@
           <font-awesome-icon :icon="['far', 'edit']" />
         </el-button>
         <el-button type="text" @click="del(list)">
-          <font-awesome-icon icon="['far', 'trash-can']" />
+          <font-awesome-icon :icon="['far', 'trash-can']" />
         </el-button>
       </div>
     </div>

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue

@@ -22,10 +22,10 @@
               @click="unsubscribe(account)"
               :title="$t('side_bar.account_profile.unsubscribe')"
             >
-              <icon name="bell" scale="1.3"></icon>
+              <font-awesome-icon icon="bell" size="xl" />
             </div>
             <div v-else class="subscribe" @click="subscribe(account)" :title="$t('side_bar.account_profile.subscribe')">
-              <icon name="regular/bell" scale="1.3"></icon>
+              <font-awesome-icon :icon="['far', 'bell']" size="xl" />
             </div>
           </div>
         </div>
@@ -57,7 +57,7 @@
               </div>
 
               <el-button slot="reference" type="text" :title="$t('side_bar.account_profile.detail')">
-                <icon name="cog" scale="1.4"></icon>
+                <font-awesome-icon icon="gear" size="xl" />
               </el-button>
             </popper>
           </div>
@@ -66,13 +66,13 @@
           </div>
           <div class="follow-status" v-if="relationship !== null && relationship !== '' && !isOwnProfile">
             <div v-if="relationship.following" class="unfollow" @click="unfollow(account)" :title="$t('side_bar.account_profile.unfollow')">
-              <icon name="user-times" scale="1.5"></icon>
+              <font-awesome-icon icon="user-xmark" size="xl" />
             </div>
             <div v-else-if="relationship.requested" :title="$t('side_bar.account_profile.follow_requested')">
-              <icon name="hourglass" scale="1.5"></icon>
+              <font-awesome-icon icon="hourglass" size="xl" />
             </div>
             <div v-else class="follow" @click="follow(account)" :title="$t('side_bar.account_profile.follow')">
-              <icon name="user-plus" scale="1.5"></icon>
+              <font-awesome-icon icon="user-plus" size="xl" />
             </div>
           </div>
         </div>

src/renderer/main.ts

@@ -45,7 +45,13 @@ import {
   faQuoteRight,
   faThumbTack
 } from '@fortawesome/free-solid-svg-icons'
-import { faFaceSmile, faPenToSquare, faEdit, faTrashCan } from '@fortawesome/free-regular-svg-icons'
+import {
+  faFaceSmile as farFaceSmile,
+  faPenToSquare as farPenToSquare,
+  faEdit as farEdit,
+  faTrashCan as farTrashCan,
+  faBell as farBell
+} from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon'
@@ -86,7 +92,7 @@ library.add(
   faEyeSlash,
   faEye,
   faPlus,
-  faFaceSmile,
+  farFaceSmile,
   faXmark,
   faSquarePollHorizontal,
   faRetweet,
@@ -100,7 +106,7 @@ library.add(
   faLanguage,
   faAlignLeft,
   faFilter,
-  faPenToSquare,
+  farPenToSquare,
   faRotate,
   faSliders,
   faXmark,
@@ -110,8 +116,9 @@ library.add(
   faCheck,
   faQuoteRight,
   faThumbTack,
-  faEdit,
+  farEdit,
-  faTrashCan
+  farTrashCan,
+  farBell
 )
 
 Vue.use(ElementUI, { locale })