[WIP] Use FontAwesome Component for Vue (#3127)

* wip

* Rename

* Clean up

* Clean up

* wip

* wip

* Enable tree shaking

* :v:

* :v:

* wip

* wip

* Clean up

80 files changed, 410 insertions, 373 deletions

diff --git a/src/client/app/desktop/views/components/activity.vue b/src/client/app/desktop/views/components/activity.vue
index e9ed532a3e..941fb59164 100644
--- a/src/client/app/desktop/views/components/activity.vue
+++ b/src/client/app/desktop/views/components/activity.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="mk-activity">
 	<mk-widget-container :show-header="design == 0" :naked="design == 2">
-		<template slot="header">%fa:chart-bar%%i18n:@title%</template>
-		<button slot="func" title="%i18n:@toggle%" @click="toggle">%fa:sort%</button>
+		<template slot="header"><fa icon="chart-bar"/>%i18n:@title%</template>
+		<button slot="func" title="%i18n:@toggle%" @click="toggle"><fa icon="sort"/></button>
 
-		<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
 		<template v-else>
 			<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
 			<x-chart v-show="view == 1" :data="[].concat(activity)"/>
@@ -78,7 +78,7 @@ export default Vue.extend({
 	text-align center
 	color #aaa
 
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index e2f1329b3b..7eb5e5ad12 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="mk-calendar" :data-melt="design == 4 || design == 5">
 	<template v-if="design == 0 || design == 1">
-		<button @click="prev" title="%i18n:@prev%">%fa:chevron-circle-left%</button>
+		<button @click="prev" title="%i18n:@prev%"><fa icon="chevron-circle-left"/></button>
 		<p class="title">{{ '%i18n:@title%'.replace('{1}', year).replace('{2}', month) }}</p>
-		<button @click="next" title="%i18n:@next%">%fa:chevron-circle-right%</button>
+		<button @click="next" title="%i18n:@next%"><fa icon="chevron-circle-right"/></button>
 	</template>
 
 	<div class="calendar">
@@ -151,7 +151,7 @@ export default Vue.extend({
 		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.07)
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> button
diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
index 806f7f5c3f..268ace74db 100644
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -13,7 +13,7 @@
 		@change-selection="onChangeSelection"
 	/>
 	<div :class="$style.footer">
-		<button :class="$style.upload" title="%i18n:@upload%" @click="upload">%fa:upload%</button>
+		<button :class="$style.upload" title="%i18n:@upload%" @click="upload"><fa icon="upload"/></button>
 		<button :class="$style.cancel" @click="cancel">%i18n:@cancel%</button>
 		<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">%i18n:@ok%</button>
 	</div>
@@ -28,7 +28,7 @@ export default Vue.extend({
 			default: false
 		},
 		title: {
-			default: '%fa:R file%%i18n:@choose-prompt%'
+			default: '<fa :icon="['far', 'file']"/>%i18n:@choose-prompt%'
 		}
 	},
 	data() {
@@ -62,7 +62,7 @@ export default Vue.extend({
 
 
 .title
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .count
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
index b970218e58..eeeaffe7e6 100644
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -21,7 +21,7 @@ import Vue from 'vue';
 export default Vue.extend({
 	props: {
 		title: {
-			default: '%fa:R folder%%i18n:@choose-prompt%'
+			default: '<fa :icon="['far', 'folder']"/>%i18n:@choose-prompt%'
 		}
 	},
 	methods: {
@@ -40,7 +40,7 @@ export default Vue.extend({
 
 
 .title
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .browser
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
index 9e4541a752..fae7811ea4 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -3,13 +3,13 @@
 	<li v-for="(item, i) in menu" :class="item ? item.type : item === null ? 'divider' : null">
 		<template v-if="item">
 			<template v-if="item.type == null || item.type == 'item'">
-				<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
+				<p @click="click(item)"><i v-if="item.icon" :class="$style.icon"><fa :icon="item.icon"/></i>{{ item.text }}</p>
 			</template>
 			<template v-else-if="item.type == 'link'">
-				<a :href="item.href" :target="item.target" @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</a>
+				<a :href="item.href" :target="item.target" @click="click(item)"><i v-if="item.icon" :class="$style.icon"><fa :icon="item.icon"/></i>{{ item.text }}</a>
 			</template>
 			<template v-else-if="item.type == 'nest'">
-				<p><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}...<span class="caret">%fa:caret-right%</span></p>
+				<p><i v-if="item.icon" :class="$style.icon"><fa :icon="item.icon"/></i>{{ item.text }}...<span class="caret"><fa icon="caret-right"/></span></p>
 				<me-nu :menu="item.menu" @x="click"/>
 			</template>
 		</template>
@@ -113,9 +113,9 @@ export default Vue.extend({
 
 <style lang="stylus" module>
 .icon
-	> *
-		width 28px
-		margin-left -28px
-		text-align center
+	display inline-block
+	width 28px
+	margin-left -28px
+	text-align center
 </style>
 
diff --git a/src/client/app/desktop/views/components/crop-window.vue b/src/client/app/desktop/views/components/crop-window.vue
index 629c3b013a..8aeb90b539 100644
--- a/src/client/app/desktop/views/components/crop-window.vue
+++ b/src/client/app/desktop/views/components/crop-window.vue
@@ -1,6 +1,6 @@
 <template>
 	<mk-window ref="window" is-modal width="800px" :can-close="false">
-		<span slot="header">%fa:crop%{{ title }}</span>
+		<span slot="header"><fa icon="crop"/>{{ title }}</span>
 		<div class="body">
 			<vue-cropper ref="cropper"
 				:src="image.url"
@@ -64,7 +64,7 @@ export default Vue.extend({
 
 
 .header
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .img
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
index baa6f911fe..2664105bdc 100644
--- a/src/client/app/desktop/views/components/dialog.vue
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -91,8 +91,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 .mk-dialog
 	> .bg
 		display block
diff --git a/src/client/app/desktop/views/components/drive-window.vue b/src/client/app/desktop/views/components/drive-window.vue
index aa3c2b6b36..5f9818969f 100644
--- a/src/client/app/desktop/views/components/drive-window.vue
+++ b/src/client/app/desktop/views/components/drive-window.vue
@@ -2,7 +2,7 @@
 <mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
 	<template slot="header">
 		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:@used%</p>
-		<span :class="$style.title">%fa:cloud%%i18n:common.drive%</span>
+		<span :class="$style.title"><fa icon="cloud"/>%i18n:common.drive%</span>
 	</template>
 	<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
 </mk-window>
@@ -39,7 +39,7 @@ export default Vue.extend({
 
 <style lang="stylus" module>
 .title
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .info
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index d7e24cfe71..90a57b148d 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -71,27 +71,27 @@ export default Vue.extend({
 			contextmenu((this as any).os)(e, [{
 				type: 'item',
 				text: '%i18n:@contextmenu.rename%',
-				icon: '%fa:i-cursor%',
+				icon: 'i-cursor',
 				action: this.rename
 			}, {
 				type: 'item',
 				text: this.file.isSensitive ? '%i18n:@contextmenu.unmark-as-sensitive%' : '%i18n:@contextmenu.mark-as-sensitive%',
-				icon: this.file.isSensitive ? '%fa:R eye%' : '%fa:R eye-slash%',
+				icon: this.file.isSensitive ? ['far', 'eye'] : ['far', 'eye-slash'],
 				action: this.toggleSensitive
 			}, null, {
 				type: 'item',
 				text: '%i18n:@contextmenu.copy-url%',
-				icon: '%fa:link%',
+				icon: 'link',
 				action: this.copyUrl
 			}, {
 				type: 'link',
 				href: `${this.file.url}?download`,
 				text: '%i18n:@contextmenu.download%',
-				icon: '%fa:download%',
+				icon: 'download',
 			}, null, {
 				type: 'item',
 				text: '%i18n:common.delete%',
-				icon: '%fa:R trash-alt%',
+				icon: ['far', 'trash-alt'],
 				action: this.deleteFile
 			}, null, {
 				type: 'nest',
@@ -170,7 +170,7 @@ export default Vue.extend({
 		copyUrl() {
 			copyToClipboard(this.file.url);
 			(this as any).apis.dialog({
-				title: '%fa:check%%i18n:@contextmenu.copied%',
+				title: '<fa icon="check"/>%i18n:@contextmenu.copied%',
 				text: '%i18n:@contextmenu.copied-url-to-clipboard%',
 				actions: [{
 					text: '%i18n:common.ok%'
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index 0bf2b7136d..6862e151d3 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -16,8 +16,8 @@
 	:title="title"
 >
 	<p class="name">
-		<template v-if="hover">%fa:R folder-open .fw%</template>
-		<template v-if="!hover">%fa:R folder .fw%</template>
+		<template v-if="hover"><fa :icon="['far', 'folder-open']" fixed-width/></template>
+		<template v-if="!hover"><fa :icon="['far', 'folder']" fixed-width/></template>
 		{{ folder.name }}
 	</p>
 </div>
@@ -55,22 +55,22 @@ export default Vue.extend({
 			contextmenu((this as any).os)(e, [{
 				type: 'item',
 				text: '%i18n:@contextmenu.move-to-this-folder%',
-				icon: '%fa:arrow-right%',
+				icon: 'arrow-right',
 				action: this.go
 			}, {
 				type: 'item',
 				text: '%i18n:@contextmenu.show-in-new-window%',
-				icon: '%fa:R window-restore%',
+				icon: ['far', 'window-restore'],
 				action: this.newWindow
 			}, null, {
 				type: 'item',
 				text: '%i18n:@contextmenu.rename%',
-				icon: '%fa:i-cursor%',
+				icon: 'i-cursor',
 				action: this.rename
 			}, null, {
 				type: 'item',
 				text: '%i18n:common.delete%',
-				icon: '%fa:R trash-alt%',
+				icon: ['far', 'trash-alt'],
 				action: this.deleteFolder
 			}], {
 					closed: () => {
@@ -155,7 +155,7 @@ export default Vue.extend({
 					switch (err) {
 						case 'detected-circular-definition':
 							(this as any).apis.dialog({
-								title: '%fa:exclamation-triangle%%i18n:@unable-to-process%',
+								title: '<fa icon="exclamation-triangle"/>%i18n:@unable-to-process%',
 								text: '%i18n:@circular-reference-detected%',
 								actions: [{
 									text: '%i18n:common.ok%'
@@ -255,7 +255,7 @@ export default Vue.extend({
 		font-size 0.9em
 		color var(--desktopDriveFolderFg)
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 			margin-left 2px
 			text-align left
diff --git a/src/client/app/desktop/views/components/drive.nav-folder.vue b/src/client/app/desktop/views/components/drive.nav-folder.vue
index 4c20e139aa..b750a6e5e8 100644
--- a/src/client/app/desktop/views/components/drive.nav-folder.vue
+++ b/src/client/app/desktop/views/components/drive.nav-folder.vue
@@ -7,7 +7,7 @@
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<template v-if="folder == null">%fa:cloud%</template>
+	<i v-if="folder == null" class="cloud"><fa icon="cloud"/></i>
 	<span>{{ folder == null ? '%i18n:common.drive%' : folder.name }}</span>
 </div>
 </template>
@@ -110,7 +110,7 @@ export default Vue.extend({
 	&[data-draghover]
 		background #eee
 
-	[data-fa].cloud
+	i.cloud
 		margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index 4d83a49ce3..20861f72bf 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -4,10 +4,10 @@
 		<div class="path" @contextmenu.prevent.stop="() => {}">
 			<x-nav-folder :class="{ current: folder == null }"/>
 			<template v-for="folder in hierarchyFolders">
-				<span class="separator">%fa:angle-right%</span>
+				<span class="separator"><fa icon="angle-right"/></span>
 				<x-nav-folder :folder="folder" :key="folder.id"/>
 			</template>
-			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
+			<span class="separator" v-if="folder != null"><fa icon="angle-right"/></span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 		<!--
@@ -138,17 +138,17 @@ export default Vue.extend({
 			contextmenu((this as any).os)(e, [{
 				type: 'item',
 				text: '%i18n:@contextmenu.create-folder%',
-				icon: '%fa:R folder%',
+				icon: ['far', 'folder'],
 				action: this.createFolder
 			}, {
 				type: 'item',
 				text: '%i18n:@contextmenu.upload%',
-				icon: '%fa:upload%',
+				icon: 'upload',
 				action: this.selectLocalFile
 			}, {
 				type: 'item',
 				text: '%i18n:@contextmenu.url-upload%',
-				icon: '%fa:cloud-upload-alt%',
+				icon: 'cloud-upload-alt',
 				action: this.urlUpload
 			}]);
 		},
@@ -313,7 +313,7 @@ export default Vue.extend({
 					switch (err) {
 						case 'detected-circular-definition':
 							(this as any).apis.dialog({
-								title: '%fa:exclamation-triangle%%i18n:@unable-to-process%',
+								title: '<fa icon="exclamation-triangle"/>%i18n:@unable-to-process%',
 								text: '%i18n:@circular-reference-detected%',
 								actions: [{
 									text: '%i18n:common.ok%'
@@ -343,7 +343,7 @@ export default Vue.extend({
 				});
 
 				(this as any).apis.dialog({
-					title: '%fa:check%%i18n:@url-upload-requested%',
+					title: '<fa icon="check"/>%i18n:@url-upload-requested%',
 					text: '%i18n:@may-take-time%',
 					actions: [{
 						text: '%i18n:common.ok%'
@@ -613,9 +613,6 @@ export default Vue.extend({
 				line-height 38px
 				cursor pointer
 
-				i
-					margin-right 4px
-
 				*
 					pointer-events none
 
@@ -635,7 +632,7 @@ export default Vue.extend({
 					opacity 0.5
 					cursor default
 
-					> [data-fa]
+					> [data-icon]
 						margin 0
 
 		> .search
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 11291a2f19..7adda36501 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -5,13 +5,13 @@
 	:disabled="wait"
 >
 	<template v-if="!wait">
-		<template v-if="u.hasPendingFollowRequestFromYou && u.isLocked">%fa:hourglass-half%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
-		<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked">%fa:hourglass-start%<template v-if="size == 'big'"> %i18n:@follow-processing%</template></template>
-		<template v-else-if="u.isFollowing">%fa:minus%<template v-if="size == 'big'"> %i18n:@following%</template></template>
-		<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow-request%</template></template>
-		<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow%</template></template>
+		<template v-if="u.hasPendingFollowRequestFromYou && u.isLocked"><fa icon="hourglass-half"/><template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
+		<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked"><fa icon="hourglass-start"/><template v-if="size == 'big'"> %i18n:@follow-processing%</template></template>
+		<template v-else-if="u.isFollowing"><fa icon="minus"/><template v-if="size == 'big'"> %i18n:@following%</template></template>
+		<template v-else-if="!u.isFollowing && u.isLocked"><fa icon="plus"/><template v-if="size == 'big'"> %i18n:@follow-request%</template></template>
+		<template v-else-if="!u.isFollowing && !u.isLocked"><fa icon="plus"/><template v-if="size == 'big'"> %i18n:@follow%</template></template>
 	</template>
-	<template v-else>%fa:spinner .pulse .fw%</template>
+	<template v-else><fa icon="spinner .pulse" fixed-width/></template>
 </button>
 </template>
 
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index d64890fdbc..8b4344ad60 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -11,9 +11,9 @@
 		</div>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">%i18n:@empty%</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@fetching%<mk-ellipsis/></p>
+	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@fetching%<mk-ellipsis/></p>
 	<a class="refresh" @click="refresh">%i18n:@refresh%</a>
-	<button class="close" @click="destroyDom()" title="%i18n:@close%">%fa:times%</button>
+	<button class="close" @click="destroyDom()" title="%i18n:@close%"><fa icon="times"/></button>
 </div>
 </template>
 
@@ -124,7 +124,7 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> .refresh
@@ -155,7 +155,7 @@ export default Vue.extend({
 		&:active
 			color #222
 
-		> [data-fa]
+		> [data-icon]
 			padding 14px
 
 </style>
diff --git a/src/client/app/desktop/views/components/game-window.vue b/src/client/app/desktop/views/components/game-window.vue
index 594eae58f8..10e974d42a 100644
--- a/src/client/app/desktop/views/components/game-window.vue
+++ b/src/client/app/desktop/views/components/game-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
-	<span slot="header" :class="$style.header">%fa:gamepad%%i18n:@game%</span>
+	<span slot="header" :class="$style.header"><fa icon="gamepad"/>%i18n:@game%</span>
 	<mk-reversi :class="$style.content" @gamed="g => game = g"/>
 </mk-window>
 </template>
@@ -27,7 +27,7 @@ export default Vue.extend({
 
 <style lang="stylus" module>
 .header
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .content
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 42e936edd1..b3bebd2623 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-home" :data-customize="customize">
 	<div class="customize" v-if="customize">
-		<router-link to="/">%fa:check%%i18n:@done%</router-link>
+		<router-link to="/"><fa icon="check"/>%i18n:@done%</router-link>
 		<div>
 			<div class="adder">
 				<p>%i18n:@add-widget%</p>
@@ -185,7 +185,7 @@ export default Vue.extend({
 	methods: {
 		hint() {
 			(this as any).apis.dialog({
-				title: '%fa:info-circle%%i18n:common.customization-tips.title%',
+				title: '<fa icon="info-circle"/>%i18n:common.customization-tips.title%',
 				text: '<p>%i18n:common.customization-tips.paragraph1%</p>' +
 					'<p>%i18n:common.customization-tips.paragraph2%</p>' +
 					'<p>%i18n:common.customization-tips.paragraph3%</p>' +
@@ -299,7 +299,7 @@ export default Vue.extend({
 				background var(--primaryDarken10)
 				transition background 0s ease
 
-			> [data-fa]
+			> [data-icon]
 				margin-right 8px
 
 		> div
diff --git a/src/client/app/desktop/views/components/input-dialog.vue b/src/client/app/desktop/views/components/input-dialog.vue
index 976e897fe8..60f672c93d 100644
--- a/src/client/app/desktop/views/components/input-dialog.vue
+++ b/src/client/app/desktop/views/components/input-dialog.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="destroyDom">
 	<span slot="header" :class="$style.header">
-		%fa:i-cursor%{{ title }}
+		<fa icon="i-cursor"/>{{ title }}
 	</span>
 
 	<div :class="$style.body">
@@ -76,10 +76,8 @@ export default Vue.extend({
 
 
 <style lang="stylus" module>
-
-
 .header
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .body
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index f9ab188ca5..9e1a293336 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="image.isSensitive && hide && !$store.state.device.alwaysShowNsfw" @click="hide = false">
 	<div>
-		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<b><fa icon="exclamation-triangle"/> %i18n:@sensitive%</b>
 		<span>%i18n:@click-to-show%</span>
 	</div>
 </div>
diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 7859a59254..9565621487 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="uofhebxjdgksfmltszlxurtjnjjsvioh" v-if="video.isSensitive && hide" @click="hide = false">
 	<div>
-		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<b><fa icon="exclamation-triangle"/> %i18n:@sensitive%</b>
 		<span>%i18n:@click-to-show%</span>
 	</div>
 </div>
@@ -12,7 +12,7 @@
 		@click.prevent="onClick"
 		:title="video.name"
 	>
-		%fa:R play-circle%
+		<fa :icon="['far', 'play-circle']"/>
 	</a>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index 3706377607..7d7adc89d4 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
-	<span slot="header" :class="$style.header">%fa:comments%%i18n:@title% {{ user | userName }}</span>
+	<span slot="header" :class="$style.header"><fa icon="comments"/>%i18n:@title% {{ user | userName }}</span>
 	<mk-messaging-room :user="user" :class="$style.content"/>
 </mk-window>
 </template>
@@ -22,7 +22,7 @@ export default Vue.extend({
 
 <style lang="stylus" module>
 .header
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .content
diff --git a/src/client/app/desktop/views/components/messaging-window.vue b/src/client/app/desktop/views/components/messaging-window.vue
index a8f0fc68b9..3ec07f2bcc 100644
--- a/src/client/app/desktop/views/components/messaging-window.vue
+++ b/src/client/app/desktop/views/components/messaging-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
-	<span slot="header" :class="$style.header">%fa:comments%%i18n:@title%</span>
+	<span slot="header" :class="$style.header"><fa icon="comments"/>%i18n:@title%</span>
 	<mk-messaging :class="$style.content" @navigate="navigate"/>
 </mk-window>
 </template>
@@ -22,7 +22,7 @@ export default Vue.extend({
 
 <style lang="stylus" module>
 .header
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 .content
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 1c802d790c..8238c4824c 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -7,8 +7,8 @@
 		@click="fetchConversation"
 		:disabled="conversationFetching"
 	>
-		<template v-if="!conversationFetching">%fa:ellipsis-v%</template>
-		<template v-if="conversationFetching">%fa:spinner .pulse%</template>
+		<template v-if="!conversationFetching"><fa icon="ellipsis-v"/></template>
+		<template v-if="conversationFetching"><fa icon="spinner .pulse"/></template>
 	</button>
 	<div class="conversation">
 		<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
@@ -19,7 +19,7 @@
 	<div class="renote" v-if="isRenote">
 		<p>
 			<mk-avatar class="avatar" :user="note.user"/>
-			%fa:retweet%
+			<fa icon="retweet"/>
 			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
 			<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span>
 			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
@@ -52,7 +52,7 @@
 				</div>
 				<mk-poll v-if="p.poll" :note="p"/>
 				<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
-				<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
+				<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> %i18n:@location%</a>
 				<div class="map" v-if="p.geo" ref="map"></div>
 				<div class="renote" v-if="p.renote">
 					<mk-note-preview :note="p.renote"/>
@@ -62,18 +62,18 @@
 		<footer>
 			<mk-reactions-viewer :note="p"/>
 			<button class="replyButton" @click="reply" title="">
-				<template v-if="p.reply">%fa:reply-all%</template>
-				<template v-else>%fa:reply%</template>
+				<template v-if="p.reply"><fa icon="reply-all"/></template>
+				<template v-else><fa icon="reply"/></template>
 				<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 			</button>
 			<button class="renoteButton" @click="renote" title="%i18n:@renote%">
-				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+				<fa icon="retweet"/><p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 			</button>
 			<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
-				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+				<fa icon="plus"/><p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 			</button>
 			<button @click="menu" ref="menuButton">
-				%fa:ellipsis-h%
+				<fa icon="ellipsis-h"/>
 			</button>
 		</footer>
 	</article>
@@ -278,7 +278,7 @@ export default Vue.extend({
 				margin 0 8px 0 0
 				border-radius 6px
 
-			[data-fa]
+			[data-icon]
 				margin-right 4px
 
 			.name
diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index dd6cba9ce2..0ccf59bc81 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/src/client/app/desktop/views/components/note.vue
@@ -15,7 +15,7 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<mk-avatar class="avatar" :user="note.user"/>
-		%fa:retweet%
+		<fa icon="retweet"/>
 		<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span>
 		<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
 		<span>{{ '%i18n:@reposted-by%'.substr('%i18n:@reposted-by%'.indexOf('}') + 1) }}</span>
@@ -33,7 +33,7 @@
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">%i18n:@private%</span>
-						<a class="reply" v-if="appearNote.reply">%fa:reply%</a>
+						<a class="reply" v-if="appearNote.reply"><fa icon="reply"/></a>
 						<misskey-flavored-markdown v-if="appearNote.text" :text="appearNote.text" :i="$store.state.i" :class="$style.text" :customEmojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote">RN:</a>
 					</div>
@@ -41,7 +41,7 @@
 						<mk-media-list :media-list="appearNote.files"/>
 					</div>
 					<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
-					<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+					<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> 位置情報</a>
 					<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
 					<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini"/>
 				</div>
@@ -49,18 +49,18 @@
 			<footer>
 				<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
 				<button class="replyButton" @click="reply()" title="%i18n:@reply%">
-					<template v-if="appearNote.reply">%fa:reply-all%</template>
-					<template v-else>%fa:reply%</template>
+					<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
+					<template v-else><fa icon="reply"/></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
 				<button class="renoteButton" @click="renote()" title="%i18n:@renote%">
-					%fa:retweet%<p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+					<fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button class="reactionButton" :class="{ reacted: appearNote.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
-					%fa:plus%<p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
+					<fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
 				</button>
 				<button @click="menu()" ref="menuButton">
-					%fa:ellipsis-h%
+					<fa icon="ellipsis-h"/>
 				</button>
 			</footer>
 		</div>
@@ -190,7 +190,7 @@ export default Vue.extend({
 			margin 0 8px 0 0
 			border-radius 6px
 
-		[data-fa]
+		[data-icon]
 			margin-right 4px
 
 		> span
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 37ce2c9dd7..7808ed7427 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -17,8 +17,8 @@
 		<template v-for="(note, i) in _notes">
 			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
-				<span>%fa:angle-up%{{ note._datetext }}</span>
-				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+				<span><fa icon="angle-up"/>{{ note._datetext }}</span>
+				<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
 	</component>
@@ -26,7 +26,7 @@
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">%i18n:@load-more%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+			<template v-if="moreFetching"><fa icon="spinner .pulse" fixed-width/></template>
 		</button>
 	</footer>
 </div>
@@ -230,7 +230,7 @@ export default Vue.extend({
 			span
 				margin 0 16px
 
-			[data-fa]
+			[data-icon]
 				margin-right 8px
 
 	> .newer-indicator
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index e1a6c4c9ad..09dbb899b6 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -21,7 +21,7 @@
 								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
 							</p>
 							<router-link class="note-ref" :to="notification.note | notePage">
-								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+								<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 							</router-link>
 						</div>
 					</template>
@@ -29,11 +29,11 @@
 					<template v-if="notification.type == 'renote'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
-							<p>%fa:retweet%
+							<p><fa icon="retweet"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
 							<router-link class="note-ref" :to="notification.note | notePage">
-								%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+								<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
 							</router-link>
 						</div>
 					</template>
@@ -41,7 +41,7 @@
 					<template v-if="notification.type == 'quote'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
-							<p>%fa:quote-left%
+							<p><fa icon="quote-left"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
 							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
@@ -51,7 +51,7 @@
 					<template v-if="notification.type == 'follow'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
-							<p>%fa:user-plus%
+							<p><fa icon="user-plus"/>
 								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
 							</p>
 						</div>
@@ -60,7 +60,7 @@
 					<template v-if="notification.type == 'receiveFollowRequest'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
-							<p>%fa:user-clock%
+							<p><fa icon="user-clock"/>
 								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
 							</p>
 						</div>
@@ -69,7 +69,7 @@
 					<template v-if="notification.type == 'reply'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
-							<p>%fa:reply%
+							<p><fa icon="reply"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
 							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
@@ -79,7 +79,7 @@
 					<template v-if="notification.type == 'mention'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
-							<p>%fa:at%
+							<p><fa icon="at"/>
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 							</p>
 							<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
@@ -89,23 +89,23 @@
 					<template v-if="notification.type == 'poll_vote'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
-							<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
+							<p><fa icon="chart-pie"/><a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
 							<router-link class="note-ref" :to="notification.note | notePage">
-								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+								<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 							</router-link>
 						</div>
 					</template>
 				</div>
 
 				<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
-					<span>%fa:angle-up%{{ notification._datetext }}</span>
-					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+					<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
+					<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
 				</p>
 			</template>
 		</component>
 	</div>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
-		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
+		<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
 	</button>
 	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
 </div>
@@ -264,7 +264,7 @@ export default Vue.extend({
 				.note-ref
 					color var(--noteText)
 
-					[data-fa]
+					[data-icon]
 						font-size 1em
 						font-weight normal
 						font-style normal
@@ -300,7 +300,7 @@ export default Vue.extend({
 				span
 					margin 0 16px
 
-				[data-fa]
+				[data-icon]
 					margin-right 8px
 
 	> .more
@@ -319,7 +319,7 @@ export default Vue.extend({
 		&.fetching
 			cursor wait
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> .empty
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index a5d191f2f3..347304539f 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation">
 	<span slot="header" class="mk-post-form-window--header">
-		<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
+		<span class="icon" v-if="geo"><fa icon="map-marker-alt"/></span>
 		<span v-if="!reply">%i18n:@note%</span>
 		<span v-if="reply">%i18n:@reply%</span>
 		<span class="count" v-if="files.length != 0">{{ '%i18n:@attaches%'.replace('{}', files.length) }}</span>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index a703382f38..e6d3fd6937 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -32,18 +32,18 @@
 		<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="saveDraft()"/>
 	</div>
 	<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
-	<button class="upload" title="%i18n:@attach-media-from-local%" @click="chooseFile">%fa:upload%</button>
-	<button class="drive" title="%i18n:@attach-media-from-drive%" @click="chooseFileFromDrive">%fa:cloud%</button>
-	<button class="kao" title="%i18n:@insert-a-kao%" @click="kao">%fa:R smile%</button>
-	<button class="poll" title="%i18n:@create-poll%" @click="poll = !poll">%fa:chart-pie%</button>
-	<button class="poll" title="%i18n:@hide-contents%" @click="useCw = !useCw">%fa:eye-slash%</button>
-	<button class="geo" title="%i18n:@attach-location-information%" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
+	<button class="upload" title="%i18n:@attach-media-from-local%" @click="chooseFile"><fa icon="upload"/></button>
+	<button class="drive" title="%i18n:@attach-media-from-drive%" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
+	<button class="kao" title="%i18n:@insert-a-kao%" @click="kao"><fa :icon="['far', 'smile']"/></button>
+	<button class="poll" title="%i18n:@create-poll%" @click="poll = !poll"><fa icon="chart-pie"/></button>
+	<button class="poll" title="%i18n:@hide-contents%" @click="useCw = !useCw"><fa icon="eye-slash"/></button>
+	<button class="geo" title="%i18n:@attach-location-information%" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
 	<button class="visibility" title="%i18n:@visibility%" @click="setVisibility" ref="visibilityButton">
-		<span v-if="visibility === 'public'">%fa:globe%</span>
-		<span v-if="visibility === 'home'">%fa:home%</span>
-		<span v-if="visibility === 'followers'">%fa:unlock%</span>
-		<span v-if="visibility === 'specified'">%fa:envelope%</span>
-		<span v-if="visibility === 'private'">%fa:lock%</span>
+		<span v-if="visibility === 'public'"><fa icon="globe"/></span>
+		<span v-if="visibility === 'home'"><fa icon="home"/></span>
+		<span v-if="visibility === 'followers'"><fa icon="unlock"/></span>
+		<span v-if="visibility === 'specified'"><fa icon="envelope"/></span>
+		<span v-if="visibility === 'private'"><fa icon="lock"/></span>
 	</button>
 	<p class="text-count" :class="{ over: this.trimmedLength(text) > this.maxNoteTextLength }">{{ this.maxNoteTextLength - this.trimmedLength(text) }}</p>
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
index 3df1329c48..5ebe0cc35a 100644
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
-	<span slot="header">%fa:envelope R% %i18n:@title%</span>
+	<span slot="header"><fa :icon="['far', 'envelope']"/> %i18n:@title%</span>
 
 	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
 		<div v-for="req in requests">
diff --git a/src/client/app/desktop/views/components/renote-form-window.vue b/src/client/app/desktop/views/components/renote-form-window.vue
index b9760fcbe9..933f10475e 100644
--- a/src/client/app/desktop/views/components/renote-form-window.vue
+++ b/src/client/app/desktop/views/components/renote-form-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal @closed="onWindowClosed" :animation="animation">
-	<span slot="header" :class="$style.header">%fa:retweet%%i18n:@title%</span>
+	<span slot="header" :class="$style.header"><fa icon="retweet"/>%i18n:@title%</span>
 	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
 </mk-window>
 </template>
@@ -58,7 +58,7 @@ export default Vue.extend({
 
 <style lang="stylus" module>
 .header
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/components/settings-window.vue b/src/client/app/desktop/views/components/settings-window.vue
index 4247717748..b69c40e0e0 100644
--- a/src/client/app/desktop/views/components/settings-window.vue
+++ b/src/client/app/desktop/views/components/settings-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
-	<span slot="header" :class="$style.header">%fa:cog%%i18n:@settings%</span>
+	<span slot="header" :class="$style.header"><fa icon="cog"/>%i18n:@settings%</span>
 	<mk-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
 </template>
@@ -24,7 +24,7 @@ export default Vue.extend({
 
 <style lang="stylus" module>
 .header
-	> [data-fa]
+	> [data-icon]
 		margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/components/settings.2fa.vue b/src/client/app/desktop/views/components/settings.2fa.vue
index 001830712f..3d349947e3 100644
--- a/src/client/app/desktop/views/components/settings.2fa.vue
+++ b/src/client/app/desktop/views/components/settings.2fa.vue
@@ -16,7 +16,7 @@
 				<ui-button primary @click="submit">%i18n:@submit%</ui-button>
 			</li>
 		</ol>
-		<div class="ui info"><p>%fa:info-circle%%i18n:@info%</p></div>
+		<div class="ui info"><p><fa icon="info-circle"/>%i18n:@info%</p></div>
 	</div>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/components/settings.signins.vue b/src/client/app/desktop/views/components/settings.signins.vue
index 7d1bb4f4e7..1bc3bd0ade 100644
--- a/src/client/app/desktop/views/components/settings.signins.vue
+++ b/src/client/app/desktop/views/components/settings.signins.vue
@@ -3,13 +3,13 @@
 <div class="signins" v-if="signins.length != 0">
 	<div v-for="signin in signins">
 		<header @click="signin._show = !signin._show">
-			<template v-if="signin.success">%fa:check%</template>
-			<template v-else>%fa:times%</template>
+			<template v-if="signin.success"><fa icon="check"/></template>
+			<template v-else><fa icon="times"/></template>
 			<span class="ip">{{ signin.ip }}</span>
 			<mk-time :time="signin.createdAt"/>
 		</header>
 		<div class="headers" v-show="signin._show">
-			<tree-view :data="signin.headers"/>
+			<!-- TODO -->
 		</div>
 	</div>
 </div>
@@ -62,7 +62,7 @@ export default Vue.extend({
 				line-height 32px
 				cursor pointer
 
-				> [data-fa]
+				> [data-icon]
 					margin-right 8px
 					text-align left
 
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 97743b0bf8..6aa047d015 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -1,31 +1,31 @@
 <template>
 <div class="mk-settings">
 	<div class="nav">
-		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'">%fa:user .fw%%i18n:@profile%</p>
-		<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'">%fa:palette .fw%%i18n:@theme%</p>
-		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
-		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
-		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:common.drive%</p>
-		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
-		<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'">%fa:ban .fw%%i18n:@mute-and-block%</p>
-		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
-		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:@security%</p>
-		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
-		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'">%fa:cogs .fw%%i18n:@other%</p>
+		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>%i18n:@profile%</p>
+		<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'"><fa icon="palette" fixed-width/>%i18n:@theme%</p>
+		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'"><fa icon="desktop" fixed-width/>Web</p>
+		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'"><fa :icon="['far', 'bell']" fixed-width/>%i18n:@notification%</p>
+		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'"><fa icon="cloud" fixed-width/>%i18n:common.drive%</p>
+		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'"><fa icon="hashtag" fixed-width/>%i18n:@tags%</p>
+		<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'"><fa icon="ban" fixed-width/>%i18n:@mute-and-block%</p>
+		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'"><fa icon="puzzle-piece" fixed-width/>%i18n:@apps%</p>
+		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'"><fa icon="unlock-alt" fixed-width/>%i18n:@security%</p>
+		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'"><fa icon="key" fixed-width/>API</p>
+		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'"><fa icon="cogs" fixed-width/>%i18n:@other%</p>
 	</div>
 	<div class="pages">
 		<div class="profile" v-show="page == 'profile'">
 			<mk-profile-editor/>
 
 			<ui-card>
-				<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
+				<div slot="title"><fa :icon="['fab', 'twitter']"/> %i18n:@twitter%</div>
 				<section>
 					<mk-twitter-setting/>
 				</section>
 			</ui-card>
 
 			<ui-card>
-				<div slot="title">%fa:B github% %i18n:@github%</div>
+				<div slot="title"><fa :icon="['fab', 'github']"/> %i18n:@github%</div>
 				<section>
 					<mk-github-setting/>
 				</section>
@@ -33,7 +33,7 @@
 		</div>
 
 		<ui-card class="theme" v-show="page == 'theme'">
-			<div slot="title">%fa:palette% %i18n:@theme%</div>
+			<div slot="title"><fa icon="palette"/> %i18n:@theme%</div>
 
 			<section>
 				<mk-theme/>
@@ -41,7 +41,7 @@
 		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title">%fa:sliders-h% %i18n:@behaviour%</div>
+			<div slot="title"><fa icon="sliders-h"/> %i18n:@behaviour%</div>
 
 			<section>
 				<ui-switch v-model="fetchOnScroll">
@@ -87,7 +87,7 @@
 		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title">%fa:desktop% %i18n:@display%</div>
+			<div slot="title"><fa icon="desktop"/> %i18n:@display%</div>
 
 			<section>
 				<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
@@ -138,7 +138,7 @@
 		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title">%fa:volume-up% %i18n:@sound%</div>
+			<div slot="title"><fa icon="volume-up"/> %i18n:@sound%</div>
 
 			<section>
 				<ui-switch v-model="enableSounds">
@@ -152,12 +152,12 @@
 					max="1"
 					step="0.1"
 				/>
-				<ui-button @click="soundTest">%fa:volume-up% %i18n:@test%</ui-button>
+				<ui-button @click="soundTest"><fa icon="volume-up"/> %i18n:@test%</ui-button>
 			</section>
 		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title">%fa:language% %i18n:@language%</div>
+			<div slot="title"><fa icon="language"/> %i18n:@language%</div>
 			<section class="fit-top">
 				<ui-select v-model="lang" placeholder="%i18n:@pick-language%">
 					<optgroup label="%i18n:@recommended%">
@@ -169,23 +169,23 @@
 					</optgroup>
 				</ui-select>
 				<div class="none ui info">
-					<p>%fa:info-circle%%i18n:@language-desc%</p>
+					<p><fa icon="info-circle"/>%i18n:@language-desc%</p>
 				</div>
 			</section>
 		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title">%fa:trash-alt R% %i18n:@cache%</div>
+			<div slot="title"><fa :icon="['far', 'trash-alt']"/> %i18n:@cache%</div>
 			<section>
 				<ui-button @click="clean">%i18n:@clean-cache%</ui-button>
 				<div class="none ui info warn">
-					<p>%fa:exclamation-triangle%%i18n:@cache-warn%</p>
+					<p><fa icon="exclamation-triangle"/>%i18n:@cache-warn%</p>
 				</div>
 			</section>
 		</ui-card>
 
 		<ui-card class="notification" v-show="page == 'notification'">
-			<div slot="title">%fa:bell R% %i18n:@notification%</div>
+			<div slot="title"><fa :icon="['far', 'bell']"/> %i18n:@notification%</div>
 			<section>
 				<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
 					%i18n:@auto-watch%
@@ -202,7 +202,7 @@
 		</div>
 
 		<ui-card class="hashtags" v-show="page == 'hashtags'">
-			<div slot="title">%fa:hashtag% %i18n:@tags%</div>
+			<div slot="title"><fa icon="hashtag"/> %i18n:@tags%</div>
 			<section>
 				<x-tags/>
 			</section>
@@ -213,28 +213,28 @@
 		</div>
 
 		<ui-card class="apps" v-show="page == 'apps'">
-			<div slot="title">%fa:puzzle-piece% %i18n:@apps%</div>
+			<div slot="title"><fa icon="puzzle-piece"/> %i18n:@apps%</div>
 			<section>
 				<x-apps/>
 			</section>
 		</ui-card>
 
 		<ui-card class="password" v-show="page == 'security'">
-			<div slot="title">%fa:unlock-alt% %i18n:@password%</div>
+			<div slot="title"><fa icon="unlock-alt"/> %i18n:@password%</div>
 			<section>
 				<mk-password-settings/>
 			</section>
 		</ui-card>
 
 		<ui-card class="2fa" v-show="page == 'security'">
-			<div slot="title">%fa:mobile-alt% %i18n:@2fa%</div>
+			<div slot="title"><fa icon="mobile-alt"/> %i18n:@2fa%</div>
 			<section>
 				<x-2fa/>
 			</section>
 		</ui-card>
 
 		<ui-card class="signin" v-show="page == 'security'">
-			<div slot="title">%fa:sign-in-alt% %i18n:@signin%</div>
+			<div slot="title"><fa icon="sign-in-alt"/> %i18n:@signin%</div>
 			<section>
 				<x-signins/>
 			</section>
@@ -245,14 +245,14 @@
 		</div>
 
 		<ui-card class="other" v-show="page == 'other'">
-			<div slot="title">%fa:info-circle% %i18n:@about%</div>
+			<div slot="title"><fa icon="info-circle"/> %i18n:@about%</div>
 			<section>
 				<p v-if="meta">%i18n:@operator%: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
 			</section>
 		</ui-card>
 
 		<ui-card class="other" v-show="page == 'other'">
-			<div slot="title">%fa:sync-alt% %i18n:@update%</div>
+			<div slot="title"><fa icon="sync-alt"/> %i18n:@update%</div>
 			<section>
 				<p>
 					<span>%i18n:@version% <i>{{ version }}</i></span>
@@ -276,7 +276,7 @@
 		</ui-card>
 
 		<ui-card class="other" v-show="page == 'other'">
-			<div slot="title">%fa:cogs% %i18n:@advanced-settings%</div>
+			<div slot="title"><fa icon="cogs"/> %i18n:@advanced-settings%</div>
 			<section>
 				<ui-switch v-model="debug">
 					%i18n:@debug-mode%
@@ -595,7 +595,7 @@ export default Vue.extend({
 			user-select none
 			transition margin-left 0.2s ease
 
-			> [data-fa]
+			> [data-icon]
 				margin-right 4px
 
 			&:hover
diff --git a/src/client/app/desktop/views/components/sub-note-content.vue b/src/client/app/desktop/views/components/sub-note-content.vue
index b5e4e008dc..c17b5ccead 100644
--- a/src/client/app/desktop/views/components/sub-note-content.vue
+++ b/src/client/app/desktop/views/components/sub-note-content.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
-		<a class="reply" v-if="note.replyId">%fa:reply%</a>
+		<a class="reply" v-if="note.replyId"><fa icon="reply"/></a>
 		<misskey-flavored-markdown v-if="note.text" :text="note.text" :i="$store.state.i" :customEmojis="note.emojis"/>
 		<a class="rp" v-if="note.renoteId" :href="`/notes/${note.renoteId}`">RN: ...</a>
 	</div>
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index f1af7116b2..91b3cd5f2e 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -4,7 +4,7 @@
 
 	<mk-notes ref="timeline" :more="existMore ? more : null">
 		<p :class="$style.empty" slot="empty">
-			%fa:R comments%%i18n:@empty%
+			<fa :icon="['far', 'comments']"/>%i18n:@empty%
 		</p>
 	</mk-notes>
 </div>
@@ -182,7 +182,7 @@ export default Vue.extend({
 	text-align center
 	color #999
 
-	> [data-fa]
+	> [data-icon]
 		display block
 		margin-bottom 16px
 		font-size 3em
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 3e4c45d228..336033b601 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -1,17 +1,17 @@
 <template>
 <div class="mk-timeline">
 	<header>
-		<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span>
-		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
-		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
-		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
-		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span>
-		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
+		<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> %i18n:@home%</span>
+		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> %i18n:@local%</span>
+		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> %i18n:@hybrid%</span>
+		<span :data-active="src == 'global'" @click="src = 'global'"><fa icon="globe"/> %i18n:@global%</span>
+		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
+		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
 		<div class="buttons">
-			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></button>
-			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></button>
-			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button>
-			<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button>
+			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
+			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
+			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton"><fa icon="hashtag"/></button>
+			<button @click="chooseList" title="%i18n:@list%" ref="listButton"><fa icon="list"/></button>
 		</div>
 	</header>
 	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
@@ -104,7 +104,7 @@ export default Vue.extend({
 			const lists = await (this as any).api('users/lists/list');
 
 			let menu = [{
-				icon: '%fa:plus%',
+				icon: 'plus',
 				text: '%i18n:@add-list%',
 				action: () => {
 					(this as any).apis.input({
@@ -125,7 +125,7 @@ export default Vue.extend({
 			}
 
 			menu = menu.concat(lists.map(list => ({
-				icon: '%fa:list%',
+				icon: 'list',
 				text: list.title,
 				action: () => {
 					this.list = list;
@@ -142,7 +142,7 @@ export default Vue.extend({
 
 		chooseTag() {
 			let menu = [{
-				icon: '%fa:plus%',
+				icon: 'plus',
 				text: '%i18n:@add-tag-timeline%',
 				action: () => {
 					(this as any).os.new(MkSettingsWindow, {
@@ -156,7 +156,7 @@ export default Vue.extend({
 			}
 
 			menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({
-				icon: '%fa:hashtag%',
+				icon: 'hashtag',
 				text: t.title,
 				action: () => {
 					this.tagTl = t;
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index fd5e8338d7..31118b014e 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -1,47 +1,86 @@
 <template>
 <div class="account" v-hotkey.global="keymap">
 	<button class="header" :data-active="isOpen" @click="toggle">
-		<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
+		<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen"><fa icon="angle-down"/></template><template v-if="isOpen"><fa icon="angle-up"/></template></span>
 		<mk-avatar class="avatar" :user="$store.state.i"/>
 	</button>
 	<transition name="zoom-in-top">
 		<div class="menu" v-if="isOpen">
 			<ul>
 				<li>
-					<router-link :to="`/@${ $store.state.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
+					<router-link :to="`/@${ $store.state.i.username }`">
+						<i><fa icon="user"/></i>
+						<span>%i18n:@profile%</span>
+						<i><fa icon="angle-right"/></i>
+					</router-link>
 				</li>
 				<li @click="drive">
-					<p>%fa:cloud%<span>%i18n:common.drive%</span>%fa:angle-right%</p>
+					<p>
+						<i><fa icon="cloud"/></i>
+						<span>%i18n:common.drive%</span>
+						<i><fa icon="angle-right"/></i>
+					</p>
 				</li>
 				<li>
-					<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
+					<router-link to="/i/favorites">
+						<i><fa icon="star"/></i>
+						<span>%i18n:@favorites%</span>
+						<i><fa icon="angle-right"/></i>
+					</router-link>
 				</li>
 				<li @click="list">
-					<p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
+					<p>
+						<i><fa icon="list"/></i>
+						<span>%i18n:@lists%</span>
+						<i><fa icon="angle-right"/></i>
+					</p>
 				</li>
 				<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
-					<p>%fa:envelope R%<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>%fa:angle-right%</p>
+					<p>
+						<i><fa :icon="['far', 'envelope']"/></i>
+						<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>
+						<i><fa icon="angle-right"/></i>
+					</p>
 				</li>
 			</ul>
 			<ul>
 				<li>
-					<router-link to="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</router-link>
+					<router-link to="/i/customize-home">
+						<i><fa icon="wrench"/></i>
+						<span>%i18n:@customize%</span>
+						<i><fa icon="angle-right"/></i>
+					</router-link>
 				</li>
 				<li @click="settings">
-					<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
+					<p>
+						<i><fa icon="cog"/></i>
+						<span>%i18n:@settings%</span>
+						<i><fa icon="angle-right"/></i>
+					</p>
 				</li>
 				<li v-if="$store.state.i.isAdmin">
-					<a href="/admin">%fa:terminal%<span>%i18n:@admin%</span>%fa:angle-right%</a>
+					<a href="/admin">
+						<i><fa icon="terminal"/></i>
+						<span>%i18n:@admin%</span>
+						<i><fa icon="angle-right"/></i>
+					</a>
 				</li>
 			</ul>
 			<ul>
 				<li @click="dark">
-					<p><span>%i18n:@dark%</span><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
+					<p>
+						<span>%i18n:@dark%</span>
+						<template v-if="$store.state.device.darkmode"><i><fa icon="moon"/></i></template>
+						<template v-else><i><fa :icon="['far', 'moon']"/></i></template>
+					</p>
 				</li>
 			</ul>
 			<ul>
 				<li @click="signout">
-					<p class="signout">%fa:power-off%<span>%i18n:@signout%</span></p>
+					<p class="signout">
+						<i><fa icon="power-off"/></i>
+						<span>%i18n:@signout%</span>
+					</p>
 				</li>
 			</ul>
 		</div>
@@ -160,7 +199,7 @@ export default Vue.extend({
 			@media (max-width 1100px)
 				display none
 
-			[data-fa]
+			[data-icon]
 				margin-left 8px
 
 		> .avatar
@@ -254,11 +293,11 @@ export default Vue.extend({
 							color var(--primaryForeground)
 							border-radius 8px
 
-					> [data-fa]:first-child
+					> i:first-child
 						margin-right 6px
 						width 16px
 
-					> [data-fa]:last-child
+					> i:last-child
 						display block
 						position absolute
 						top 0
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 3acc25c0dd..585f0a9436 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -4,32 +4,32 @@
 		<template v-if="$store.getters.isSignedIn">
 			<template v-if="$store.state.device.deckDefault">
 				<li class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
-					<router-link to="/">%fa:columns%<p>%i18n:@deck%</p></router-link>
+					<router-link to="/"><fa icon="columns"/><p>%i18n:@deck%</p></router-link>
 				</li>
 				<li class="home" :class="{ active: $route.name == 'home' }" @click="goToTop">
-					<router-link to="/home">%fa:home%<p>%i18n:@home%</p></router-link>
+					<router-link to="/home"><fa icon="home"/><p>%i18n:@home%</p></router-link>
 				</li>
 			</template>
 			<template v-else>
 				<li class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop">
-					<router-link to="/">%fa:home%<p>%i18n:@home%</p></router-link>
+					<router-link to="/"><fa icon="home"/><p>%i18n:@home%</p></router-link>
 				</li>
 				<li class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
-					<router-link to="/deck">%fa:columns%<p>%i18n:@deck%</p></router-link>
+					<router-link to="/deck"><fa icon="columns"/><p>%i18n:@deck%</p></router-link>
 				</li>
 			</template>
 			<li class="messaging">
 				<a @click="messaging">
-					%fa:comments%
+					<fa icon="comments"/>
 					<p>%i18n:@messaging%</p>
-					<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>
+					<template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
 				</a>
 			</li>
 			<li class="game">
 				<a @click="game">
-					%fa:gamepad%
+					<fa icon="gamepad"/>
 					<p>%i18n:@game%</p>
-					<template v-if="hasGameInvitations">%fa:circle%</template>
+					<template v-if="hasGameInvitations"><fa icon="circle"/></template>
 				</a>
 			</li>
 		</template>
@@ -139,10 +139,10 @@ export default Vue.extend({
 					color var(--desktopHeaderHoverFg)
 					text-decoration none
 
-				> [data-fa]:first-child
+				> [data-icon]:first-child
 					margin-right 8px
 
-				> [data-fa]:last-child
+				> [data-icon]:last-child
 					margin-left 5px
 					font-size 10px
 					color var(--primary)
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index c59a49556d..fa3be79096 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -1,7 +1,8 @@
 <template>
 <div class="notifications" v-hotkey.global="keymap">
 	<button :data-active="isOpen" @click="toggle" title="%i18n:@title%">
-		%fa:R bell%<template v-if="hasUnreadNotification">%fa:circle%</template>
+		<i class="bell"><fa :icon="['far', 'bell']"/></i>
+		<i class="circle" v-if="hasUnreadNotification"><fa icon="circle"/></i>
 	</button>
 	<div class="pop" v-if="isOpen">
 		<mk-notifications/>
@@ -79,11 +80,11 @@ export default Vue.extend({
 		&[data-active='true']
 			color var(--desktopHeaderHoverFg)
 
-		> [data-fa].bell
+		> i.bell
 			font-size 1.2em
 			line-height 48px
 
-		> [data-fa].circle
+		> i.circle
 			margin-left -5px
 			vertical-align super
 			font-size 10px
diff --git a/src/client/app/desktop/views/components/ui.header.post.vue b/src/client/app/desktop/views/components/ui.header.post.vue
index a0d8cbdf83..2955b33487 100644
--- a/src/client/app/desktop/views/components/ui.header.post.vue
+++ b/src/client/app/desktop/views/components/ui.header.post.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="note">
-	<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
+	<button @click="post" title="%i18n:@post%"><fa icon="pencil-alt"/></button>
 </div>
 </template>
 
diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
index 0880f4b722..eb08751eb2 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -1,6 +1,6 @@
 <template>
 <form class="search" @submit.prevent="onSubmit">
-	%fa:search%
+	<i><fa icon="search"/></i>
 	<input v-model="q" type="search" placeholder="%i18n:@placeholder%"/>
 	<div class="result"></div>
 </form>
@@ -32,7 +32,7 @@ export default Vue.extend({
 	@media (max-width 800px)
 		display none !important
 
-	> [data-fa]
+	> i
 		display block
 		position absolute
 		top 0
diff --git a/src/client/app/desktop/views/components/ui.sidebar.vue b/src/client/app/desktop/views/components/ui.sidebar.vue
index 36b5b3958b..7c68074beb 100644
--- a/src/client/app/desktop/views/components/ui.sidebar.vue
+++ b/src/client/app/desktop/views/components/ui.sidebar.vue
@@ -2,43 +2,43 @@
 <div class="header" :class="navbar">
 	<div class="body">
 		<div class="post">
-			<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
+			<button @click="post" title="%i18n:@post%"><fa icon="pencil-alt"/></button>
 		</div>
 
 		<div class="nav" v-if="$store.getters.isSignedIn">
 			<template v-if="$store.state.device.deckDefault">
 				<div class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
-					<router-link to="/">%fa:columns%</router-link>
+					<router-link to="/"><fa icon="columns"/></router-link>
 				</div>
 				<div class="home" :class="{ active: $route.name == 'home' }" @click="goToTop">
-					<router-link to="/home">%fa:home%</router-link>
+					<router-link to="/home"><fa icon="home"/></router-link>
 				</div>
 			</template>
 			<template v-else>
 				<div class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop">
-					<router-link to="/">%fa:home%</router-link>
+					<router-link to="/"><fa icon="home"/></router-link>
 				</div>
 				<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
-					<router-link to="/deck">%fa:columns%</router-link>
+					<router-link to="/deck"><fa icon="columns"/></router-link>
 				</div>
 			</template>
 			<div class="messaging">
-				<a @click="messaging">%fa:comments%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template></a>
+				<a @click="messaging"><fa icon="comments"/><template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template></a>
 			</div>
 			<div class="game">
-				<a @click="game">%fa:gamepad%<template v-if="hasGameInvitations">%fa:circle%</template></a>
+				<a @click="game"><fa icon="gamepad"/><template v-if="hasGameInvitations"><fa icon="circle"/></template></a>
 			</div>
 		</div>
 
 		<div class="nav bottom" v-if="$store.getters.isSignedIn">
 			<div>
-				<a @click="drive">%fa:cloud%</a>
+				<a @click="drive"><fa icon="cloud"/></a>
 			</div>
 			<div ref="notificationsButton" :class="{ active: showNotifications }">
-				<a @click="notifications">%fa:R bell%</a>
+				<a @click="notifications"><fa :icon="['far', 'bell']"/></a>
 			</div>
 			<div>
-				<a @click="settings">%fa:cog%</a>
+				<a @click="settings"><fa icon="cog"/></a>
 			</div>
 		</div>
 
@@ -49,20 +49,20 @@
 
 			<div class="nav menu">
 				<div class="signout">
-					<a @click="signout">%fa:power-off%</a>
+					<a @click="signout"><fa icon="power-off"/></a>
 				</div>
 				<div>
-					<router-link to="/i/favorites">%fa:star%</router-link>
+					<router-link to="/i/favorites"><fa icon="star"/></router-link>
 				</div>
 				<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
-					<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
+					<a @click="followRequests"><fa :icon="['far', 'envelope']"/><i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
 				</div>
 			</div>
 		</div>
 
 		<div class="nav dark">
 			<div>
-				<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
+				<a @click="dark"><template v-if="$store.state.device.darkmode"><fa icon="moon"/></template><template v-else><fa :icon="['far', 'moon']"/></template></a>
 			</div>
 		</div>
 	</div>
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
index 9c384314cf..5943379200 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
-	<span slot="header">%fa:list% %i18n:@title%</span>
+	<span slot="header"><fa icon="list"/> %i18n:@title%</span>
 
 	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
 		<button class="ui" @click="add">%i18n:@create-list%</button>
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
index 1316f277b7..05fe6c292e 100644
--- a/src/client/app/desktop/views/components/users-list.vue
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -18,7 +18,7 @@
 	<p class="no" v-if="!fetching && users.length == 0">
 		<slot></slot>
 	</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@fetching%<mk-ellipsis/></p>
+	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@fetching%<mk-ellipsis/></p>
 </div>
 </template>
 
@@ -139,7 +139,7 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index a506357039..c14f5f5511 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 			color var(--faceHeaderText)
 			box-shadow 0 1px rgba(#000, 0.07)
 
-			> [data-fa]
+			> [data-icon]
 				margin-right 6px
 
 			&:empty
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index a1893ffd6b..6668e0025f 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -8,8 +8,12 @@
 			>
 				<h1><slot name="header"></slot></h1>
 				<div>
-					<button class="popout" v-if="popoutUrl" @mousedown.stop="() => {}" @click="popout" title="%i18n:@popout%">%fa:R window-restore%</button>
-					<button class="close" v-if="canClose" @mousedown.stop="() => {}" @click="close" title="%i18n:@close%">%fa:times%</button>
+					<button class="popout" v-if="popoutUrl" @mousedown.stop="() => {}" @click="popout" title="%i18n:@popout%">
+						<i><fa :icon="['far', 'window-restore']"/></i>
+					</button>
+					<button class="close" v-if="canClose" @mousedown.stop="() => {}" @click="close" title="%i18n:@close%">
+						<i><fa icon="times"/></i>
+					</button>
 				</div>
 			</header>
 			<div class="content">
@@ -612,7 +616,8 @@ export default Vue.extend({
 						&:active
 							color var(--faceTextButtonActive)
 
-						> [data-fa]
+						> i
+							display inline-block
 							padding 0
 							width $header-height
 							line-height $header-height
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 00b2453f98..ac811ce7cc 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -11,13 +11,13 @@
 			@dragend="onDragend"
 			@contextmenu.prevent.stop="onContextmenu">
 		<button class="toggleActive" @click="toggleActive" v-if="isStacked">
-			<template v-if="active">%fa:angle-up%</template>
-			<template v-else>%fa:angle-down%</template>
+			<template v-if="active"><fa icon="angle-up"/></template>
+			<template v-else><fa icon="angle-down"/></template>
 		</button>
 		<slot name="header"></slot>
 		<span class="count" v-if="count > 0">({{ count }})</span>
-		<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
-		<button v-else class="close" @click.stop="close">%fa:times%</button>
+		<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
+		<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
 	</header>
 	<div ref="body" v-show="active">
 		<slot></slot>
@@ -163,7 +163,7 @@ export default Vue.extend({
 
 		getMenu() {
 			const items = [{
-				icon: '%fa:pencil-alt%',
+				icon: 'pencil-alt',
 				text: '%i18n:common.deck.rename%',
 				action: () => {
 					(this as any).apis.input({
@@ -175,43 +175,43 @@ export default Vue.extend({
 					});
 				}
 			}, null, {
-				icon: '%fa:arrow-left%',
+				icon: 'arrow-left',
 				text: '%i18n:common.deck.swap-left%',
 				action: () => {
 					this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
 				}
 			}, {
-				icon: '%fa:arrow-right%',
+				icon: 'arrow-right',
 				text: '%i18n:common.deck.swap-right%',
 				action: () => {
 					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
-				icon: '%fa:arrow-up%',
+				icon: 'arrow-up',
 				text: '%i18n:common.deck.swap-up%',
 				action: () => {
 					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
 				}
 			} : undefined, this.isStacked ? {
-				icon: '%fa:arrow-down%',
+				icon: 'arrow-down',
 				text: '%i18n:common.deck.swap-down%',
 				action: () => {
 					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
-				icon: '%fa:window-restore R%',
+				icon: ['far', 'window-restore'],
 				text: '%i18n:common.deck.stack-left%',
 				action: () => {
 					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
-				icon: '%fa:window-maximize R%',
+				icon: ['far', 'window-maximize'],
 				text: '%i18n:common.deck.pop-right%',
 				action: () => {
 					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
-				icon: '%fa:trash-alt R%',
+				icon: ['far', 'trash-alt'],
 				text: '%i18n:common.deck.remove%',
 				action: () => {
 					this.$store.dispatch('settings/removeDeckColumn', this.column.id);
@@ -382,7 +382,7 @@ export default Vue.extend({
 			box-shadow 0 3px 0 0 var(--primary)
 
 		> span
-			[data-fa]
+			[data-icon]
 				margin-right 8px
 
 		> .count
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
index 7744a755e6..baee7ff5e5 100644
--- a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">%fa:envelope R%{{ name }}</span>
+	<span slot="header"><fa :icon="['far', 'envelope']"/>{{ name }}</span>
 
 	<x-direct/>
 </x-column>
diff --git a/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue b/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
index 2b5bf14b27..a6d09e60c6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
@@ -1,7 +1,7 @@
 <template>
 <x-column>
 	<span slot="header">
-		%fa:hashtag%<span>{{ tag }}</span>
+		<fa icon="hashtag"/><span>{{ tag }}</span>
 	</span>
 
 	<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
index 6598832bab..19537a2db0 100644
--- a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">%fa:at%{{ name }}</span>
+	<span slot="header"><fa icon="at"/>{{ name }}</span>
 
 	<x-mentions ref="tl"/>
 </x-column>
diff --git a/src/client/app/desktop/views/pages/deck/deck.note-column.vue b/src/client/app/desktop/views/pages/deck/deck.note-column.vue
index 8335c37bf2..dae6debe7e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note-column.vue
@@ -1,13 +1,13 @@
 <template>
 <x-column>
 	<span slot="header">
-		%fa:comment-alt R%<span>{{ title }}</span>
+		<fa :icon="['far', 'comment-alt']"/><span>{{ title }}</span>
 	</span>
 
 	<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
 		<div class="is-remote" v-if="note.user.host != null">
 			<details>
-				<summary>%fa:exclamation-triangle% %i18n:common.is-remote-post%</summary>
+				<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-post%</summary>
 				<a :href="note.url || note.uri" target="_blank">%i18n:common.view-on-remote%</a>
 			</details>
 		</div>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index a5f20df5b3..b7a47ddb27 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -21,8 +21,8 @@
 				:media-view="mediaView"
 				:mini="true"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
-				<span>%fa:angle-up%{{ note._datetext }}</span>
-				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+				<span><fa icon="angle-up"/>{{ note._datetext }}</span>
+				<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
 	</div>
@@ -31,7 +31,7 @@
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">%i18n:@load-more%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+			<template v-if="moreFetching"><fa icon="spinner .pulse" fixed-width/></template>
 		</button>
 	</footer>
 </div>
@@ -236,7 +236,7 @@ export default Vue.extend({
 			span
 				margin 0 16px
 
-			[data-fa]
+			[data-icon]
 				margin-right 8px
 
 	> footer
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index fa8f99a2ba..f1b482f3ab 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -9,8 +9,8 @@
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note) }}
-				%fa:quote-right%
+				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}
+				<fa icon="quote-right"/>
 			</router-link>
 		</div>
 	</div>
@@ -19,12 +19,12 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:retweet%
+				<fa icon="retweet"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+				<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
 	</div>
@@ -33,7 +33,7 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:user-plus%
+				<fa icon="user-plus"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
@@ -44,7 +44,7 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:user-clock%
+				<fa icon="user-clock"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
@@ -55,12 +55,12 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:chart-pie%
+				<fa icon="chart-pie"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
 	</div>
@@ -151,7 +151,7 @@ export default Vue.extend({
 			> .note-ref
 				color var(--noteText)
 
-				[data-fa]
+				[data-icon]
 					font-size 1em
 					font-weight normal
 					font-style normal
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
index 220e938a46..5ecc41d690 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">%fa:bell R%{{ name }}</span>
+	<span slot="header"><fa :icon="['far', 'bell']"/>{{ name }}</span>
 
 	<x-notifications/>
 </x-column>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index 59d361b0bd..168ecc14fe 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -11,13 +11,13 @@
 		<template v-for="(notification, i) in _notifications">
 			<x-notification class="notification" :notification="notification" :key="notification.id"/>
 			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
-				<span>%fa:angle-up%{{ notification._datetext }}</span>
-				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+				<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
+				<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
 	</component>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
-		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
+		<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
 	</button>
 	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
 </div>
@@ -188,7 +188,7 @@ export default Vue.extend({
 			span
 				margin 0 16px
 
-			i
+			[data-icon]
 				margin-right 8px
 
 	> .more
@@ -207,7 +207,7 @@ export default Vue.extend({
 		&.fetching
 			cursor wait
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> .empty
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
index 6faef36439..44ef4eda1c 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
@@ -1,12 +1,12 @@
 <template>
 <x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
 	<span slot="header">
-		<template v-if="column.type == 'home'">%fa:home%</template>
-		<template v-if="column.type == 'local'">%fa:R comments%</template>
-		<template v-if="column.type == 'hybrid'">%fa:share-alt%</template>
-		<template v-if="column.type == 'global'">%fa:globe%</template>
-		<template v-if="column.type == 'list'">%fa:list%</template>
-		<template v-if="column.type == 'hashtag'">%fa:hashtag%</template>
+		<template v-if="column.type == 'home'"><fa icon="home"/></template>
+		<template v-if="column.type == 'local'"><fa :icon="['far', 'comments']"/></template>
+		<template v-if="column.type == 'hybrid'"><fa icon="share-alt"/></template>
+		<template v-if="column.type == 'global'"><fa icon="globe"/></template>
+		<template v-if="column.type == 'list'"><fa icon="list"/></template>
+		<template v-if="column.type == 'hashtag'"><fa icon="hashtag"/></template>
 		<span>{{ name }}</span>
 	</span>
 
@@ -66,7 +66,7 @@ export default Vue.extend({
 		return {
 			edit: false,
 			menu: [{
-				icon: '%fa:cog%',
+				icon: 'cog',
 				text: '%i18n:@edit%',
 				action: () => {
 					this.edit = !this.edit;
diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
index 7a84f6605c..8bd5421718 100644
--- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
@@ -1,19 +1,19 @@
 <template>
 <x-column>
 	<span slot="header">
-		%fa:user%<span>{{ title }}</span>
+		<fa icon="user"/><span>{{ title }}</span>
 	</span>
 
 	<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
 		<div class="is-remote" v-if="user.host != null">
 			<details>
-				<summary>%fa:exclamation-triangle% %i18n:common.is-remote-user%</summary>
+				<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%</summary>
 				<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a>
 			</details>
 		</div>
 		<header :style="bannerStyle">
 			<div>
-				<button class="menu" @click="menu" ref="menu">%fa:ellipsis-h%</button>
+				<button class="menu" @click="menu" ref="menu"><fa icon="ellipsis-h"/></button>
 				<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow"/>
 				<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 				<span class="name">{{ user | userName }}</span>
@@ -40,17 +40,17 @@
 			</div>
 		</div>
 		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
-			<p class="caption" @click="toggleShowPinned">%fa:thumbtack% %i18n:@pinned-notes%</p>
-			<span class="angle" v-if="showPinned">%fa:angle-up%</span>
-			<span class="angle" v-else>%fa:angle-down%</span>
+			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> %i18n:@pinned-notes%</p>
+			<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div class="notes" v-show="showPinned">
 				<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
 			</div>
 		</div>
 		<div class="images" v-if="images.length > 0">
-			<p class="caption" @click="toggleShowImages">%fa:images R% %i18n:@images%</p>
-			<span class="angle" v-if="showImages">%fa:angle-up%</span>
-			<span class="angle" v-else>%fa:angle-down%</span>
+			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> %i18n:@images%</p>
+			<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div v-show="showImages">
 				<router-link v-for="image in images"
 					:style="`background-image: url(${image.thumbnailUrl})`"
@@ -61,15 +61,15 @@
 			</div>
 		</div>
 		<div class="activity">
-			<p class="caption" @click="toggleShowActivity">%fa:chart-bar R% %i18n:@activity%</p>
-			<span class="angle" v-if="showActivity">%fa:angle-up%</span>
-			<span class="angle" v-else>%fa:angle-down%</span>
+			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> %i18n:@activity%</p>
+			<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div v-show="showActivity">
 				<div ref="chart"></div>
 			</div>
 		</div>
 		<div class="tl">
-			<p class="caption">%fa:comment-alt R% %i18n:@timeline%</p>
+			<p class="caption"><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</p>
 			<div>
 				<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
 			</div>
@@ -294,7 +294,7 @@ export default Vue.extend({
 
 		menu() {
 			let menu = [{
-				icon: '%fa:list%',
+				icon: 'list',
 				text: '%i18n:@push-to-a-list%',
 				action: () => {
 					const w = (this as any).os.new(MkUserListsWindow);
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 3b3102bd72..e1b9e76813 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -14,7 +14,7 @@
 			<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
 			<x-hashtag-column v-else-if="temporaryColumn.type == 'tag'" :tag="temporaryColumn.tag" :key="temporaryColumn.tag"/>
 		</template>
-		<button ref="add" @click="add" title="%i18n:common.deck.add-column%">%fa:plus%</button>
+		<button ref="add" @click="add" title="%i18n:common.deck.add-column%"><fa icon="plus"/></button>
 	</div>
 </mk-ui>
 </template>
@@ -182,7 +182,7 @@ export default Vue.extend({
 				source: this.$refs.add,
 				compact: true,
 				items: [{
-					icon: '%fa:home%',
+					icon: 'home',
 					text: '%i18n:common.deck.home%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -191,7 +191,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:comments R%',
+					icon: ['far', 'comments'],
 					text: '%i18n:common.deck.local%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -200,7 +200,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:share-alt%',
+					icon: 'share-alt',
 					text: '%i18n:common.deck.hybrid%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -209,7 +209,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:globe%',
+					icon: 'globe',
 					text: '%i18n:common.deck.global%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -218,7 +218,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:at%',
+					icon: 'at',
 					text: '%i18n:common.deck.mentions%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -227,7 +227,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:envelope R%',
+					icon: ['far', 'envelope'],
 					text: '%i18n:common.deck.direct%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -236,7 +236,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:list%',
+					icon: 'list',
 					text: '%i18n:common.deck.list%',
 					action: () => {
 						const w = (this as any).os.new(MkUserListsWindow);
@@ -250,7 +250,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:hashtag%',
+					icon: 'hashtag',
 					text: '%i18n:common.deck.hashtag%',
 					action: () => {
 						(this as any).apis.input({
@@ -264,7 +264,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:bell R%',
+					icon: ['far', 'bell'],
 					text: '%i18n:common.deck.notifications%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -273,7 +273,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:calculator%',
+					icon: 'calculator',
 					text: '%i18n:common.deck.widgets%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index e1fecc98bc..34b2af7d1b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" class="wtdtxvecapixsepjtcupubtsmometobz">
-	<span slot="header">%fa:calculator%{{ name }}</span>
+	<span slot="header"><fa icon="calculator"/>{{ name }}</span>
 
 	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
 		<template v-if="edit">
@@ -37,7 +37,7 @@
 				@sort="onWidgetSort"
 			>
 				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
-					<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+					<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
 					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
 				</div>
 			</x-draggable>
@@ -89,7 +89,7 @@ export default Vue.extend({
 
 	created() {
 		this.menu = [{
-			icon: '%fa:cog%',
+			icon: 'cog',
 			text: '%i18n:@edit%',
 			action: () => {
 				this.edit = !this.edit;
diff --git a/src/client/app/desktop/views/pages/note.vue b/src/client/app/desktop/views/pages/note.vue
index 8502dd3d58..1e53b97cf6 100644
--- a/src/client/app/desktop/views/pages/note.vue
+++ b/src/client/app/desktop/views/pages/note.vue
@@ -3,8 +3,8 @@
 	<main v-if="!fetching">
 		<mk-note-detail :note="note"/>
 		<footer>
-			<router-link v-if="note.next" :to="note.next">%fa:angle-left% %i18n:@next%</router-link>
-			<router-link v-if="note.prev" :to="note.prev">%i18n:@prev% %fa:angle-right%</router-link>
+			<router-link v-if="note.next" :to="note.next"><fa icon="angle-left"/> %i18n:@next%</router-link>
+			<router-link v-if="note.prev" :to="note.prev">%i18n:@prev% <fa icon="angle-right"/></router-link>
 		</footer>
 	</main>
 </mk-ui>
diff --git a/src/client/app/desktop/views/pages/search.vue b/src/client/app/desktop/views/pages/search.vue
index f088ba114d..25046531e7 100644
--- a/src/client/app/desktop/views/pages/search.vue
+++ b/src/client/app/desktop/views/pages/search.vue
@@ -4,7 +4,7 @@
 		<h1>{{ q }}</h1>
 	</header>
 	<p :class="$style.notAvailable" v-if="!fetching && notAvailable">%i18n:@not-available%</p>
-	<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:not-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:not-found%'.split('{}')[1] }}</p>
+	<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ '%i18n:not-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:not-found%'.split('{}')[1] }}</p>
 	<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
 </mk-ui>
 </template>
@@ -124,13 +124,12 @@ export default Vue.extend({
 	text-align center
 	color #999
 
-	> [data-fa]
+	> [data-icon]
 		display block
 		margin-bottom 16px
 		font-size 3em
 		color #ccc
 
-
 .notAvailable
 	display block
 	margin 0 auto
@@ -139,7 +138,7 @@ export default Vue.extend({
 	text-align center
 	color #999
 
-	> [data-fa]
+	> [data-icon]
 		display block
 		margin-bottom 16px
 		font-size 3em
diff --git a/src/client/app/desktop/views/pages/selectdrive.vue b/src/client/app/desktop/views/pages/selectdrive.vue
index b82ed0a208..64be867a06 100644
--- a/src/client/app/desktop/views/pages/selectdrive.vue
+++ b/src/client/app/desktop/views/pages/selectdrive.vue
@@ -6,7 +6,7 @@
 		@change-selection="onChangeSelection"
 	/>
 	<footer>
-		<button class="upload" title="%i18n:@upload%" @click="upload">%fa:upload%</button>
+		<button class="upload" title="%i18n:@upload%" @click="upload"><fa icon="upload"/></button>
 		<button class="cancel" @click="close">%i18n:@cancel%</button>
 		<button class="ok" @click="ok">%i18n:@ok%</button>
 	</footer>
diff --git a/src/client/app/desktop/views/pages/share.vue b/src/client/app/desktop/views/pages/share.vue
index 69ecbf115f..d5e38fed46 100644
--- a/src/client/app/desktop/views/pages/share.vue
+++ b/src/client/app/desktop/views/pages/share.vue
@@ -4,7 +4,7 @@
 	<div>
 		<mk-signin v-if="!$store.getters.isSignedIn"/>
 		<mk-post-form v-else-if="!posted" :initial-text="text" :instant="true" @posted="posted = true"/>
-		<p v-if="posted" class="posted">%fa:check%</p>
+		<p v-if="posted" class="posted"><fa icon="check"/></p>
 	</div>
 	<button v-if="posted" class="ui button" @click="close">%i18n:common.close%</button>
 </div>
diff --git a/src/client/app/desktop/views/pages/tag.vue b/src/client/app/desktop/views/pages/tag.vue
index 5305b4ac13..f72c629eff 100644
--- a/src/client/app/desktop/views/pages/tag.vue
+++ b/src/client/app/desktop/views/pages/tag.vue
@@ -3,7 +3,7 @@
 	<header :class="$style.header">
 		<h1>#{{ $route.params.tag }}</h1>
 	</header>
-	<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
+	<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
 	<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
 </mk-ui>
 </template>
@@ -113,7 +113,7 @@ export default Vue.extend({
 	text-align center
 	color #999
 
-	> [data-fa]
+	> [data-icon]
 		display block
 		margin-bottom 16px
 		font-size 3em
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index cf05006c00..14765450aa 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
-	<p class="title">%fa:users%%i18n:@title%</p>
-	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
+	<p class="title"><fa icon="users"/>%i18n:@title%</p>
+	<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
 	<router-link v-for="user in users" :to="user | userPage" :key="user.id">
 		<img :src="user.avatarUrl" :alt="user | userName" v-user-preview="user.id"/>
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 36ae360248..60bfc3e4fd 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="hozptpaliadatkehcmcayizwzwwctpbc">
-	<p class="title">%fa:users%%i18n:@title%</p>
-	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
+	<p class="title"><fa icon="users"/>%i18n:@title%</p>
+	<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
 	<template v-if="!fetching && users.length != 0">
 		<div class="user" v-for="friend in users">
 			<mk-avatar class="avatar" :user="friend"/>
diff --git a/src/client/app/desktop/views/pages/user/user.github.vue b/src/client/app/desktop/views/pages/user/user.github.vue
index e9651e5a5c..a4cb1dac0a 100644
--- a/src/client/app/desktop/views/pages/user/user.github.vue
+++ b/src/client/app/desktop/views/pages/user/user.github.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="aqooishiizumijmihokohinatamihoaz">
-	<span>%fa:B github%<a :href="`https://github.com/${user.github.login}`" target="_blank">@{{ user.github.login }}</a></span>
+	<span><fa :icon="['fab', 'github']"/><a :href="`https://github.com/${user.github.login}`" target="_blank">@{{ user.github.login }}</a></span>
 </div>
 </template>
 
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 81398b9862..4c30942828 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -7,7 +7,7 @@
 			<p class="name">{{ user | userName }}</p>
 			<div>
 				<span class="username"><mk-acct :user="user" :detail="true" /></span>
-				<span v-if="user.isBot" title="%i18n:@is-bot%">%fa:robot%</span>
+				<span v-if="user.isBot" title="%i18n:@is-bot%"><fa icon="robot"/></span>
 			</div>
 		</div>
 	</div>
@@ -17,8 +17,8 @@
 			<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
 		</div>
 		<div class="info">
-			<span class="location" v-if="user.host === null && user.profile.location">%fa:map-marker% {{ user.profile.location }}</span>
-			<span class="birthday" v-if="user.host === null && user.profile.birthday">%fa:birthday-cake% {{ user.profile.birthday.replace('-', '%i18n:@year%').replace('-', '%i18n:@month%') + '%i18n:@day%' }} ({{ age }}%i18n:@years-old%)</span>
+			<span class="location" v-if="user.host === null && user.profile.location"><fa icon="map-marker"/> {{ user.profile.location }}</span>
+			<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', '%i18n:@year%').replace('-', '%i18n:@month%') + '%i18n:@day%' }} ({{ age }}%i18n:@years-old%)</span>
 		</div>
 		<div class="status">
 			<span class="notes-count"><b>{{ user.notesCount | number }}</b>%i18n:@posts%</span>
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index 2f525b003d..6608bd5051 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
-	<p class="title">%fa:camera%%i18n:@title%</p>
-	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
+	<p class="title"><fa icon="camera"/>%i18n:@title%</p>
+	<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
 	<div class="stream" v-if="!fetching && images.length > 0">
 		<div v-for="image in images" class="img"
 			:style="`background-image: url(${image.thumbnailUrl})`"
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index d0d54d273f..bde57e5bcf 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -4,20 +4,20 @@
 		<mk-follow-button :user="user" size="big"/>
 		<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
 		<p class="stalk" v-if="user.isFollowing">
-			<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
-			<span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %i18n:@stalk%</a></span>
+			<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk"><fa icon="meh"/> %i18n:@unstalk%</a></span>
+			<span v-if="!user.isStalking"><a @click="stalk"><fa icon="user-secret"/> %i18n:@stalk%</a></span>
 		</p>
 	</div>
 	<div class="action-form">
 		<ui-button @click="user.isMuted ? unmute() : mute()" v-if="$store.state.i.id != user.id">
-			<span v-if="user.isMuted">%fa:eye% %i18n:@unmute%</span>
-			<span v-else>%fa:eye-slash% %i18n:@mute%</span>
+			<span v-if="user.isMuted"><fa icon="eye"/> %i18n:@unmute%</span>
+			<span v-else><fa icon="eye-slash"/> %i18n:@mute%</span>
 		</ui-button>
 		<ui-button @click="user.isBlocking ? unblock() : block()" v-if="$store.state.i.id != user.id">
-			<span v-if="user.isBlocking">%fa:user% %i18n:@unblock%</span>
-			<span v-else>%fa:user-slash% %i18n:@block%</span>
+			<span v-if="user.isBlocking"><fa icon="user"/> %i18n:@unblock%</span>
+			<span v-else><fa icon="user-slash"/> %i18n:@block%</span>
 		</ui-button>
-		<ui-button @click="list">%fa:list% %i18n:@push-to-a-list%</ui-button>
+		<ui-button @click="list"><fa icon="list"/> %i18n:@push-to-a-list%</ui-button>
 	</div>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index a8d49c8d64..8df546aada 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
 	<header>
-		<span :data-active="mode == 'default'" @click="mode = 'default'">%fa:comment-alt R% %i18n:@default%</span>
-		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%fa:comments% %i18n:@with-replies%</span>
-		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%fa:images% %i18n:@with-media%</span>
+		<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> %i18n:@default%</span>
+		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> %i18n:@with-replies%</span>
+		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa icon="images"/> %i18n:@with-media%</span>
 	</header>
 	<mk-notes ref="timeline" :more="existMore ? more : null">
-		<p class="empty" slot="empty">%fa:R comments%%i18n:@empty%</p>
+		<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>%i18n:@empty%</p>
 	</mk-notes>
 </div>
 </template>
@@ -157,7 +157,7 @@ export default Vue.extend({
 		text-align center
 		color #999
 
-		> [data-fa]
+		> [data-icon]
 			display block
 			margin-bottom 16px
 			font-size 3em
diff --git a/src/client/app/desktop/views/pages/user/user.twitter.vue b/src/client/app/desktop/views/pages/user/user.twitter.vue
index 228ce1de96..13cea10a99 100644
--- a/src/client/app/desktop/views/pages/user/user.twitter.vue
+++ b/src/client/app/desktop/views/pages/user/user.twitter.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="adsvaidqfznoartcbplullnejvxjphcn">
-	<span>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></span>
+	<span><fa :icon="['fab', 'twitter']"/><a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></span>
 </div>
 </template>
 
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index b137592c69..e36be6ac5f 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -1,8 +1,8 @@
 <template>
 <mk-ui>
 	<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
-		<div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
-		<div class="is-remote" v-if="user.host">%fa:exclamation-triangle% %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div>
+		<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> %i18n:@is-suspended%</div>
+		<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div>
 		<main>
 			<div class="main">
 				<x-header :user="user"/>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 65651f7ffc..fbb20f4057 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -3,8 +3,8 @@
 	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
 
 	<button @click="dark">
-		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
-		<template v-else>%fa:R moon%</template>
+		<template v-if="$store.state.device.darkmode"><fa icon="moon"/></template>
+		<template v-else><fa :icon="['far', 'moon']"/></template>
 	</button>
 
 	<mk-forkit class="forkit"/>
@@ -19,8 +19,8 @@
 					<div class="info">
 						<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
 						<span class="stats" v-if="stats">
-							<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
-							<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
+							<span><fa icon="user"/> {{ stats.originalUsersCount | number }}</span>
+							<span><fa icon="pencil-alt"/> {{ stats.originalNotesCount | number }}</span>
 						</span>
 					</div>
 
@@ -40,7 +40,7 @@
 			</div>
 
 			<div class="announcements block">
-				<header>%fa:broadcast-tower% %i18n:@announcements%</header>
+				<header><fa icon="broadcast-tower"/> %i18n:@announcements%</header>
 				<div v-if="announcements && announcements.length > 0">
 					<div v-for="announcement in announcements">
 						<h1 v-html="announcement.title"></h1>
@@ -50,7 +50,7 @@
 			</div>
 
 			<div class="photos block">
-				<header>%fa:images% %i18n:@photos%</header>
+				<header><fa icon="images"/> %i18n:@photos%</header>
 				<div>
 					<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
 				</div>
@@ -76,14 +76,14 @@
 				</div>
 
 				<div class="tl block">
-					<header>%fa:comment-alt R% %i18n:@timeline%</header>
+					<header><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</header>
 					<div>
 						<mk-welcome-timeline class="tl" :max="20"/>
 					</div>
 				</div>
 
 				<div class="info block">
-					<header>%fa:info-circle% %i18n:@info%</header>
+					<header><fa icon="info-circle"/> %i18n:@info%</header>
 					<div>
 						<div v-if="meta" class="body">
 							<p>Version: <b>{{ meta.version }}</b></p>
diff --git a/src/client/app/desktop/views/widgets/messaging.vue b/src/client/app/desktop/views/widgets/messaging.vue
index 791d2ff1bb..4ab18034f6 100644
--- a/src/client/app/desktop/views/widgets/messaging.vue
+++ b/src/client/app/desktop/views/widgets/messaging.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-messaging">
 	<mk-widget-container :show-header="props.design == 0">
-		<template slot="header">%fa:comments%%i18n:@title%</template>
-		<button slot="func" @click="add">%fa:plus%</button>
+		<template slot="header"><fa icon="comments"/>%i18n:@title%</template>
+		<button slot="func" @click="add"><fa icon="plus"/></button>
 
 		<mk-messaging ref="index" compact @navigate="navigate"/>
 	</mk-widget-container>
diff --git a/src/client/app/desktop/views/widgets/notifications.vue b/src/client/app/desktop/views/widgets/notifications.vue
index b44261d7c4..bcbec0c949 100644
--- a/src/client/app/desktop/views/widgets/notifications.vue
+++ b/src/client/app/desktop/views/widgets/notifications.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-notifications">
 	<mk-widget-container :show-header="!props.compact">
-		<template slot="header">%fa:R bell%%i18n:@title%</template>
-		<!-- <button slot="func" title="%i18n:@settings%" @click="settings">%fa:cog%</button> -->
+		<template slot="header"><fa :icon="['far', 'bell']"/>%i18n:@title%</template>
+		<!-- <button slot="func" title="%i18n:@settings%" @click="settings"><fa icon="cog"/></button> -->
 
 		<mk-notifications :class="$style.notifications"/>
 	</mk-widget-container>
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index c10ac1ca17..368c4c4a8b 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -1,17 +1,17 @@
 <template>
 <div class="mkw-polls">
 	<mk-widget-container :show-header="!props.compact">
-		<template slot="header">%fa:chart-pie%%i18n:@title%</template>
-		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
+		<template slot="header"><fa icon="chart-pie"/>%i18n:@title%</template>
+		<button slot="func" title="%i18n:@refresh%" @click="fetch"><fa icon="sync"/></button>
 
 		<div class="mkw-polls--body">
 			<div class="poll" v-if="!fetching && poll != null">
 				<p v-if="poll.text"><router-link :to="poll | notePage">{{ poll.text }}</router-link></p>
-				<p v-if="!poll.text"><router-link :to="poll | notePage">%fa:link%</router-link></p>
+				<p v-if="!poll.text"><router-link :to="poll | notePage"><fa icon="link"/></router-link></p>
 				<mk-poll :note="poll"/>
 			</div>
 			<p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</p>
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
 		</div>
 	</mk-widget-container>
 </div>
@@ -88,7 +88,7 @@ export default define({
 		text-align center
 		color #aaa
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index a763f4d17c..01c8afec2b 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-post-form">
 	<template v-if="props.design == 0">
-		<p class="title">%fa:pencil-alt%%i18n:@title%</p>
+		<p class="title"><fa icon="pencil-alt"/>%i18n:@title%</p>
 	</template>
 	<textarea :disabled="posting" v-model="text" @keydown="onKeydown" :placeholder="placeholder"></textarea>
 	<button @click="post" :disabled="posting">%i18n:@note%</button>
@@ -86,7 +86,7 @@ export default define({
 		color #888
 		box-shadow 0 1px rgba(#000, 0.07)
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> textarea
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index a886796132..b20063d541 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mkw-trends">
 	<mk-widget-container :show-header="!props.compact">
-		<template slot="header">%fa:fire%%i18n:@title%</template>
-		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
+		<template slot="header"><fa icon="fire"/>%i18n:@title%</template>
+		<button slot="func" title="%i18n:@refresh%" @click="fetch"><fa icon="sync"/></button>
 
 		<div class="mkw-trends--body">
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
 			<div class="note" v-else-if="note != null">
 				<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
 				<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
@@ -95,7 +95,7 @@ export default define({
 			text-align center
 			color #aaa
 
-			> [data-fa]
+			> [data-icon]
 				margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 7501e96d97..ca55ca8936 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mkw-users">
 	<mk-widget-container :show-header="!props.compact">
-		<template slot="header">%fa:users%%i18n:@title%</template>
-		<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
+		<template slot="header"><fa icon="users"/>%i18n:@title%</template>
+		<button slot="func" title="%i18n:@refresh%" @click="refresh"><fa icon="sync"/></button>
 
 		<div class="mkw-users--body">
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
 			<template v-else-if="users.length != 0">
 				<div class="user" v-for="_user in users">
 					<mk-avatar class="avatar" :user="_user"/>
@@ -129,7 +129,7 @@ export default define({
 			text-align center
 			color #aaa
 
-			> [data-fa]
+			> [data-icon]
 				margin-right 4px
 
 </style>