Use FontAwesome as web font instead of vue component (#7469)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update yarn.lock

* wip

* wip

16 files changed, 129 insertions, 173 deletions

diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue
index c8355b0683..7666bc1a44 100644
--- a/src/client/pages/instance/abuses.vue
+++ b/src/client/pages/instance/abuses.vue
@@ -63,8 +63,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from '@/misc/acct/parse';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -86,7 +84,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.abuseReports,
-				icon: faExclamationCircle
+				icon: 'fas fa-exclamation-circle'
 			},
 			searchUsername: '',
 			searchHost: '',
@@ -102,7 +100,6 @@ export default defineComponent({
 					targetUserOrigin: this.targetUserOrigin,
 				}),
 			},
-			faPlus, faUsers, faSearch, faBookmark, farBookmark, faMicrophoneSlash, faSnowflake
 		}
 	},
 
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index f9d58a29c4..6a00476f9f 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -2,7 +2,7 @@
 <div class="ztgjmzrw">
 	<div class="_section">
 		<div class="_content">
-			<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
+			<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 			<section class="_card _gap announcements" v-for="announcement in announcements">
 				<div class="_content announcement">
 					<MkInput v-model:value="announcement.title">
@@ -16,8 +16,8 @@
 					</MkInput>
 					<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
 					<div class="buttons">
-						<MkButton class="button" inline @click="save(announcement)" primary><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
-						<MkButton class="button" inline @click="remove(announcement)"><Fa :icon="faTrashAlt"/> {{ $ts.remove }}</MkButton>
+						<MkButton class="button" inline @click="save(announcement)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+						<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
 					</div>
 				</div>
 			</section>
@@ -28,8 +28,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBroadcastTower, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
@@ -47,10 +45,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.announcements,
-				icon: faBroadcastTower
+				icon: 'fas fa-broadcast-tower'
 			},
 			announcements: [],
-			faBroadcastTower, faSave, faTrashAlt, faPlus
 		}
 	},
 
diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue
index 34eca47b4e..9ab53c42af 100644
--- a/src/client/pages/instance/emoji-edit-dialog.vue
+++ b/src/client/pages/instance/emoji-edit-dialog.vue
@@ -16,14 +16,13 @@
 			<span>{{ $ts.tags }}</span>
 			<template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
 		</MkInput>
-		<MkButton danger @click="del()"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
+		<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 	</div>
 </XModalWindow>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -51,7 +50,6 @@ export default defineComponent({
 			category: this.emoji.category,
 			aliases: this.emoji.aliases?.join(' '),
 			categories: [],
-			faTrashAlt,
 		}
 	},
 
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 722ed0063f..88bebb40e0 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -9,8 +9,8 @@
 
 	<div class="_section">
 		<div class="local" v-if="tab === 'local'">
-			<MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><Fa :icon="faPlus"/> {{ $ts.addEmoji }}</MkButton>
-			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.search }}</span></MkInput>
+			<MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
+			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
 			<MkPagination :pagination="pagination" ref="emojis">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
 				<template #default="{items}">
@@ -28,7 +28,7 @@
 		</div>
 
 		<div class="remote" v-else-if="tab === 'remote'">
-			<MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.search }}</span></MkInput>
+			<MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
 			<MkInput v-model:value="host" :debounce="true"><span>{{ $ts.host }}</span></MkInput>
 			<MkPagination :pagination="remotePagination" ref="remoteEmojis">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
@@ -51,8 +51,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faPlus, faSave, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
@@ -73,9 +71,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.customEmojis,
-				icon: faLaugh,
+				icon: 'fas fa-laugh',
 				action: {
-					icon: faPlus,
+					icon: 'fas fa-plus',
 					handler: this.add
 				}
 			},
@@ -98,7 +96,6 @@ export default defineComponent({
 					host: (this.host && this.host !== '') ? this.host : null
 				}))
 			},
-			faTrashAlt, faPlus, faLaugh, faSave, faSearch,
 		}
 	},
 
@@ -144,7 +141,7 @@ export default defineComponent({
 				text: ':' + emoji.name + ':',
 			}, {
 				text: this.$ts.import,
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				action: () => { this.im(emoji) }
 			}], ev.currentTarget || ev.target);
 		}
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 2a820e5baf..1b69fc291e 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -42,14 +42,14 @@
 		<div class="_content">
 			<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
 				<div class="ppgwaixt _panel" v-for="instance in items" :key="instance.id" @click="info(instance)">
-					<div class="host"><Fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div>
+					<div class="host"><i class="fas fa-circle indicator" :class="getStatus(instance)"></i><b>{{ instance.host }}</b></div>
 					<div class="status">
-						<span class="sub" v-if="instance.followersCount > 0"><Fa :icon="faCaretDown" class="icon"/>Sub</span>
-						<span class="sub" v-else><Fa :icon="faCaretDown" class="icon"/>-</span>
-						<span class="pub" v-if="instance.followingCount > 0"><Fa :icon="faCaretUp" class="icon"/>Pub</span>
-						<span class="pub" v-else><Fa :icon="faCaretUp" class="icon"/>-</span>
-						<span class="lastCommunicatedAt"><Fa :icon="faExchangeAlt" class="icon"/><MkTime :time="instance.lastCommunicatedAt"/></span>
-						<span class="latestStatus"><Fa :icon="faTrafficLight" class="icon"/>{{ instance.latestStatus || '-' }}</span>
+						<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
+						<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
+						<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
+						<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
+						<span class="lastCommunicatedAt"><i class="fas fa-exchange-alt icon"></i><MkTime :time="instance.lastCommunicatedAt"/></span>
+						<span class="latestStatus"><i class="fas fa-traffic-light icon"></i>{{ instance.latestStatus || '-' }}</span>
 					</div>
 				</div>
 			</MkPagination>
@@ -60,7 +60,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faGlobe, faCircle, faExchangeAlt, faCaretDown, faCaretUp, faTrafficLight } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -81,7 +80,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.federation,
-				icon: faGlobe
+				icon: 'fas fa-globe'
 			},
 			host: '',
 			state: 'federating',
@@ -103,7 +102,6 @@ export default defineComponent({
 						{})
 				})
 			},
-			faGlobe, faCircle, faExchangeAlt, faCaretDown, faCaretUp, faTrafficLight
 		}
 	},
 
diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue
index 85c03e3dce..1220a5193f 100644
--- a/src/client/pages/instance/file-dialog.vue
+++ b/src/client/pages/instance/file-dialog.vue
@@ -21,8 +21,8 @@
 		</div>
 		<div class="_section">
 			<div class="_content">
-				<MkButton full @click="showUser"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts.user }}</MkButton>
-				<MkButton full danger @click="del"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
+				<MkButton full @click="showUser"><i class="fas fa-external-link-square-alt"></i> {{ $ts.user }}</MkButton>
+				<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 			</div>
 		</div>
 		<div class="_section" v-if="info">
@@ -36,8 +36,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faTimes, faBookmark, faKey, faSync, faMicrophoneSlash, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
@@ -67,7 +65,6 @@ export default defineComponent({
 			file: null,
 			info: null,
 			isSensitive: false,
-			faTimes, faBookmark, farBookmark, faKey, faSync, faMicrophoneSlash, faSnowflake, faTrashAlt, faExternalLinkSquareAlt
 		};
 	},
 
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index e7de050df8..ed46dd466c 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -2,17 +2,17 @@
 <div class="xrmjdkdw">
 	<div class="_section">
 		<div class="_content">
-			<MkButton primary @click="clear()"><Fa :icon="faTrashAlt"/> {{ $ts.clearCachedFiles }}</MkButton>
+			<MkButton primary @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearCachedFiles }}</MkButton>
 		</div>
 	</div>
 
 	<div class="_section lookup">
-		<div class="_title"><Fa :icon="faSearch"/> {{ $ts.lookup }}</div>
+		<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
 		<div class="_content">
 			<MkInput class="target" v-model:value="q" type="text" @enter="find()">
 				<span>{{ $ts.fileIdOrUrl }}</span>
 			</MkInput>
-			<MkButton @click="find()" primary><Fa :icon="faSearch"/> {{ $ts.lookup }}</MkButton>
+			<MkButton @click="find()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
 		</div>
 	</div>
 
@@ -62,8 +62,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCloud, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -86,7 +84,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.files,
-				icon: faCloud
+				icon: 'fas fa-cloud'
 			},
 			q: null,
 			origin: 'local',
@@ -101,7 +99,6 @@ export default defineComponent({
 					hostname: (this.hostname && this.hostname !== '') ? this.hostname : null,
 				}),
 			},
-			faTrashAlt, faCloud, faSearch,
 		}
 	},
 
diff --git a/src/client/pages/instance/index.metrics.vue b/src/client/pages/instance/index.metrics.vue
index 17ebf5d0d6..9dd115240e 100644
--- a/src/client/pages/instance/index.metrics.vue
+++ b/src/client/pages/instance/index.metrics.vue
@@ -1,15 +1,15 @@
 <template>
 <div>
 	<MkFolder>
-		<template #header><Fa :icon="faHeartbeat"/> {{ $ts.metrics }}</template>
+		<template #header><i class="fas fa-heartbeat"></i> {{ $ts.metrics }}</template>
 		<div class="_section" style="padding: 0 var(--margin);">
 			<div class="_content">
 				<MkContainer :foldable="false" class="_gap">
-					<template #header><Fa :icon="faMicrochip"/>{{ $ts.cpuAndMemory }}</template>
+					<template #header><i class="fas fa-microchip"></i>{{ $ts.cpuAndMemory }}</template>
 					<!--
 					<template #func>
-						<button class="_button" @click="resume" :disabled="!paused"><Fa :icon="faPlay"/></button>
-						<button class="_button" @click="pause" :disabled="paused"><Fa :icon="faPause"/></button>
+						<button class="_button" @click="resume" :disabled="!paused"><i class="fas fa-play"></i></button>
+						<button class="_button" @click="pause" :disabled="paused"><i class="fas fa-pause"></i></button>
 					</template>
 					-->
 
@@ -28,11 +28,11 @@
 				</MkContainer>
 
 				<MkContainer :foldable="false" class="_gap">
-					<template #header><Fa :icon="faHdd"/> {{ $ts.disk }}</template>
+					<template #header><i class="fas fa-hdd"></i> {{ $ts.disk }}</template>
 					<!--
 					<template #func>
-						<button class="_button" @click="resume" :disabled="!paused"><Fa :icon="faPlay"/></button>
-						<button class="_button" @click="pause" :disabled="paused"><Fa :icon="faPause"/></button>
+						<button class="_button" @click="resume" :disabled="!paused"><i class="fas fa-play"></i></button>
+						<button class="_button" @click="pause" :disabled="paused"><i class="fas fa-pause"></i></button>
 					</template>
 					-->
 
@@ -51,11 +51,11 @@
 				</MkContainer>
 
 				<MkContainer :foldable="false" class="_gap">
-					<template #header><Fa :icon="faExchangeAlt"/> {{ $ts.network }}</template>
+					<template #header><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</template>
 					<!--
 					<template #func>
-						<button class="_button" @click="resume" :disabled="!paused"><Fa :icon="faPlay"/></button>
-						<button class="_button" @click="pause" :disabled="paused"><Fa :icon="faPause"/></button>
+						<button class="_button" @click="resume" :disabled="!paused"><i class="fas fa-play"></i></button>
+						<button class="_button" @click="pause" :disabled="paused"><i class="fas fa-pause"></i></button>
 					</template>
 					-->
 
@@ -75,11 +75,11 @@
 	</MkFolder>
 
 	<MkFolder>
-		<template #header><Fa :icon="faClipboardList"/> {{ $ts.jobQueue }}</template>
+		<template #header><i class="fas fa-clipboard-list"></i> {{ $ts.jobQueue }}</template>
 
 		<div class="vkyrmkwb" :style="{ gridTemplateRows: queueHeight }">
 			<MkContainer :foldable="false" :scrollable="true" :resize-base-el="() => $el">
-				<template #header><Fa :icon="faExclamationTriangle"/> {{ $ts.delayed }}</template>
+				<template #header><i class="fas fa-exclamation-triangle"></i> {{ $ts.delayed }}</template>
 
 				<div class="_content">
 					<div class="_keyValue" v-for="job in jobs" :key="job[0]">
@@ -89,10 +89,10 @@
 				</div>
 			</MkContainer>
 			<XQueue :connection="queueConnection" domain="inbox" ref="queue" class="queue">
-				<template #title><Fa :icon="faExchangeAlt"/> In</template>
+				<template #title><i class="fas fa-exchange-alt"></i> In</template>
 			</XQueue>
 			<XQueue :connection="queueConnection" domain="deliver" class="queue">
-				<template #title><Fa :icon="faExchangeAlt"/> Out</template>
+				<template #title><i class="fas fa-exchange-alt"></i> Out</template>
 			</XQueue>
 		</div>
 	</MkFolder>
@@ -101,7 +101,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import { faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkButton from '@client/components/ui/button.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -153,7 +152,6 @@ export default defineComponent({
 			overviewHeight: '1fr',
 			queueHeight: '1fr',
 			paused: false,
-			faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList,
 		}
 	},
 
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 731acd8f00..f0240718aa 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -1,13 +1,13 @@
 <template>
 <div v-if="meta" v-show="page === 'index'" class="xhexznfu _section">
 	<MkFolder>
-		<template #header><Fa :icon="faTachometerAlt"/> {{ $ts.overview }}</template>
+		<template #header><i class="fas fa-tachometer-alt"></i> {{ $ts.overview }}</template>
 
 		<div class="sboqnrfi" :style="{ gridTemplateRows: overviewHeight }">
 			<MkInstanceStats :chart-limit="300" :detailed="true" class="_gap" ref="stats"/>
 
 			<MkContainer :foldable="true" class="_gap">
-				<template #header><Fa :icon="faInfoCircle"/>{{ $ts.instanceInfo }}</template>
+				<template #header><i class="fas fa-info-circle"></i>{{ $ts.instanceInfo }}</template>
 
 				<div class="_content">
 					<div class="_keyValue"><b>Misskey</b><span>v{{ version }}</span></div>
@@ -20,7 +20,7 @@
 			</MkContainer>
 			
 			<MkContainer :foldable="true" :scrollable="true" class="_gap" style="height: 300px;">
-				<template #header><Fa :icon="faDatabase"/>{{ $ts.database }}</template>
+				<template #header><i class="fas fa-database"></i>{{ $ts.database }}</template>
 
 				<div class="_content" v-if="dbInfo">
 					<table style="border-collapse: collapse; width: 100%;">
@@ -42,7 +42,7 @@
 </div>
 <div v-if="page === 'logs'" class="_section">
 	<MkFolder>
-		<template #header><Fa :icon="faStream"/> {{ $ts.logs }}</template>
+		<template #header><i class="fas fa-stream"></i> {{ $ts.logs }}</template>
 
 		<div class="_keyValue" v-for="log in modLogs">
 			<b>{{ log.type }}</b><span>by {{ log.user.username }}</span><MkTime :time="log.createdAt" style="opacity: 0.7;"/>
@@ -56,7 +56,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, markRaw } from 'vue';
-import { faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList } from '@fortawesome/free-solid-svg-icons';
 import VueJsonPretty from 'vue-json-pretty';
 import MkInstanceStats from '@client/components/instance-stats.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -91,21 +90,21 @@ export default defineComponent({
 					id: 'index',
 					title: null,
 					tooltip: this.$ts.instance,
-					icon: faServer,
+					icon: 'fas fa-server',
 					onClick: () => { this.page = 'index'; },
 					selected: computed(() => this.page === 'index')
 				}, {
 					id: 'metrics',
 					title: null,
 					tooltip: this.$ts.metrics,
-					icon: faHeartbeat,
+					icon: 'fas fa-heartbeat',
 					onClick: () => { this.page = 'metrics'; },
 					selected: computed(() => this.page === 'metrics')
 				}, {
 					id: 'logs',
 					title: null,
 					tooltip: this.$ts.logs,
-					icon: faStream,
+					icon: 'fas fa-stream',
 					onClick: () => { this.page = 'logs'; },
 					selected: computed(() => this.page === 'logs')
 				}]
@@ -117,7 +116,6 @@ export default defineComponent({
 			serverInfo: null,
 			modLogs: [],
 			dbInfo: null,
-			faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList,
 		}
 	},
 
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index 1adb3ab9d2..f52e5d866b 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -106,11 +106,11 @@
 			<MkSwitch :value="isBlocked" class="switch" @update:value="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
 			<details>
 				<summary>{{ $ts.deleteAllFiles }}</summary>
-				<MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><Fa :icon="faTrashAlt"/> {{ $ts.deleteAllFiles }}</MkButton>
+				<MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
 			</details>
 			<details>
 				<summary>{{ $ts.removeAllFollowing }}</summary>
-				<MkButton @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><Fa :icon="faMinusCircle"/> {{ $ts.removeAllFollowing }}</MkButton>
+				<MkButton @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-minus-circle"></i> {{ $ts.removeAllFollowing }}</MkButton>
 				<MkInfo warn>{{ $t('removeAllFollowingDescription', { host: instance.host }) }}</MkInfo>
 			</details>
 		</div>
@@ -125,7 +125,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Chart from 'chart.js';
-import { faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkUsersDialog from '@client/components/users-dialog.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -174,7 +173,6 @@ export default defineComponent({
 			chartInstance: null,
 			chartSrc: 'requests',
 			chartSpan: 'hour',
-			faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt
 		};
 	},
 
diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue
index f27546a401..7b634259d3 100644
--- a/src/client/pages/instance/logs.vue
+++ b/src/client/pages/instance/logs.vue
@@ -24,14 +24,12 @@
 		</code>
 	</div>
 
-	<MkButton @click="deleteAllLogs()" primary><Fa :icon="faTrashAlt"/> {{ $ts.deleteAll }}</MkButton>
+	<MkButton @click="deleteAllLogs()" primary><i class="fas fa-trash-alt"></i> {{ $ts.deleteAll }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faStream } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
@@ -51,12 +49,11 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.serverLogs,
-				icon: faStream
+				icon: 'fas fa-stream'
 			},
 			logs: [],
 			logLevel: 'all',
 			logDomain: '',
-			faTrashAlt,
 		}
 	},
 
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 249babcf41..0c1e0e51b5 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -1,14 +1,14 @@
 <template>
 <div>
 	<XQueue :connection="connection" domain="inbox">
-		<template #title><Fa :icon="faExchangeAlt"/> In</template>
+		<template #title><i class="fas fa-exchange-alt"></i> In</template>
 	</XQueue>
 	<XQueue :connection="connection" domain="deliver">
-		<template #title><Fa :icon="faExchangeAlt"/> Out</template>
+		<template #title><i class="fas fa-exchange-alt"></i> Out</template>
 	</XQueue>
 	<section class="_section">
 		<div class="_content">
-			<MkButton @click="clear()"><Fa :icon="faTrashAlt"/> {{ $ts.clearQueue }}</MkButton>
+			<MkButton @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</MkButton>
 		</div>
 	</section>
 </div>
@@ -16,8 +16,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
 import * as os from '@client/os';
@@ -33,10 +31,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.jobQueue,
-				icon: faExchangeAlt,
+				icon: 'fas fa-exchange-alt',
 			},
 			connection: os.stream.useSharedConnection('queueStats'),
-			faExchangeAlt, faTrashAlt
 		}
 	},
 
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index d97a07cbb2..dbf75ea53b 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -1,21 +1,21 @@
 <template>
 <div class="relaycxt">
 	<section class="_section add">
-		<div class="_title"><Fa :icon="faPlus"/> {{ $ts.addRelay }}</div>
+		<div class="_title"><i class="fas fa-plus"></i> {{ $ts.addRelay }}</div>
 		<div class="_content">
 			<MkInput v-model:value="inbox">
 				<span>{{ $ts.inboxUrl }}</span>
 			</MkInput>
-			<MkButton @click="add(inbox)" primary><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
+			<MkButton @click="add(inbox)" primary><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_section relays">
-		<div class="_title"><Fa :icon="faProjectDiagram"/> {{ $ts.addedRelays }}</div>
+		<div class="_title"><i class="fas fa-project-diagram"></i> {{ $ts.addedRelays }}</div>
 		<div class="_content relay" v-for="relay in relays" :key="relay.inbox">
 			<div>{{ relay.inbox }}</div>
 			<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
-			<MkButton class="button" inline @click="remove(relay.inbox)"><Fa :icon="faTrashAlt"/> {{ $ts.remove }}</MkButton>
+			<MkButton class="button" inline @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
 		</div>
 	</section>
 </div>
@@ -23,8 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import * as os from '@client/os';
@@ -40,11 +38,10 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.relays,
-				icon: faProjectDiagram,
+				icon: 'fas fa-project-diagram',
 			},
 			relays: [],
 			inbox: '',
-			faPlus, faProjectDiagram, faSave, faTrashAlt
 		}
 	},
 
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 038ecfd5ac..b827a77649 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -1,20 +1,20 @@
 <template>
 <div v-if="meta" class="_section">
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faInfoCircle"/> {{ $ts.basicInfo }}</div>
+		<div class="_title"><i class="fas fa-info-circle"></i> {{ $ts.basicInfo }}</div>
 		<div class="_content">
 			<MkInput v-model:value="name">{{ $ts.instanceName }}</MkInput>
 			<MkTextarea v-model:value="description">{{ $ts.instanceDescription }}</MkTextarea>
-			<MkInput v-model:value="iconUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.iconUrl }}</MkInput>
-			<MkInput v-model:value="bannerUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.bannerUrl }}</MkInput>
-			<MkInput v-model:value="backgroundImageUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.backgroundImageUrl }}</MkInput>
-			<MkInput v-model:value="logoImageUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.logoImageUrl }}</MkInput>
-			<MkInput v-model:value="tosUrl"><template #icon><Fa :icon="faLink"/></template>{{ $ts.tosUrl }}</MkInput>
+			<MkInput v-model:value="iconUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.iconUrl }}</MkInput>
+			<MkInput v-model:value="bannerUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.bannerUrl }}</MkInput>
+			<MkInput v-model:value="backgroundImageUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.backgroundImageUrl }}</MkInput>
+			<MkInput v-model:value="logoImageUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.logoImageUrl }}</MkInput>
+			<MkInput v-model:value="tosUrl"><template #icon><i class="fas fa-link"></i></template>{{ $ts.tosUrl }}</MkInput>
 			<MkInput v-model:value="maintainerName">{{ $ts.maintainerName }}</MkInput>
-			<MkInput v-model:value="maintainerEmail" type="email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.maintainerEmail }}</MkInput>
+			<MkInput v-model:value="maintainerEmail" type="email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.maintainerEmail }}</MkInput>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
@@ -22,7 +22,7 @@
 
 	<section class="_card _gap">
 		<div class="_content">
-			<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $ts.maxNoteTextLength }}</MkInput>
+			<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><i class="fas fa-pencil-alt"></i></template>{{ $ts.maxNoteTextLength }}</MkInput>
 		</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableLocalTimeline" @update:value="save()">{{ $ts.enableLocalTimeline }}</MkSwitch>
@@ -35,7 +35,7 @@
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faUser"/> {{ $ts.registration }}</div>
+		<div class="_title"><i class="fas fa-user"></i> {{ $ts.registration }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableRegistration" @update:value="save()">{{ $ts.enableRegistration }}</MkSwitch>
 			<MkButton v-if="!enableRegistration" @click="invite">{{ $ts.invite }}</MkButton>
@@ -43,12 +43,12 @@
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faShieldAlt"/> {{ $ts.hcaptcha }}</div>
+		<div class="_title"><i class="fas fa-shield-alt"></i> {{ $ts.hcaptcha }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableHcaptcha">{{ $ts.enableHcaptcha }}</MkSwitch>
 			<template v-if="enableHcaptcha">
-				<MkInput v-model:value="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.hcaptchaSiteKey }}</MkInput>
-				<MkInput v-model:value="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.hcaptchaSecretKey }}</MkInput>
+				<MkInput v-model:value="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.hcaptchaSiteKey }}</MkInput>
+				<MkInput v-model:value="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.hcaptchaSecretKey }}</MkInput>
 			</template>
 		</div>
 		<div class="_content" v-if="enableHcaptcha">
@@ -56,17 +56,17 @@
 			<captcha v-if="enableHcaptcha" provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faShieldAlt"/> {{ $ts.recaptcha }}</div>
+		<div class="_title"><i class="fas fa-shield-alt"></i> {{ $ts.recaptcha }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableRecaptcha" ref="enableRecaptcha">{{ $ts.enableRecaptcha }}</MkSwitch>
 			<template v-if="enableRecaptcha">
-				<MkInput v-model:value="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.recaptchaSiteKey }}</MkInput>
-				<MkInput v-model:value="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><Fa :icon="faKey"/></template>{{ $ts.recaptchaSecretKey }}</MkInput>
+				<MkInput v-model:value="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.recaptchaSiteKey }}</MkInput>
+				<MkInput v-model:value="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><i class="fas fa-key"></i></template>{{ $ts.recaptchaSecretKey }}</MkInput>
 			</template>
 		</div>
 		<div class="_content" v-if="enableRecaptcha && recaptchaSiteKey">
@@ -74,12 +74,12 @@
 			<captcha v-if="enableRecaptcha" provider="grecaptcha" :sitekey="recaptchaSiteKey"/>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faEnvelope" /> {{ $ts.emailConfig }}</div>
+		<div class="_title"><i class="fas fa-envelope"></i> {{ $ts.emailConfig }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableEmail" @update:value="save()">{{ $ts.enableEmail }}<template #desc>{{ $ts.emailConfigInfo }}</template></MkSwitch>
 			<MkInput v-model:value="email" type="email" :disabled="!enableEmail">{{ $ts.email }}</MkInput>
@@ -95,54 +95,54 @@
 			<MkInfo>{{ $ts.emptyToDisableSmtpAuth }}</MkInfo>
 			<MkSwitch v-model:value="smtpSecure" :disabled="!enableEmail">{{ $ts.smtpSecure }}<template #desc>{{ $ts.smtpSecureInfo }}</template></MkSwitch>
 			<div>
-			  <MkButton :disabled="!enableEmail" primary inline @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+				<MkButton :disabled="!enableEmail" primary inline @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 				<MkButton :disabled="!enableEmail" inline @click="testEmail()">{{ $ts.testEmail }}</MkButton>
 			</div>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faBolt"/> {{ $ts.serviceworker }}</div>
+		<div class="_title"><i class="fas fa-bolt"></i> {{ $ts.serviceworker }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableServiceWorker">{{ $ts.enableServiceworker }}<template #desc>{{ $ts.serviceworkerInfo }}</template></MkSwitch>
 			<template v-if="enableServiceWorker">
 				<div class="_inputs">
-					<MkInput v-model:value="swPublicKey" :disabled="!enableServiceWorker"><template #icon><Fa :icon="faKey"/></template>Public key</MkInput>
-					<MkInput v-model:value="swPrivateKey" :disabled="!enableServiceWorker"><template #icon><Fa :icon="faKey"/></template>Private key</MkInput>
+					<MkInput v-model:value="swPublicKey" :disabled="!enableServiceWorker"><template #icon><i class="fas fa-key"></i></template>Public key</MkInput>
+					<MkInput v-model:value="swPrivateKey" :disabled="!enableServiceWorker"><template #icon><i class="fas fa-key"></i></template>Private key</MkInput>
 				</div>
 			</template>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faThumbtack"/> {{ $ts.pinnedUsers }}</div>
+		<div class="_title"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedUsers }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="pinnedUsers">
 				<template #desc>{{ $ts.pinnedUsersDescription }} <button class="_textButton" @click="addPinUser">{{ $ts.addUser }}</button></template>
 			</MkTextarea>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faThumbtack"/> {{ $ts.pinnedPages }}</div>
+		<div class="_title"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedPages }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="pinnedPages">
 				<template #desc>{{ $ts.pinnedPagesDescription }}</template>
 			</MkTextarea>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faCloud"/> {{ $ts.files }}</div>
+		<div class="_title"><i class="fas fa-cloud"></i> {{ $ts.files }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="cacheRemoteFiles">{{ $ts.cacheRemoteFiles }}<template #desc>{{ $ts.cacheRemoteFilesDescription }}</template></MkSwitch>
 			<MkSwitch v-model:value="proxyRemoteFiles">{{ $ts.proxyRemoteFiles }}<template #desc>{{ $ts.proxyRemoteFilesDescription }}</template></MkSwitch>
@@ -150,12 +150,12 @@
 			<MkInput v-model:value="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">{{ $ts.driveCapacityPerRemoteAccount }}<template #suffix>MB</template><template #desc>{{ $ts.inMb }}</template></MkInput>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faCloud"/> {{ $ts.objectStorage }}</div>
+		<div class="_title"><i class="fas fa-cloud"></i> {{ $ts.objectStorage }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="useObjectStorage">{{ $ts.useObjectStorage }}</MkSwitch>
 			<template v-if="useObjectStorage">
@@ -169,8 +169,8 @@
 					<MkInput v-model:value="objectStorageRegion" :disabled="!useObjectStorage">{{ $ts.objectStorageRegion }}<template #desc>{{ $ts.objectStorageRegionDesc }}</template></MkInput>
 				</div>
 				<div class="_inputs">
-					<MkInput v-model:value="objectStorageAccessKey" :disabled="!useObjectStorage"><template #icon><Fa :icon="faKey"/></template>Access key</MkInput>
-					<MkInput v-model:value="objectStorageSecretKey" :disabled="!useObjectStorage"><template #icon><Fa :icon="faKey"/></template>Secret key</MkInput>
+					<MkInput v-model:value="objectStorageAccessKey" :disabled="!useObjectStorage"><template #icon><i class="fas fa-key"></i></template>Access key</MkInput>
+					<MkInput v-model:value="objectStorageSecretKey" :disabled="!useObjectStorage"><template #icon><i class="fas fa-key"></i></template>Secret key</MkInput>
 				</div>
 				<MkSwitch v-model:value="objectStorageUseSSL" :disabled="!useObjectStorage">{{ $ts.objectStorageUseSSL }}<template #desc>{{ $ts.objectStorageUseSSLDesc }}</template></MkSwitch>
 				<MkSwitch v-model:value="objectStorageUseProxy" :disabled="!useObjectStorage">{{ $ts.objectStorageUseProxy }}<template #desc>{{ $ts.objectStorageUseProxyDesc }}</template></MkSwitch>
@@ -179,12 +179,12 @@
 			</template>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faGhost"/> {{ $ts.proxyAccount }}</div>
+		<div class="_title"><i class="fas fa-ghost"></i> {{ $ts.proxyAccount }}</div>
 		<div class="_content">
 			<MkInput :value="proxyAccount ? proxyAccount.username : null" disabled><template #prefix>@</template>{{ $ts.proxyAccount }}<template #desc>{{ $ts.proxyAccountDescription }}</template></MkInput>
 			<MkButton primary @click="chooseProxyAccount">{{ $ts.chooseProxyAccount }}</MkButton>
@@ -192,56 +192,56 @@
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faBan"/> {{ $ts.blockedInstances }}</div>
+		<div class="_title"><i class="fas fa-ban"></i> {{ $ts.blockedInstances }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="blockedHosts">
 				<template #desc>{{ $ts.blockedInstancesDescription }}</template>
 			</MkTextarea>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faShareAlt"/> {{ $ts.integration }}</div>
+		<div class="_title"><i class="fas fa-share-alt"></i> {{ $ts.integration }}</div>
 		<div class="_content">
-			<header><Fa :icon="faTwitter"/> Twitter</header>
+			<header><i class="fab fa-twitter"></i> Twitter</header>
 			<MkSwitch v-model:value="enableTwitterIntegration">{{ $ts.enable }}</MkSwitch>
 			<template v-if="enableTwitterIntegration">
 				<MkInfo>Callback URL: {{ `${url}/api/tw/cb` }}</MkInfo>
-				<MkInput v-model:value="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><Fa :icon="faKey"/></template>Consumer Key</MkInput>
-				<MkInput v-model:value="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><template #icon><Fa :icon="faKey"/></template>Consumer Secret</MkInput>
+				<MkInput v-model:value="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><i class="fas fa-key"></i></template>Consumer Key</MkInput>
+				<MkInput v-model:value="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><template #icon><i class="fas fa-key"></i></template>Consumer Secret</MkInput>
 			</template>
 		</div>
 		<div class="_content">
-			<header><Fa :icon="faGithub"/> GitHub</header>
+			<header><i class="fas fa-github"></i> GitHub</header>
 			<MkSwitch v-model:value="enableGithubIntegration">{{ $ts.enable }}</MkSwitch>
 			<template v-if="enableGithubIntegration">
 				<MkInfo>Callback URL: {{ `${url}/api/gh/cb` }}</MkInfo>
-				<MkInput v-model:value="githubClientId" :disabled="!enableGithubIntegration"><template #icon><Fa :icon="faKey"/></template>Client ID</MkInput>
-				<MkInput v-model:value="githubClientSecret" :disabled="!enableGithubIntegration"><template #icon><Fa :icon="faKey"/></template>Client Secret</MkInput>
+				<MkInput v-model:value="githubClientId" :disabled="!enableGithubIntegration"><template #icon><i class="fas fa-key"></i></template>Client ID</MkInput>
+				<MkInput v-model:value="githubClientSecret" :disabled="!enableGithubIntegration"><template #icon><i class="fas fa-key"></i></template>Client Secret</MkInput>
 			</template>
 		</div>
 		<div class="_content">
-			<header><Fa :icon="faDiscord"/> Discord</header>
+			<header><i class="fas fa-discord"></i> Discord</header>
 			<MkSwitch v-model:value="enableDiscordIntegration">{{ $ts.enable }}</MkSwitch>
 			<template v-if="enableDiscordIntegration">
 				<MkInfo>Callback URL: {{ `${url}/api/dc/cb` }}</MkInfo>
-				<MkInput v-model:value="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><Fa :icon="faKey"/></template>Client ID</MkInput>
-				<MkInput v-model:value="discordClientSecret" :disabled="!enableDiscordIntegration"><template #icon><Fa :icon="faKey"/></template>Client Secret</MkInput>
+				<MkInput v-model:value="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><i class="fas fa-key"></i></template>Client ID</MkInput>
+				<MkInput v-model:value="discordClientSecret" :disabled="!enableDiscordIntegration"><template #icon><i class="fas fa-key"></i></template>Client Secret</MkInput>
 			</template>
 		</div>
 		<div class="_footer">
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 
 	<section class="_card _gap">
-		<div class="_title"><Fa :icon="faArchway" /> Summaly Proxy</div>
+		<div class="_title"><i class="fas fa-archway"></i> Summaly Proxy</div>
 		<div class="_content">
 			<MkInput v-model:value="summalyProxy">URL</MkInput>
-			<MkButton primary @click="save(true)"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+			<MkButton primary @click="save(true)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		</div>
 	</section>
 </div>
@@ -249,9 +249,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faPencilAlt, faShareAlt, faGhost, faCog, faPlus, faCloud, faInfoCircle, faBan, faSave, faServer, faLink, faThumbtack, faUser, faShieldAlt, faKey, faBolt, faArchway } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt, faEnvelope } from '@fortawesome/free-regular-svg-icons';
-import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
@@ -277,7 +274,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.instance,
-				icon: faCog,
+				icon: 'fas fa-cog',
 			},
 			meta: null,
 			url,
@@ -344,7 +341,6 @@ export default defineComponent({
 			smtpUser: '',
 			smtpPass: '',
 			summalyProxy: '',
-			faPencilAlt, faTwitter, faDiscord, faGithub, faShareAlt, faTrashAlt, faGhost, faCog, faPlus, faCloud, faInfoCircle, faBan, faSave, faServer, faLink, faEnvelope, faThumbtack, faUser, faShieldAlt, faKey, faBolt, faArchway
 		}
 	},
 
diff --git a/src/client/pages/instance/user-dialog.vue b/src/client/pages/instance/user-dialog.vue
index a6bab5ecb8..d7d627191e 100644
--- a/src/client/pages/instance/user-dialog.vue
+++ b/src/client/pages/instance/user-dialog.vue
@@ -16,10 +16,10 @@
 				<span class="acct">@{{ acct(user) }}</span>
 			</div>
 			<div class="status">
-				<span class="staff" v-if="user.isAdmin"><Fa :icon="faBookmark"/></span>
-				<span class="staff" v-if="user.isModerator"><Fa :icon="farBookmark"/></span>
-				<span class="punished" v-if="user.isSilenced"><Fa :icon="faMicrophoneSlash"/></span>
-				<span class="punished" v-if="user.isSuspended"><Fa :icon="faSnowflake"/></span>
+				<span class="staff" v-if="user.isAdmin"><i class="fas fa-bookmark"></i></span>
+				<span class="staff" v-if="user.isModerator"><i class="far fa-bookmark"></i></span>
+				<span class="punished" v-if="user.isSilenced"><i class="fas fa-microphone-slash"></i></span>
+				<span class="punished" v-if="user.isSuspended"><i class="fas fa-snowflake"></i></span>
 			</div>
 		</div>
 		<div class="_section">
@@ -31,10 +31,10 @@
 		</div>
 		<div class="_section">
 			<div class="_content">
-				<MkButton full @click="openProfile"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts.profile }}</MkButton>
-				<MkButton full v-if="user.host != null" @click="updateRemoteUser"><Fa :icon="faSync"/> {{ $ts.updateRemoteUser }}</MkButton>
-				<MkButton full @click="resetPassword"><Fa :icon="faKey"/> {{ $ts.resetPassword }}</MkButton>
-				<MkButton full @click="deleteAllFiles" danger><Fa :icon="faTrashAlt"/> {{ $ts.deleteAllFiles }}</MkButton>
+				<MkButton full @click="openProfile"><i class="fas fa-external-link-square-alt"></i> {{ $ts.profile }}</MkButton>
+				<MkButton full v-if="user.host != null" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ $ts.updateRemoteUser }}</MkButton>
+				<MkButton full @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</MkButton>
+				<MkButton full @click="deleteAllFiles" danger><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
 			</div>
 		</div>
 		<div class="_section">
@@ -48,8 +48,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faTimes, faBookmark, faKey, faSync, faMicrophoneSlash, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
@@ -79,7 +77,6 @@ export default defineComponent({
 			moderator: false,
 			silenced: false,
 			suspended: false,
-			faTimes, faBookmark, farBookmark, faKey, faSync, faMicrophoneSlash, faSnowflake, faTrashAlt, faExternalLinkSquareAlt
 		};
 	},
 
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index ea09b1bda0..4db965588c 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -2,22 +2,22 @@
 <div class="mk-instance-users">
 	<div class="_section">
 		<div class="_content">
-			<MkButton inline primary @click="addUser()"><Fa :icon="faPlus"/> {{ $ts.addUser }}</MkButton>
+			<MkButton inline primary @click="addUser()"><i class="fas fa-plus"></i> {{ $ts.addUser }}</MkButton>
 		</div>
 	</div>
 
 	<div class="_section lookup">
-		<div class="_title"><Fa :icon="faSearch"/> {{ $ts.lookup }}</div>
+		<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
 		<div class="_content">
 			<MkInput class="target" v-model:value="target" type="text" @enter="showUser()">
 				<span>{{ $ts.usernameOrUserId }}</span>
 			</MkInput>
-			<MkButton @click="showUser()" primary><Fa :icon="faSearch"/> {{ $ts.lookup }}</MkButton>
+			<MkButton @click="showUser()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
 		</div>
 	</div>
 
 	<div class="_section users">
-		<div class="_title"><Fa :icon="faUsers"/> {{ $ts.users }}</div>
+		<div class="_title"><i class="fas fa-users"></i> {{ $ts.users }}</div>
 		<div class="_content">
 			<div class="inputs" style="display: flex;">
 				<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
@@ -59,10 +59,10 @@
 						<header>
 							<MkUserName class="name" :user="user"/>
 							<span class="acct">@{{ acct(user) }}</span>
-							<span class="staff" v-if="user.isAdmin"><Fa :icon="faBookmark"/></span>
-							<span class="staff" v-if="user.isModerator"><Fa :icon="farBookmark"/></span>
-							<span class="punished" v-if="user.isSilenced"><Fa :icon="faMicrophoneSlash"/></span>
-							<span class="punished" v-if="user.isSuspended"><Fa :icon="faSnowflake"/></span>
+							<span class="staff" v-if="user.isAdmin"><i class="fas fa-bookmark"></i></span>
+							<span class="staff" v-if="user.isModerator"><i class="far fa-bookmark"></i></span>
+							<span class="punished" v-if="user.isSilenced"><i class="fas fa-microphone-slash"></i></span>
+							<span class="punished" v-if="user.isSuspended"><i class="fas fa-snowflake"></i></span>
 						</header>
 						<div>
 							<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
@@ -80,8 +80,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from '@/misc/acct/parse';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -103,9 +101,9 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.users,
-				icon: faUsers,
+				icon: 'fas fa-users',
 				action: {
-					icon: faSearch,
+					icon: 'fas fa-search',
 					handler: this.searchUser
 				}
 			},
@@ -127,7 +125,6 @@ export default defineComponent({
 				}),
 				offsetMode: true
 			},
-			faPlus, faUsers, faSearch, faBookmark, farBookmark, faMicrophoneSlash, faSnowflake
 		}
 	},