wip

115 files changed, 559 insertions, 456 deletions

diff --git a/gulpfile.ts b/gulpfile.ts
index 93002cbf37..95aeb6e06b 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -20,6 +20,12 @@ import * as mocha from 'gulp-mocha';
 import * as replace from 'gulp-replace';
 import * as htmlmin from 'gulp-htmlmin';
 const uglifyes = require('uglify-es');
+const fontawesome = require('@fortawesome/fontawesome');
+const solid = require('@fortawesome/fontawesome-free-solid');
+
+// Adds all the icons from the Solid style into our library for easy lookup
+fontawesome.library.add(solid);
+
 import version from './src/version';
 
 const uglify = uglifyComposer(uglifyes, console);
@@ -169,7 +175,8 @@ gulp.task('build:client:pug', [
 		gulp.src('./src/web/app/base.pug')
 			.pipe(pug({
 				locals: {
-					themeColor: constants.themeColor
+					themeColor: constants.themeColor,
+					facss: fontawesome.dom.css()
 				}
 			}))
 			.pipe(htmlmin({
diff --git a/package.json b/package.json
index 22d74a2206..df82e1f67c 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
 		"format": "gulp format"
 	},
 	"dependencies": {
+		"@fortawesome/fontawesome": "^1.0.0",
+		"@fortawesome/fontawesome-free-solid": "^5.0.0",
 		"@prezzemolo/rap": "0.1.2",
 		"@prezzemolo/zip": "0.0.3",
 		"@types/bcryptjs": "2.4.1",
diff --git a/src/web/app/base.pug b/src/web/app/base.pug
index 4ad669ade8..cb8806c1da 100644
--- a/src/web/app/base.pug
+++ b/src/web/app/base.pug
@@ -21,7 +21,8 @@ html
 		script
 			include ./../../../built/web/assets/safe.js
 
-		script(src='https://use.fontawesome.com/db921426cb.js' async)
+		// FontAwesome style
+		style #{facss}
 
 	body
 		noscript: p
diff --git a/src/web/app/ch/tags/channel.tag b/src/web/app/ch/tags/channel.tag
index 716d61cde4..cc8ce1ed9e 100644
--- a/src/web/app/ch/tags/channel.tag
+++ b/src/web/app/ch/tags/channel.tag
@@ -244,10 +244,10 @@
 	<p if={ reply }><b>&gt;&gt;{ reply.index }</b> ({ reply.user.name }): <a onclick={ clearReply }>[x]</a></p>
 	<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder="%i18n:ch.tags.mk-channel-form.textarea%"></textarea>
 	<div class="actions">
-		<button onclick={ selectFile }><i class="fa fa-upload"></i>%i18n:ch.tags.mk-channel-form.upload%</button>
-		<button onclick={ drive }><i class="fa fa-cloud"></i>%i18n:ch.tags.mk-channel-form.drive%</button>
+		<button onclick={ selectFile }>%fa:upload%%i18n:ch.tags.mk-channel-form.upload%</button>
+		<button onclick={ drive }>%fa:cloud%%i18n:ch.tags.mk-channel-form.drive%</button>
 		<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
-			<i class="fa fa-paper-plane" if={ !wait }></i>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis if={ wait }/>
+			<virtual if={ !wait }>%fa:paper-plane%</virtual>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis if={ wait }/>
 		</button>
 	</div>
 	<mk-uploader ref="uploader"/>
@@ -269,7 +269,7 @@
 				display flex
 
 				> button
-					> i
+					> [data-fa]
 						margin-right 0.25em
 
 					&:last-child
diff --git a/src/web/app/common/tags/error.tag b/src/web/app/common/tags/error.tag
index 51c2a6c13c..a5b8d14898 100644
--- a/src/web/app/common/tags/error.tag
+++ b/src/web/app/common/tags/error.tag
@@ -96,17 +96,17 @@
 </mk-error>
 
 <mk-troubleshooter>
-	<h1><i class="fa fa-wrench"></i>%i18n:common.tags.mk-error.troubleshooter.title%</h1>
+	<h1>%fa:wrench%%i18n:common.tags.mk-error.troubleshooter.title%</h1>
 	<div>
-		<p data-wip={ network == null }><i if={ network != null } class="fa fa-{ network ? 'check' : 'times' }"></i>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis if={ network == null }/></p>
-		<p if={ network == true } data-wip={ internet == null }><i if={ internet != null } class="fa fa-{ internet ? 'check' : 'times' }"></i>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis if={ internet == null }/></p>
-		<p if={ internet == true } data-wip={ server == null }><i if={ server != null } class="fa fa-{ server ? 'check' : 'times' }"></i>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis if={ server == null }/></p>
+		<p data-wip={ network == null }><virtual if={ network != null }><virtual if={ network }>%fa:check%</virtual><virtual if={ !network }>%fa:times%</virtual></virtual>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis if={ network == null }/></p>
+		<p if={ network == true } data-wip={ internet == null }><virtual if={ internet != null }><virtual if={ internet }>%fa:check%</virtual><virtual if={ !internet }>%fa:times%</virtual></virtual>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis if={ internet == null }/></p>
+		<p if={ internet == true } data-wip={ server == null }><virtual if={ server != null }><virtual if={ server }>%fa:check%</virtual><virtual if={ !server }>%fa:times%</virtual></virtual>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis if={ server == null }/></p>
 	</div>
 	<p if={ !end }>%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p>
-	<p if={ network === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>
-	<p if={ internet === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p>
-	<p if={ server === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p>
-	<p if={ server === true } class="success"><b><i class="fa fa-info-circle"></i>%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p>
+	<p if={ network === false }><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>
+	<p if={ internet === false }><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p>
+	<p if={ server === false }><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p>
+	<p if={ server === true } class="success"><b>%fa:info-circle%%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p>
 
 	<style>
 		:scope
@@ -125,7 +125,7 @@
 				color #444
 				border-bottom solid 1px #eee
 
-				> i
+				> [data-fa]
 					margin-right 0.25em
 
 			> div
@@ -140,13 +140,13 @@
 					&[data-wip]
 						color #888
 
-					> i
+					> [data-fa]
 						margin-right 0.25em
 
-						&.fa-times
+						&.times
 							color #e03524
 
-						&.fa-check
+						&.check
 							color #84c32f
 
 			> p
@@ -157,7 +157,7 @@
 				border-top solid 1px #eee
 
 				> b
-					> i
+					> [data-fa]
 						margin-right 0.25em
 
 				&.success
diff --git a/src/web/app/common/tags/file-type-icon.tag b/src/web/app/common/tags/file-type-icon.tag
index 55c473bcd4..dba2ae44d6 100644
--- a/src/web/app/common/tags/file-type-icon.tag
+++ b/src/web/app/common/tags/file-type-icon.tag
@@ -1,5 +1,5 @@
 <mk-file-type-icon>
-	<i class="fa fa-file-image-o" if={ kind == 'image' }></i>
+	<virtual if={ kind == 'image' }>%fa:file-image%</virtual>
 	<style>
 		:scope
 			display inline
diff --git a/src/web/app/common/tags/messaging/form.tag b/src/web/app/common/tags/messaging/form.tag
index a839bad7fa..9a687aebf2 100644
--- a/src/web/app/common/tags/messaging/form.tag
+++ b/src/web/app/common/tags/messaging/form.tag
@@ -3,13 +3,13 @@
 	<div class="files"></div>
 	<mk-uploader ref="uploader"/>
 	<button class="send" onclick={ send } disabled={ sending } title="%i18n:common.send%">
-		<i class="fa fa-paper-plane" if={ !sending }></i><i class="fa fa-spinner fa-spin" if={ sending }></i>
+		<virtual if={ !sending }>%fa:paper-plane%</virtual><virtual if={ sending }>%fa:spinner .spin%</virtual>
 	</button>
 	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
-		<i class="fa fa-upload"></i>
+		%fa:upload%
 	</button>
 	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
-		<i class="fa fa-folder-open"></i>
+		%fa:folder-open%
 	</button>
 	<input name="file" type="file" accept="image/*"/>
 	<style>
diff --git a/src/web/app/common/tags/messaging/index.tag b/src/web/app/common/tags/messaging/index.tag
index aebcec9d8d..8987ea72eb 100644
--- a/src/web/app/common/tags/messaging/index.tag
+++ b/src/web/app/common/tags/messaging/index.tag
@@ -1,7 +1,7 @@
 <mk-messaging data-compact={ opts.compact }>
 	<div class="search" if={ !opts.compact }>
 		<div class="form">
-			<label for="search-input"><i class="fa fa-search"></i></label>
+			<label for="search-input">%fa:search%</label>
 			<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
 		</div>
 		<div class="result">
@@ -32,7 +32,7 @@
 		</virtual>
 	</div>
 	<p class="no-history" if={ !fetching && history.length == 0 }>%i18n:common.tags.mk-messaging.no-history%</p>
-	<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -87,7 +87,7 @@
 						width 38px
 						pointer-events none
 
-						> i
+						> [data-fa]
 							display block
 							position absolute
 							top 0
@@ -189,7 +189,6 @@
 								font-weight normal
 								color rgba(0, 0, 0, 0.3)
 
-
 			> .history
 
 				> a
@@ -304,7 +303,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			// TODO: element base media query
diff --git a/src/web/app/common/tags/messaging/message.tag b/src/web/app/common/tags/messaging/message.tag
index ea1ea2310b..354022d7df 100644
--- a/src/web/app/common/tags/messaging/message.tag
+++ b/src/web/app/common/tags/messaging/message.tag
@@ -15,7 +15,7 @@
 			</div>
 		</div>
 		<footer>
-			<mk-time time={ message.created_at }/><i class="fa fa-pencil is-edited" if={ message.is_edited }></i>
+			<mk-time time={ message.created_at }/><virtual if={ message.is_edited }>%fa:pencil-alt%</virtual>
 		</footer>
 	</div>
 	<style>
@@ -147,7 +147,7 @@
 					font-size 10px
 					color rgba(0, 0, 0, 0.4)
 
-					> .is-edited
+					> [data-fa]
 						margin-left 4px
 
 			&:not([data-is-me='true'])
diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag
index a930327841..c571c4b905 100644
--- a/src/web/app/common/tags/messaging/room.tag
+++ b/src/web/app/common/tags/messaging/room.tag
@@ -1,10 +1,10 @@
 <mk-messaging-room>
 	<div class="stream">
-		<p class="init" if={ init }><i class="fa fa-spinner fa-spin"></i>%i18n:common.loading%</p>
-		<p class="empty" if={ !init && messages.length == 0 }><i class="fa fa-info-circle"></i>%i18n:common.tags.mk-messaging-room.empty%</p>
-		<p class="no-history" if={ !init && messages.length > 0 && !moreMessagesIsInStock }><i class="fa fa-flag"></i>%i18n:common.tags.mk-messaging-room.no-history%</p>
+		<p class="init" if={ init }>%fa:spinner .spin%%i18n:common.loading%</p>
+		<p class="empty" if={ !init && messages.length == 0 }>%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
+		<p class="no-history" if={ !init && messages.length > 0 && !moreMessagesIsInStock }>%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
 		<button class="more { fetching: fetchingMoreMessages }" if={ moreMessagesIsInStock } onclick={ fetchMoreMessages } disabled={ fetchingMoreMessages }>
-			<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreMessages }></i>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
+			<virtual if={ fetchingMoreMessages }>%fa:spinner .pluse .fw%</virtual>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
 		</button>
 		<virtual each={ message, i in messages }>
 			<mk-messaging-message message={ message }/>
@@ -32,7 +32,7 @@
 					font-size 0.8em
 					color rgba(0, 0, 0, 0.4)
 
-					i
+					[data-fa]
 						margin-right 4px
 
 				> .empty
@@ -43,7 +43,7 @@
 					font-size 0.8em
 					color rgba(0, 0, 0, 0.4)
 
-					i
+					[data-fa]
 						margin-right 4px
 
 				> .no-history
@@ -54,7 +54,7 @@
 					font-size 0.8em
 					color rgba(0, 0, 0, 0.4)
 
-					i
+					[data-fa]
 						margin-right 4px
 
 				> .more
@@ -75,7 +75,7 @@
 					&.fetching
 						cursor wait
 
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				> .message
@@ -141,7 +141,7 @@
 						border-radius 16px
 						transition opacity 1s ease
 
-						> i
+						> [data-fa]
 							position absolute
 							top 0
 							left 10px
@@ -291,7 +291,7 @@
 
 		this.notify = message => {
 			const n = document.createElement('p');
-			n.innerHTML = '<i class="fa fa-arrow-circle-down"></i>' + message;
+			n.innerHTML = '%fa:arrow-circle-down%' + message;
 			n.onclick = () => {
 				this.scrollToBottom();
 				n.parentNode.removeChild(n);
diff --git a/src/web/app/common/tags/nav-links.tag b/src/web/app/common/tags/nav-links.tag
index 6043f128fa..3994aa464c 100644
--- a/src/web/app/common/tags/nav-links.tag
+++ b/src/web/app/common/tags/nav-links.tag
@@ -1,5 +1,5 @@
 <mk-nav-links>
-	<a href={ _ABOUT_URL_ }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
+	<a href={ _ABOUT_URL_ }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:twitter%</a>
 	<style>
 		:scope
 			display inline
diff --git a/src/web/app/common/tags/poll-editor.tag b/src/web/app/common/tags/poll-editor.tag
index 0ee224f33c..e79209e9b4 100644
--- a/src/web/app/common/tags/poll-editor.tag
+++ b/src/web/app/common/tags/poll-editor.tag
@@ -1,18 +1,18 @@
 <mk-poll-editor>
 	<p class="caution" if={ choices.length < 2 }>
-		<i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-poll-editor.no-only-one-choice%
+		%fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
 	</p>
 	<ul ref="choices">
 		<li each={ choice, i in choices }>
 			<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
 			<button onclick={ remove.bind(null, i) } title="%i18n:common.tags.mk-poll-editor.remove%">
-				<i class="fa fa-times"></i>
+				%fa:times%
 			</button>
 		</li>
 	</ul>
 	<button class="add" if={ choices.length < 10 } onclick={ add }>%i18n:common.tags.mk-poll-editor.add%</button>
 	<button class="destroy" onclick={ destroy } title="%i18n:common.tags.mk-poll-editor.destroy%">
-		<i class="fa fa-times"></i>
+		%fa:times%
 	</button>
 	<style>
 		:scope
@@ -24,7 +24,7 @@
 				font-size 0.8em
 				color #f00
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> ul
diff --git a/src/web/app/common/tags/poll.tag b/src/web/app/common/tags/poll.tag
index 52614cf709..32542418aa 100644
--- a/src/web/app/common/tags/poll.tag
+++ b/src/web/app/common/tags/poll.tag
@@ -3,7 +3,7 @@
 		<li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted } title={ !parent.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', text) : '' }>
 			<div class="backdrop" style={ 'width:' + (parent.result ? (votes / parent.total * 100) : 0) + '%' }></div>
 			<span>
-				<i class="fa fa-check" if={ is_voted }></i>
+				<virtual if={ is_voted }>%fa:check%</virtual>
 				{ text }
 				<span class="votes" if={ parent.result }>({ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', votes) })</span>
 			</span>
diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag
index b9bd859851..03afd72326 100644
--- a/src/web/app/common/tags/signin-history.tag
+++ b/src/web/app/common/tags/signin-history.tag
@@ -2,7 +2,11 @@
 	<div class="records" if={ history.length != 0 }>
 		<div each={ history }>
 			<mk-time time={ created_at }/>
-			<header><i class="fa fa-check" if={ success }></i><i class="fa fa-times" if={ !success }></i><span class="ip">{ ip }</span></header>
+			<header>
+				<virtual if={ success }>%fa:check%</virtual>
+				<virtual if={ !success }>%fa:times%</virtual>
+				<span class="ip">{ ip }</span>
+			</header>
 			<pre><code>{ JSON.stringify(headers, null, '    ') }</code></pre>
 		</div>
 	</div>
@@ -17,13 +21,13 @@
 
 					> header
 
-						> i
+						> [data-fa]
 							margin-right 8px
 
-							&.fa-check
+							&.check
 								color #0fda82
 
-							&.fa-times
+							&.times
 								color #ff3100
 
 						> .ip
diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag
index d369c0621c..0aac329916 100644
--- a/src/web/app/common/tags/signin.tag
+++ b/src/web/app/common/tags/signin.tag
@@ -1,10 +1,10 @@
 <mk-signin>
 	<form class={ signing: signing } onsubmit={ onsubmit }>
 		<label class="user-name">
-			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/><i class="fa fa-at"></i>
+			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/>%fa:at%
 		</label>
 		<label class="password">
-			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/><i class="fa fa-lock"></i>
+			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/>%fa:lock%
 		</label>
 		<button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button>
 	</form>
diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag
index 6fec46ff31..67b8796a6e 100644
--- a/src/web/app/common/tags/signup.tag
+++ b/src/web/app/common/tags/signup.tag
@@ -1,35 +1,35 @@
 <mk-signup>
 	<form onsubmit={ onsubmit } autocomplete="off">
 		<label class="username">
-			<p class="caption"><i class="fa fa-at"></i>%i18n:common.tags.mk-signup.username%</p>
+			<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
 			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup={ onChangeUsername }/>
 			<p class="profile-page-url-preview" if={ refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange' }>{ _URL_ + '/' + refs.username.value }</p>
-			<p class="info" if={ usernameState == 'wait' } style="color:#999"><i class="fa fa-fw fa-spinner fa-pulse"></i>%i18n:common.tags.mk-signup.checking%</p>
-			<p class="info" if={ usernameState == 'ok' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.available%</p>
-			<p class="info" if={ usernameState == 'unavailable' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.unavailable%</p>
-			<p class="info" if={ usernameState == 'error' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.error%</p>
-			<p class="info" if={ usernameState == 'invalid-format' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.invalid-format%</p>
-			<p class="info" if={ usernameState == 'min-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.too-short%</p>
-			<p class="info" if={ usernameState == 'max-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.too-long%</p>
+			<p class="info" if={ usernameState == 'wait' } style="color:#999">%fa:spinner .pluse .fw%%i18n:common.tags.mk-signup.checking%</p>
+			<p class="info" if={ usernameState == 'ok' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.available%</p>
+			<p class="info" if={ usernameState == 'unavailable' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.unavailable%</p>
+			<p class="info" if={ usernameState == 'error' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.error%</p>
+			<p class="info" if={ usernameState == 'invalid-format' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.invalid-format%</p>
+			<p class="info" if={ usernameState == 'min-range' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-short%</p>
+			<p class="info" if={ usernameState == 'max-range' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-long%</p>
 		</label>
 		<label class="password">
-			<p class="caption"><i class="fa fa-lock"></i>%i18n:common.tags.mk-signup.password%</p>
+			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%</p>
 			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePassword }/>
 			<div class="meter" if={ passwordStrength != '' } data-strength={ passwordStrength }>
 				<div class="value" ref="passwordMetar"></div>
 			</div>
-			<p class="info" if={ passwordStrength == 'low' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.weak-password%</p>
-			<p class="info" if={ passwordStrength == 'medium' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.normal-password%</p>
-			<p class="info" if={ passwordStrength == 'high' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.strong-password%</p>
+			<p class="info" if={ passwordStrength == 'low' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.weak-password%</p>
+			<p class="info" if={ passwordStrength == 'medium' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.normal-password%</p>
+			<p class="info" if={ passwordStrength == 'high' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.strong-password%</p>
 		</label>
 		<label class="retype-password">
-			<p class="caption"><i class="fa fa-lock"></i>%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
+			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
 			<input ref="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePasswordRetype }/>
-			<p class="info" if={ passwordRetypeState == 'match' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.password-matched%</p>
-			<p class="info" if={ passwordRetypeState == 'not-match' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.password-not-matched%</p>
+			<p class="info" if={ passwordRetypeState == 'match' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
+			<p class="info" if={ passwordRetypeState == 'not-match' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
 		</label>
 		<label class="recaptcha">
-			<p class="caption"><i class="fa fa-toggle-on" if={ recaptchaed }></i><i class="fa fa-toggle-off" if={ !recaptchaed }></i>%i18n:common.tags.mk-signup.recaptcha%</p>
+			<p class="caption"><virtual if={ recaptchaed }>%fa:toggle-on%</virtual><virtual if={ !recaptchaed }>%fa:toggle-off%</virtual>%i18n:common.tags.mk-signup.recaptcha%</p>
 			<div if={ recaptcha } class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div>
 		</label>
 		<label class="agree-tou">
@@ -55,7 +55,7 @@
 						color #828888
 						font-size 0.95em
 
-						> i
+						> [data-fa]
 							margin-right 0.25em
 							color #96adac
 
@@ -64,7 +64,7 @@
 						margin 4px 0
 						font-size 0.8em
 
-						> i
+						> [data-fa]
 							margin-right 0.3em
 
 					&.username
diff --git a/src/web/app/common/tags/stream-indicator.tag b/src/web/app/common/tags/stream-indicator.tag
index 0d74985c88..73c27fe13e 100644
--- a/src/web/app/common/tags/stream-indicator.tag
+++ b/src/web/app/common/tags/stream-indicator.tag
@@ -1,14 +1,14 @@
 <mk-stream-indicator>
 	<p if={ connection.state == 'initializing' }>
-		<i class="fa fa-spinner fa-spin"></i>
+		%fa:spinner .spin%
 		<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
 	</p>
 	<p if={ connection.state == 'reconnecting' }>
-		<i class="fa fa-spinner fa-spin"></i>
+		%fa:spinner .spin%
 		<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
 	</p>
 	<p if={ connection.state == 'connected' }>
-		<i class="fa fa-check"></i>
+		%fa:check%
 		<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
 	</p>
 	<style>
@@ -30,7 +30,7 @@
 				display block
 				margin 0
 
-				> i
+				> [data-fa]
 					margin-right 0.25em
 
 	</style>
diff --git a/src/web/app/common/tags/uploader.tag b/src/web/app/common/tags/uploader.tag
index 1453391696..ce026bf05e 100644
--- a/src/web/app/common/tags/uploader.tag
+++ b/src/web/app/common/tags/uploader.tag
@@ -2,7 +2,7 @@
 	<ol if={ uploads.length > 0 }>
 		<li each={ uploads }>
 			<div class="img" style="background-image: url({ img })"></div>
-			<p class="name"><i class="fa fa-spinner fa-pulse"></i>{ name }</p>
+			<p class="name">%fa:spinner .pluse%{ name }</p>
 			<p class="status"><span class="initing" if={ progress == undefined }>%i18n:common.tags.mk-uploader.waiting%<mk-ellipsis/></span><span class="kb" if={ progress != undefined }>{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" if={ progress != undefined }>{ Math.floor((progress.value / progress.max) * 100) }</span></p>
 			<progress if={ progress != undefined && progress.value != progress.max } value={ progress.value } max={ progress.max }></progress>
 			<div class="progress initing" if={ progress == undefined }></div>
@@ -60,7 +60,7 @@
 						text-overflow ellipsis
 						overflow hidden
 
-						> i
+						> [data-fa]
 							margin-right 4px
 
 					> .status
diff --git a/src/web/app/desktop/scripts/fuck-ad-block.ts b/src/web/app/desktop/scripts/fuck-ad-block.ts
index 8be3c80ea1..ddeb600b6e 100644
--- a/src/web/app/desktop/scripts/fuck-ad-block.ts
+++ b/src/web/app/desktop/scripts/fuck-ad-block.ts
@@ -12,7 +12,7 @@ export default () => {
 };
 
 function adBlockDetected() {
-	dialog('<i class="fa fa-exclamation-triangle"></i>広告ブロッカーを無効にしてください',
+	dialog('%fa:exclamation-triangle%広告ブロッカーを無効にしてください',
 		'<strong>Misskeyは広告を掲載していません</strong>が、広告をブロックする機能が有効だと一部の機能が利用できなかったり、不具合が発生する場合があります。',
 	[{
 		text: 'OK'
diff --git a/src/web/app/desktop/scripts/not-implemented-exception.ts b/src/web/app/desktop/scripts/not-implemented-exception.ts
index dd00c7662f..b4660fa62f 100644
--- a/src/web/app/desktop/scripts/not-implemented-exception.ts
+++ b/src/web/app/desktop/scripts/not-implemented-exception.ts
@@ -1,7 +1,7 @@
 import dialog from './dialog';
 
 export default () => {
-	dialog('<i class="fa fa-exclamation-triangle"></i>Not implemented yet',
+	dialog('%fa:exclamation-triangle%Not implemented yet',
 		'要求された操作は実装されていません。<br>→<a href="https://github.com/syuilo/misskey" target="_blank">Misskeyの開発に参加する</a>', [{
 		text: 'OK'
 	}]);
diff --git a/src/web/app/desktop/scripts/update-avatar.ts b/src/web/app/desktop/scripts/update-avatar.ts
index 356f4e6f9d..fea5db80bb 100644
--- a/src/web/app/desktop/scripts/update-avatar.ts
+++ b/src/web/app/desktop/scripts/update-avatar.ts
@@ -63,7 +63,7 @@ export default (I, cb, file = null) => {
 		api(I, 'i/update', {
 			avatar_id: file.id
 		}).then(i => {
-			dialog('<i class="fa fa-info-circle"></i>アバターを更新しました',
+			dialog('%fa:info-circle%アバターを更新しました',
 				'新しいアバターが反映されるまで時間がかかる場合があります。',
 			[{
 				text: 'わかった'
@@ -78,7 +78,7 @@ export default (I, cb, file = null) => {
 	} else {
 		const browser = (riot as any).mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), {
 			multiple: false,
-			title: '<i class="fa fa-picture-o"></i>アバターにする画像を選択'
+			title: '%fa:image%アバターにする画像を選択'
 		})[0];
 
 		browser.one('selected', file => {
diff --git a/src/web/app/desktop/scripts/update-banner.ts b/src/web/app/desktop/scripts/update-banner.ts
index 1996b75642..325775622d 100644
--- a/src/web/app/desktop/scripts/update-banner.ts
+++ b/src/web/app/desktop/scripts/update-banner.ts
@@ -63,7 +63,7 @@ export default (I, cb, file = null) => {
 		api(I, 'i/update', {
 			banner_id: file.id
 		}).then(i => {
-			dialog('<i class="fa fa-info-circle"></i>バナーを更新しました',
+			dialog('%fa:info-circle%バナーを更新しました',
 				'新しいバナーが反映されるまで時間がかかる場合があります。',
 			[{
 				text: 'わかりました。'
@@ -78,7 +78,7 @@ export default (I, cb, file = null) => {
 	} else {
 		const browser = (riot as any).mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), {
 			multiple: false,
-			title: '<i class="fa fa-picture-o"></i>バナーにする画像を選択'
+			title: '%fa:image%バナーにする画像を選択'
 		})[0];
 
 		browser.one('selected', file => {
diff --git a/src/web/app/desktop/tags/big-follow-button.tag b/src/web/app/desktop/tags/big-follow-button.tag
index 8897748ae1..cd14d6f4d9 100644
--- a/src/web/app/desktop/tags/big-follow-button.tag
+++ b/src/web/app/desktop/tags/big-follow-button.tag
@@ -1,6 +1,10 @@
 <mk-big-follow-button>
-	<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }><span if={ !wait && user.is_following }><i class="fa fa-minus"></i>フォロー解除</span><span if={ !wait && !user.is_following }><i class="fa fa-plus"></i>フォロー</span><i class="fa fa-spinner fa-pulse fa-fw" if={ wait }></i></button>
-	<div class="init" if={ init }><i class="fa fa-spinner fa-pulse fa-fw"></i></div>
+	<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
+		<span if={ !wait && user.is_following }>%fa:minus%フォロー解除</span>
+		<span if={ !wait && !user.is_following }>%fa:plus%フォロー</span>
+		<virtual if={ wait }>%fa:spinner .pluse .fw%</virtual>
+	</button>
+	<div class="init" if={ init }>%fa:spinner .pluse .fw%</div>
 	<style>
 		:scope
 			display block
diff --git a/src/web/app/desktop/tags/contextmenu.tag b/src/web/app/desktop/tags/contextmenu.tag
index c862f3f609..2a3b2a7726 100644
--- a/src/web/app/desktop/tags/contextmenu.tag
+++ b/src/web/app/desktop/tags/contextmenu.tag
@@ -36,7 +36,7 @@
 					> p
 						cursor default
 
-						> i:last-child
+						> [data-fa]:last-child
 							position absolute
 							top 0
 							right 8px
diff --git a/src/web/app/desktop/tags/crop-window.tag b/src/web/app/desktop/tags/crop-window.tag
index 9d984d6e57..4845b669d2 100644
--- a/src/web/app/desktop/tags/crop-window.tag
+++ b/src/web/app/desktop/tags/crop-window.tag
@@ -1,12 +1,14 @@
 <mk-crop-window>
-	<mk-window ref="window" is-modal={ true } width={ '800px' }><yield to="header"><i class="fa fa-crop"></i>{ parent.title }</yield>
-<yield to="content">
-		<div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div>
-		<div class="action">
-			<button class="skip" onclick={ parent.skip }>クロップをスキップ</button>
-			<button class="cancel" onclick={ parent.cancel }>キャンセル</button>
-			<button class="ok" onclick={ parent.ok }>決定</button>
-		</div></yield>
+	<mk-window ref="window" is-modal={ true } width={ '800px' }>
+		<yield to="header">%fa:crop%{ parent.title }</yield>
+		<yield to="content">
+			<div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div>
+			<div class="action">
+				<button class="skip" onclick={ parent.skip }>クロップをスキップ</button>
+				<button class="cancel" onclick={ parent.cancel }>キャンセル</button>
+				<button class="ok" onclick={ parent.ok }>決定</button>
+			</div>
+		</yield>
 	</mk-window>
 	<style>
 		:scope
@@ -14,7 +16,7 @@
 
 			> mk-window
 				[data-yield='header']
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				[data-yield='content']
diff --git a/src/web/app/desktop/tags/drive/base-contextmenu.tag b/src/web/app/desktop/tags/drive/base-contextmenu.tag
index 8b01de9248..14ce83bdc8 100644
--- a/src/web/app/desktop/tags/drive/base-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/base-contextmenu.tag
@@ -2,13 +2,13 @@
 	<mk-contextmenu ref="ctx">
 		<ul>
 			<li onclick={ parent.createFolder }>
-				<p><i class="fa fa-folder-o"></i>%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
+				<p>%fa:folder-o%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
 			</li>
 			<li onclick={ parent.upload }>
-				<p><i class="fa fa-upload"></i>%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
+				<p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
 			</li>
 			<li onclick={ parent.urlUpload }>
-				<p><i class="fa fa-cloud-upload"></i>%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
+				<p>%fa:cloud-upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
 			</li>
 		</ul>
 	</mk-contextmenu>
diff --git a/src/web/app/desktop/tags/drive/browser-window.tag b/src/web/app/desktop/tags/drive/browser-window.tag
index 7cd24fc4ad..57042f0163 100644
--- a/src/web/app/desktop/tags/drive/browser-window.tag
+++ b/src/web/app/desktop/tags/drive/browser-window.tag
@@ -2,7 +2,7 @@
 	<mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' } popout={ popout }>
 		<yield to="header">
 			<p class="info" if={ parent.usage }><b>{ parent.usage.toFixed(1) }%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
-			<i class="fa fa-cloud"></i>%i18n:desktop.tags.mk-drive-browser-window.drive%
+			%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%
 		</yield>
 		<yield to="content">
 			<mk-drive-browser multiple={ true } folder={ parent.folder } ref="browser"/>
@@ -19,7 +19,7 @@
 						margin 0
 						font-size 80%
 
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				[data-yield='content']
diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag
index 6b756b9952..901daabfd8 100644
--- a/src/web/app/desktop/tags/drive/browser.tag
+++ b/src/web/app/desktop/tags/drive/browser.tag
@@ -3,10 +3,10 @@
 		<div class="path" oncontextmenu={ pathOncontextmenu }>
 			<mk-drive-browser-nav-folder class={ current: folder == null } folder={ null }/>
 			<virtual each={ folder in hierarchyFolders }>
-				<span class="separator"><i class="fa fa-angle-right"></i></span>
+				<span class="separator">%fa:angle-right%</span>
 				<mk-drive-browser-nav-folder folder={ folder }/>
 			</virtual>
-			<span class="separator" if={ folder != null }><i class="fa fa-angle-right"></i></span>
+			<span class="separator" if={ folder != null }>%fa:angle-right%</span>
 			<span class="folder current" if={ folder != null }>{ folder.name }</span>
 		</div>
 		<input class="search" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-drive-browser.search%"/>
@@ -100,7 +100,7 @@
 							opacity 0.5
 							cursor default
 
-							> i
+							> [data-fa]
 								margin 0
 
 				> .search
@@ -450,7 +450,7 @@
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							dialog('<i class="fa fa-exclamation-triangle"></i>%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
+							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
 								'%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%', [{
 								text: '%i18n:common.ok%'
 							}]);
@@ -492,7 +492,7 @@
 					folder_id: this.folder ? this.folder.id : undefined
 				});
 
-				dialog('<i class="fa fa-check"></i>%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
+				dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
 					'%i18n:desktop.tags.mk-drive-browser.may-take-time%', [{
 					text: '%i18n:common.ok%'
 				}]);
diff --git a/src/web/app/desktop/tags/drive/file-contextmenu.tag b/src/web/app/desktop/tags/drive/file-contextmenu.tag
index 0ea72333fb..54b95923d2 100644
--- a/src/web/app/desktop/tags/drive/file-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/file-contextmenu.tag
@@ -2,19 +2,19 @@
 	<mk-contextmenu ref="ctx">
 		<ul>
 			<li onclick={ parent.rename }>
-				<p><i class="fa fa-i-cursor"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p>
+				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p>
 			</li>
 			<li onclick={ parent.copyUrl }>
-				<p><i class="fa fa-link"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p>
+				<p>%fa:link%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p>
 			</li>
-			<li><a href={ parent.file.url + '?download' } download={ parent.file.name } onclick={ parent.download }><i class="fa fa-download"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
+			<li><a href={ parent.file.url + '?download' } download={ parent.file.name } onclick={ parent.download }>%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
 			<li class="separator"></li>
 			<li onclick={ parent.delete }>
-				<p><i class="fa fa-trash-o"></i>%i18n:common.delete%</p>
+				<p>%fa:trash-o%%i18n:common.delete%</p>
 			</li>
 			<li class="separator"></li>
 			<li class="has-child">
-				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%<i class="fa fa-caret-right"></i></p>
+				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%%fa:caret-right%</p>
 				<ul>
 					<li onclick={ parent.setAvatar }>
 						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%</p>
@@ -25,7 +25,7 @@
 				</ul>
 			</li>
 			<li class="has-child">
-				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...<i class="fa fa-caret-right"></i></p>
+				<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...%fa:caret-right%</p>
 				<ul>
 					<li onclick={ parent.addApp }>
 						<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...</p>
@@ -72,7 +72,7 @@
 		this.copyUrl = () => {
 			copyToClipboard(this.file.url);
 			this.refs.ctx.close();
-			dialog('<i class="fa fa-check"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
+			dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
 				'%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%', [{
 				text: '%i18n:common.ok%'
 			}]);
diff --git a/src/web/app/desktop/tags/drive/folder-contextmenu.tag b/src/web/app/desktop/tags/drive/folder-contextmenu.tag
index ce95ccfb1d..e5ad7beb2f 100644
--- a/src/web/app/desktop/tags/drive/folder-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/folder-contextmenu.tag
@@ -2,18 +2,18 @@
 	<mk-contextmenu ref="ctx">
 		<ul>
 			<li onclick={ parent.move }>
-				<p><i class="fa fa-arrow-right"></i>%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
+				<p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
 			</li>
 			<li onclick={ parent.newWindow }>
-				<p><i class="fa fa-share-square-o"></i>%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
+				<p>%fa:share-square-o%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
 			</li>
 			<li class="separator"></li>
 			<li onclick={ parent.rename }>
-				<p><i class="fa fa-i-cursor"></i>%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p>
+				<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p>
 			</li>
 			<li class="separator"></li>
 			<li onclick={ parent.delete }>
-				<p><i class="fa fa-trash-o"></i>%i18n:common.delete%</p>
+				<p>%fa:trash-o%%i18n:common.delete%</p>
 			</li>
 		</ul>
 	</mk-contextmenu>
diff --git a/src/web/app/desktop/tags/drive/folder.tag b/src/web/app/desktop/tags/drive/folder.tag
index 6d2d196258..d4b57183a5 100644
--- a/src/web/app/desktop/tags/drive/folder.tag
+++ b/src/web/app/desktop/tags/drive/folder.tag
@@ -1,5 +1,5 @@
 <mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } onclick={ onclick } onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
-	<p class="name"><i class="fa fa-fw { fa-folder-o: !hover, fa-folder-open-o: hover }"></i>{ folder.name }</p>
+	<p class="name"><virtual if={ hover }>%fa:folder-open .fw%</virtual><virtual if={ !hover }>%fa:folder .fw%</virtual>{ folder.name }</p>
 	<style>
 		:scope
 			display block
@@ -41,7 +41,7 @@
 				font-size 0.9em
 				color darken($theme-color, 30%)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 				  margin-left 2px
 					text-align left
@@ -143,7 +143,7 @@
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							dialog('<i class="fa fa-exclamation-triangle"></i>%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
+							dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
 								'%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%', [{
 								text: '%i18n:common.ok%'
 							}]);
diff --git a/src/web/app/desktop/tags/drive/nav-folder.tag b/src/web/app/desktop/tags/drive/nav-folder.tag
index 0a9421353c..43a648b52b 100644
--- a/src/web/app/desktop/tags/drive/nav-folder.tag
+++ b/src/web/app/desktop/tags/drive/nav-folder.tag
@@ -1,4 +1,5 @@
-<mk-drive-browser-nav-folder data-draghover={ draghover } onclick={ onclick } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }><i class="fa fa-cloud" if={ folder == null }></i><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
+<mk-drive-browser-nav-folder data-draghover={ draghover } onclick={ onclick } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
+	<virtual if={ folder == null }>%fa:cloud%</virtual><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
 	<style>
 		:scope
 			&[data-draghover]
diff --git a/src/web/app/desktop/tags/follow-button.tag b/src/web/app/desktop/tags/follow-button.tag
index a1cbc191d8..d748a75785 100644
--- a/src/web/app/desktop/tags/follow-button.tag
+++ b/src/web/app/desktop/tags/follow-button.tag
@@ -1,6 +1,10 @@
 <mk-follow-button>
-	<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }><i class="fa fa-minus" if={ !wait && user.is_following }></i><i class="fa fa-plus" if={ !wait && !user.is_following }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ wait }></i></button>
-	<div class="init" if={ init }><i class="fa fa-spinner fa-pulse fa-fw"></i></div>
+	<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
+		<virtual if={ !wait && user.is_following }>%fa:minus%</virtual>
+		<virtual if={ !wait && !user.is_following }>%fa:plus%</virtual>
+		<virtual if={ wait }>%fa:spinner .pluse .fw%</virtual>
+	</button>
+	<div class="init" if={ init }>%fa:spinner .pluse .fw%</div>
 	<style>
 		:scope
 			display block
diff --git a/src/web/app/desktop/tags/following-setuper.tag b/src/web/app/desktop/tags/following-setuper.tag
index 3197e93616..4095c18c7d 100644
--- a/src/web/app/desktop/tags/following-setuper.tag
+++ b/src/web/app/desktop/tags/following-setuper.tag
@@ -9,9 +9,9 @@
 		</div>
 	</div>
 	<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
-	<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
+	<p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%読み込んでいます<mk-ellipsis/></p>
 	<a class="refresh" onclick={ refresh }>もっと見る</a>
-	<button class="close" onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
+	<button class="close" onclick={ close } title="閉じる">%fa:times%</button>
 	<style>
 		:scope
 			display block
@@ -85,7 +85,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> .refresh
@@ -116,7 +116,7 @@
 				&:active
 					color #222
 
-				> i
+				> [data-fa]
 					padding 14px
 
 	</style>
diff --git a/src/web/app/desktop/tags/home-widgets/access-log.tag b/src/web/app/desktop/tags/home-widgets/access-log.tag
index 44f1cadf4b..91a71022a7 100644
--- a/src/web/app/desktop/tags/home-widgets/access-log.tag
+++ b/src/web/app/desktop/tags/home-widgets/access-log.tag
@@ -1,6 +1,6 @@
 <mk-access-log-home-widget>
 	<virtual if={ data.design == 0 }>
-		<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
+		<p class="title">%fa:server%%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
 	</virtual>
 	<div ref="log">
 		<p each={ requests }>
@@ -27,7 +27,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> div
diff --git a/src/web/app/desktop/tags/home-widgets/channel.tag b/src/web/app/desktop/tags/home-widgets/channel.tag
index f22a5f76ef..545bc38acf 100644
--- a/src/web/app/desktop/tags/home-widgets/channel.tag
+++ b/src/web/app/desktop/tags/home-widgets/channel.tag
@@ -1,9 +1,9 @@
 <mk-channel-home-widget>
 	<virtual if={ !data.compact }>
-		<p class="title"><i class="fa fa-television"></i>{
+		<p class="title">%fa:tv%{
 			channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
 		}</p>
-		<button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%"><i class="fa fa-cog"></i></button>
+		<button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
 	</virtual>
 	<p class="get-started" if={ this.data.channel == null }>%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
 	<mk-channel ref="channel" show={ this.data.channel }/>
@@ -25,7 +25,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
diff --git a/src/web/app/desktop/tags/home-widgets/donation.tag b/src/web/app/desktop/tags/home-widgets/donation.tag
index 99ded1b5d4..a51a7bebbb 100644
--- a/src/web/app/desktop/tags/home-widgets/donation.tag
+++ b/src/web/app/desktop/tags/home-widgets/donation.tag
@@ -1,6 +1,6 @@
 <mk-donation-home-widget>
 	<article>
-		<h1><i class="fa fa-heart"></i>%i18n:desktop.tags.mk-donation-home-widget.title%</h1>
+		<h1>%fa:heart%%i18n:desktop.tags.mk-donation-home-widget.title%</h1>
 		<p>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr(0, '%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('{'))}<a href="/syuilo" data-user-preview="@syuilo">@syuilo</a>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr('%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('}') + 1)}</p>
 	</article>
 	<style>
@@ -18,7 +18,7 @@
 					font-size 1em
 					color #888
 
-					> i
+					> [data-fa]
 						margin-right 0.25em
 
 				> p
diff --git a/src/web/app/desktop/tags/home-widgets/mentions.tag b/src/web/app/desktop/tags/home-widgets/mentions.tag
index 257afc4a8c..265b05bb0a 100644
--- a/src/web/app/desktop/tags/home-widgets/mentions.tag
+++ b/src/web/app/desktop/tags/home-widgets/mentions.tag
@@ -3,8 +3,13 @@
 	<div class="loading" if={ isLoading }>
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" if={ isEmpty }><i class="fa fa-comments-o"></i><span if={ mode == 'all' }>あなた宛ての投稿はありません。</span><span if={ mode == 'following' }>あなたがフォローしているユーザーからの言及はありません。</span></p>
-	<mk-timeline ref="timeline"><yield to="footer"><i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i></yield/>
+	<p class="empty" if={ isEmpty }>%fa:R comments%<span if={ mode == 'all' }>あなた宛ての投稿はありません。</span><span if={ mode == 'following' }>あなたがフォローしているユーザーからの言及はありません。</span></p>
+	<mk-timeline ref="timeline">
+		<yield to="footer">
+			<virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
+			<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
+		</yield/>
+	</mk-timeline>
 	<style>
 		:scope
 			display block
@@ -40,7 +45,7 @@
 				text-align center
 				color #999
 
-				> i
+				> [data-fa]
 					display block
 					margin-bottom 16px
 					font-size 3em
diff --git a/src/web/app/desktop/tags/home-widgets/messaging.tag b/src/web/app/desktop/tags/home-widgets/messaging.tag
index 52251aa539..f2c7c35896 100644
--- a/src/web/app/desktop/tags/home-widgets/messaging.tag
+++ b/src/web/app/desktop/tags/home-widgets/messaging.tag
@@ -1,6 +1,6 @@
 <mk-messaging-home-widget>
 	<virtual if={ data.design == 0 }>
-		<p class="title"><i class="fa fa-comments"></i>%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
+		<p class="title">%fa:comments%%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
 	</virtual>
 	<mk-messaging ref="index" compact={ true }/>
 	<style>
@@ -21,7 +21,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> mk-messaging
diff --git a/src/web/app/desktop/tags/home-widgets/notifications.tag b/src/web/app/desktop/tags/home-widgets/notifications.tag
index dadafa660a..0ccd832d71 100644
--- a/src/web/app/desktop/tags/home-widgets/notifications.tag
+++ b/src/web/app/desktop/tags/home-widgets/notifications.tag
@@ -1,7 +1,7 @@
 <mk-notifications-home-widget>
 	<virtual if={ !data.compact }>
-		<p class="title"><i class="fa fa-bell-o"></i>%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
-		<button onclick={ settings } title="%i18n:desktop.tags.mk-notifications-home-widget.settings%"><i class="fa fa-cog"></i></button>
+		<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
+		<button onclick={ settings } title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
 	</virtual>
 	<mk-notifications/>
 	<style>
@@ -21,7 +21,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
diff --git a/src/web/app/desktop/tags/home-widgets/photo-stream.tag b/src/web/app/desktop/tags/home-widgets/photo-stream.tag
index 05658c9025..6967d00230 100644
--- a/src/web/app/desktop/tags/home-widgets/photo-stream.tag
+++ b/src/web/app/desktop/tags/home-widgets/photo-stream.tag
@@ -1,8 +1,8 @@
 <mk-photo-stream-home-widget data-melt={ data.design == 2 }>
 	<virtual if={ data.design == 0 }>
-		<p class="title"><i class="fa fa-camera"></i>%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
+		<p class="title">%fa:camera%%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
 	</virtual>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<div class="stream" if={ !initializing && images.length > 0 }>
 		<virtual each={ image in images }>
 			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
@@ -37,7 +37,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> .stream
@@ -65,7 +65,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/home-widgets/post-form.tag b/src/web/app/desktop/tags/home-widgets/post-form.tag
index 9ca7fecfe7..c8ccc5a30e 100644
--- a/src/web/app/desktop/tags/home-widgets/post-form.tag
+++ b/src/web/app/desktop/tags/home-widgets/post-form.tag
@@ -2,7 +2,7 @@
 	<mk-post-form if={ place == 'main' }/>
 	<virtual if={ place != 'main' }>
 		<virtual if={ data.design == 0 }>
-			<p class="title"><i class="fa fa-pencil"></i>%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
+			<p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
 		</virtual>
 		<textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
 		<button onclick={ post } disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
@@ -25,7 +25,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> textarea
diff --git a/src/web/app/desktop/tags/home-widgets/recommended-polls.tag b/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
index 5bfa839820..8b3713caea 100644
--- a/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
+++ b/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
@@ -1,15 +1,15 @@
 <mk-recommended-polls-home-widget>
 	<virtual if={ !data.compact }>
-		<p class="title"><i class="fa fa-pie-chart"></i>%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
-		<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
+		<p class="title">%fa:pie-chart%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
+		<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:refresh%</button>
 	</virtual>
 	<div class="poll" if={ !loading && poll != null }>
 		<p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
-		<p if={ !poll.text }><a href="/{ poll.user.username }/{ poll.id }"><i class="fa fa-link"></i></a></p>
+		<p if={ !poll.text }><a href="/{ poll.user.username }/{ poll.id }">%fa:link%</a></p>
 		<mk-poll post={ poll }/>
 	</div>
 	<p class="empty" if={ !loading && poll == null }>%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p>
-	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -26,7 +26,7 @@
 				color #888
 				border-bottom solid 1px #eee
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
@@ -69,7 +69,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/home-widgets/rss-reader.tag b/src/web/app/desktop/tags/home-widgets/rss-reader.tag
index 12c1bee91e..55ef6e2ab1 100644
--- a/src/web/app/desktop/tags/home-widgets/rss-reader.tag
+++ b/src/web/app/desktop/tags/home-widgets/rss-reader.tag
@@ -1,12 +1,12 @@
 <mk-rss-reader-home-widget>
 	<virtual if={ !data.compact }>
-		<p class="title"><i class="fa fa-rss-square"></i>RSS</p>
-		<button onclick={ settings } title="設定"><i class="fa fa-cog"></i></button>
+		<p class="title">%fa:rss-square%RSS</p>
+		<button onclick={ settings } title="設定">%fa:cog%</button>
 	</virtual>
 	<div class="feed" if={ !initializing }>
 		<virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual>
 	</div>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -23,7 +23,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
@@ -61,7 +61,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/home-widgets/server.tag b/src/web/app/desktop/tags/home-widgets/server.tag
index b37d347361..c2eeb46b5b 100644
--- a/src/web/app/desktop/tags/home-widgets/server.tag
+++ b/src/web/app/desktop/tags/home-widgets/server.tag
@@ -1,9 +1,9 @@
 <mk-server-home-widget data-melt={ data.design == 2 }>
 	<virtual if={ data.design == 0 }>
-		<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-server-home-widget.title%</p>
-		<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button>
+		<p class="title">%fa:server%%i18n:desktop.tags.mk-server-home-widget.title%</p>
+		<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%">%fa:sort%</button>
 	</virtual>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/>
 	<mk-server-home-widget-cpu if={ !initializing } show={ data.view == 1 } connection={ connection } meta={ meta }/>
 	<mk-server-home-widget-memory if={ !initializing } show={ data.view == 2 } connection={ connection }/>
@@ -31,7 +31,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
@@ -57,7 +57,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
@@ -235,7 +235,7 @@
 <mk-server-home-widget-cpu>
 	<mk-server-home-widget-pie ref="pie"/>
 	<div>
-		<p><i class="fa fa-microchip"></i>CPU</p>
+		<p>%fa:microchip%CPU</p>
 		<p>{ cores } Cores</p>
 		<p>{ model }</p>
 	</div>
@@ -261,7 +261,7 @@
 					&:first-child
 						font-weight bold
 
-						> i
+						> [data-fa]
 							margin-right 4px
 
 			&:after
@@ -292,7 +292,7 @@
 <mk-server-home-widget-memory>
 	<mk-server-home-widget-pie ref="pie"/>
 	<div>
-		<p><i class="fa fa-flask"></i>Memory</p>
+		<p>%fa:flask%Memory</p>
 		<p>Total: { bytesToSize(total, 1) }</p>
 		<p>Used: { bytesToSize(used, 1) }</p>
 		<p>Free: { bytesToSize(free, 1) }</p>
@@ -319,7 +319,7 @@
 					&:first-child
 						font-weight bold
 
-						> i
+						> [data-fa]
 							margin-right 4px
 
 			&:after
@@ -358,7 +358,7 @@
 <mk-server-home-widget-disk>
 	<mk-server-home-widget-pie ref="pie"/>
 	<div>
-		<p><i class="fa fa-hdd-o"></i>Storage</p>
+		<p>%fa:R hdd%Storage</p>
 		<p>Total: { bytesToSize(total, 1) }</p>
 		<p>Available: { bytesToSize(available, 1) }</p>
 		<p>Used: { bytesToSize(used, 1) }</p>
@@ -385,7 +385,7 @@
 					&:first-child
 						font-weight bold
 
-						> i
+						> [data-fa]
 							margin-right 4px
 
 			&:after
diff --git a/src/web/app/desktop/tags/home-widgets/slideshow.tag b/src/web/app/desktop/tags/home-widgets/slideshow.tag
index 4acb680e42..53fe047000 100644
--- a/src/web/app/desktop/tags/home-widgets/slideshow.tag
+++ b/src/web/app/desktop/tags/home-widgets/slideshow.tag
@@ -5,7 +5,7 @@
 		<div ref="slideA" class="slide a"></div>
 		<div ref="slideB" class="slide b"></div>
 	</div>
-	<button onclick={ resize }><i class="fa fa-expand"></i></button>
+	<button onclick={ resize }>%fa:expand%</button>
 	<style>
 		:scope
 			display block
diff --git a/src/web/app/desktop/tags/home-widgets/timeline.tag b/src/web/app/desktop/tags/home-widgets/timeline.tag
index c751069f74..72d0519d73 100644
--- a/src/web/app/desktop/tags/home-widgets/timeline.tag
+++ b/src/web/app/desktop/tags/home-widgets/timeline.tag
@@ -3,10 +3,11 @@
 	<div class="loading" if={ isLoading }>
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" if={ isEmpty && !isLoading }><i class="fa fa-comments-o"></i>自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p>
+	<p class="empty" if={ isEmpty && !isLoading }>%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p>
 	<mk-timeline ref="timeline" hide={ isLoading }>
 		<yield to="footer">
-			<i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i>
+			<virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
+			<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
 		</yield/>
 	</mk-timeline>
 	<style>
@@ -30,7 +31,7 @@
 				text-align center
 				color #999
 
-				> i
+				> [data-fa]
 					display block
 					margin-bottom 16px
 					font-size 3em
diff --git a/src/web/app/desktop/tags/home-widgets/tips.tag b/src/web/app/desktop/tags/home-widgets/tips.tag
index 81cea64643..53b61dca91 100644
--- a/src/web/app/desktop/tags/home-widgets/tips.tag
+++ b/src/web/app/desktop/tags/home-widgets/tips.tag
@@ -1,5 +1,5 @@
 <mk-tips-home-widget>
-	<p ref="tip"><i class="fa fa-lightbulb-o"></i><span ref="text"></span></p>
+	<p ref="tip">%fa:R lightbulb%<span ref="text"></span></p>
 	<style>
 		:scope
 			display block
@@ -13,7 +13,7 @@
 				font-size 0.7em
 				color #999
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 				kbd
diff --git a/src/web/app/desktop/tags/home-widgets/trends.tag b/src/web/app/desktop/tags/home-widgets/trends.tag
index 8713c68746..a0f4c9fcc4 100644
--- a/src/web/app/desktop/tags/home-widgets/trends.tag
+++ b/src/web/app/desktop/tags/home-widgets/trends.tag
@@ -1,14 +1,14 @@
 <mk-trends-home-widget>
 	<virtual if={ !data.compact }>
-		<p class="title"><i class="fa fa-fire"></i>%i18n:desktop.tags.mk-trends-home-widget.title%</p>
-		<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
+		<p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
+		<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:refresh%</button>
 	</virtual>
 	<div class="post" if={ !loading && post != null }>
 		<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
 		<p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p>
 	</div>
 	<p class="empty" if={ !loading && post == null }>%i18n:desktop.tags.mk-trends-home-widget.nothing%</p>
-	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -25,7 +25,7 @@
 				color #888
 				border-bottom solid 1px #eee
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
@@ -71,7 +71,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/home-widgets/user-recommendation.tag b/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
index cf563db535..1f38a73210 100644
--- a/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
+++ b/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
@@ -1,7 +1,7 @@
 <mk-user-recommendation-home-widget>
 	<virtual if={ !data.compact }>
-		<p class="title"><i class="fa fa-users"></i>%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
-		<button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%"><i class="fa fa-refresh"></i></button>
+		<p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
+		<button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:refresh%</button>
 	</virtual>
 	<div class="user" if={ !loading && users.length != 0 } each={ _user in users }>
 		<a class="avatar-anchor" href={ '/' + _user.username }>
@@ -14,7 +14,7 @@
 		<mk-follow-button user={ _user }/>
 	</div>
 	<p class="empty" if={ !loading && users.length == 0 }>%i18n:desktop.tags.mk-user-recommendation-home-widget.no-one%</p>
-	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -31,7 +31,7 @@
 				color #888
 				border-bottom solid 1px #eee
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
@@ -110,7 +110,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/home.tag b/src/web/app/desktop/tags/home.tag
index 55f36e0977..50f6c84604 100644
--- a/src/web/app/desktop/tags/home.tag
+++ b/src/web/app/desktop/tags/home.tag
@@ -1,6 +1,6 @@
 <mk-home data-customize={ opts.customize }>
 	<div class="customize" if={ opts.customize }>
-		<a href="/"><i class="fa fa-check"></i>完了</a>
+		<a href="/">%fa:check%完了</a>
 		<div>
 			<div class="adder">
 				<p>ウィジェットを追加:</p>
@@ -96,7 +96,7 @@
 						background darken($theme-color, 10%)
 						transition background 0s ease
 
-					> i
+					> [data-fa]
 						margin-right 8px
 
 				> div
@@ -221,7 +221,7 @@
 			}
 
 			if (this.opts.customize) {
-				dialog('<i class="fa fa-info-circle"></i>カスタマイズのヒント',
+				dialog('%fa:info-circle%カスタマイズのヒント',
 					'<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' +
 					'<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' +
 					'<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' +
diff --git a/src/web/app/desktop/tags/input-dialog.tag b/src/web/app/desktop/tags/input-dialog.tag
index 78fd62ee8b..f175277547 100644
--- a/src/web/app/desktop/tags/input-dialog.tag
+++ b/src/web/app/desktop/tags/input-dialog.tag
@@ -1,7 +1,7 @@
 <mk-input-dialog>
 	<mk-window ref="window" is-modal={ true } width={ '500px' }>
 		<yield to="header">
-			<i class="fa fa-i-cursor"></i>{ parent.title }
+			%fa:i-cursor%{ parent.title }
 		</yield>
 		<yield to="content">
 			<div class="body">
@@ -19,7 +19,7 @@
 
 			> mk-window
 				[data-yield='header']
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				[data-yield='content']
diff --git a/src/web/app/desktop/tags/messaging/room-window.tag b/src/web/app/desktop/tags/messaging/room-window.tag
index 1c6ff7c4bc..7c0bb0d76e 100644
--- a/src/web/app/desktop/tags/messaging/room-window.tag
+++ b/src/web/app/desktop/tags/messaging/room-window.tag
@@ -1,6 +1,6 @@
 <mk-messaging-room-window>
 	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout={ popout }>
-		<yield to="header"><i class="fa fa-comments"></i>メッセージ: { parent.user.name }</yield>
+		<yield to="header">%fa:comments%メッセージ: { parent.user.name }</yield>
 		<yield to="content">
 			<mk-messaging-room user={ parent.user }/>
 		</yield>
@@ -9,7 +9,7 @@
 		:scope
 			> mk-window
 				[data-yield='header']
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				[data-yield='content']
diff --git a/src/web/app/desktop/tags/messaging/window.tag b/src/web/app/desktop/tags/messaging/window.tag
index 5e478f0367..529db11af1 100644
--- a/src/web/app/desktop/tags/messaging/window.tag
+++ b/src/web/app/desktop/tags/messaging/window.tag
@@ -1,6 +1,6 @@
 <mk-messaging-window>
 	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
-		<yield to="header"><i class="fa fa-comments"></i>メッセージ</yield>
+		<yield to="header">%fa:comments%メッセージ</yield>
 		<yield to="content">
 			<mk-messaging ref="index"/>
 		</yield>
@@ -9,7 +9,7 @@
 		:scope
 			> mk-window
 				[data-yield='header']
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				[data-yield='content']
diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag
index d7855363ea..b65f1a6a65 100644
--- a/src/web/app/desktop/tags/notifications.tag
+++ b/src/web/app/desktop/tags/notifications.tag
@@ -16,7 +16,7 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p><i class="fa fa-retweet"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
+						<p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'quote' }>
@@ -24,7 +24,7 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p><i class="fa fa-quote-left"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'follow' }>
@@ -32,7 +32,7 @@
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p><i class="fa fa-user-plus"></i><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
+						<p>%fa:user-plus%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'reply' }>
@@ -40,7 +40,7 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p><i class="fa fa-reply"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'mention' }>
@@ -48,7 +48,7 @@
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p><i class="fa fa-at"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'poll_vote' }>
@@ -56,18 +56,18 @@
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<p><i class="fa fa-pie-chart"></i><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p>%fa:pie-chart%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 			</div>
-			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
+			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span>%fa:angle-up%{ notification._datetext }</span><span>%fa:angle-down%{ notifications[i + 1]._datetext }</span></p>
 		</virtual>
 	</div>
 	<button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
-		<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
+		<virtual if={ fetchingMoreNotifications }>%fa:spinner .pluse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
 	</button>
 	<p class="empty" if={ notifications.length == 0 && !loading }>ありません！</p>
-	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -187,7 +187,7 @@
 				&.fetching
 					cursor wait
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> .empty
@@ -202,7 +202,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/pages/entrance.tag b/src/web/app/desktop/tags/pages/entrance.tag
index 02aeb922fe..44548e4183 100644
--- a/src/web/app/desktop/tags/pages/entrance.tag
+++ b/src/web/app/desktop/tags/pages/entrance.tag
@@ -150,7 +150,7 @@
 </mk-entrance>
 
 <mk-entrance-signin>
-	<a class="help" href={ _ABOUT_URL_ + '/help' } title="お困りですか？"><i class="fa fa-question"></i></a>
+	<a class="help" href={ _ABOUT_URL_ + '/help' } title="お困りですか？">%fa:question%</a>
 	<div class="form">
 		<h1><img if={ user } src={ user.avatar_url + '?thumbnail&size=32' }/>
 			<p>{ user ? user.name : 'アカウント' }</p>
@@ -194,7 +194,7 @@
 				&:active
 					color #222
 
-				> i
+				> [data-fa]
 					padding 14px
 
 			> .form
@@ -295,7 +295,7 @@
 
 <mk-entrance-signup>
 	<mk-signup/>
-	<button class="cancel" type="button" onclick={ parent.signin } title="キャンセル"><i class="fa fa-times"></i></button>
+	<button class="cancel" type="button" onclick={ parent.signin } title="キャンセル">%fa:times%</button>
 	<style>
 		:scope
 			display block
@@ -335,7 +335,7 @@
 				&:active
 					color #222
 
-				> i
+				> [data-fa]
 					padding 14px
 
 	</style>
diff --git a/src/web/app/desktop/tags/pages/post.tag b/src/web/app/desktop/tags/pages/post.tag
index 4a9672c1ef..6d3b030e05 100644
--- a/src/web/app/desktop/tags/pages/post.tag
+++ b/src/web/app/desktop/tags/pages/post.tag
@@ -1,9 +1,9 @@
 <mk-post-page>
 	<mk-ui ref="ui">
 		<main if={ !parent.fetching }>
-			<a if={ parent.post.next } href={ parent.post.next }><i class="fa fa-angle-up"></i>%i18n:desktop.tags.mk-post-page.next%</a>
+			<a if={ parent.post.next } href={ parent.post.next }>%fa:angle-up%%i18n:desktop.tags.mk-post-page.next%</a>
 			<mk-post-detail ref="detail" post={ parent.post }/>
-			<a if={ parent.post.prev } href={ parent.post.prev }><i class="fa fa-angle-down"></i>%i18n:desktop.tags.mk-post-page.prev%</a>
+			<a if={ parent.post.prev } href={ parent.post.prev }>%fa:angle-down%%i18n:desktop.tags.mk-post-page.prev%</a>
 		</main>
 	</mk-ui>
 	<style>
@@ -23,7 +23,7 @@
 					&:last-child
 						margin-top 4px
 
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				> mk-post-detail
diff --git a/src/web/app/desktop/tags/pages/selectdrive.tag b/src/web/app/desktop/tags/pages/selectdrive.tag
index 9c3ac16eb1..123977e905 100644
--- a/src/web/app/desktop/tags/pages/selectdrive.tag
+++ b/src/web/app/desktop/tags/pages/selectdrive.tag
@@ -1,7 +1,7 @@
 <mk-selectdrive-page>
 	<mk-drive-browser ref="browser" multiple={ multiple }/>
 	<div>
-		<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" onclick={ upload }><i class="fa fa-upload"></i></button>
+		<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" onclick={ upload }>%fa:upload%</button>
 		<button class="cancel" onclick={ close }>%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
 		<button class="ok" onclick={ ok }>%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
 	</div>
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
index 585b1b8280..d91585650a 100644
--- a/src/web/app/desktop/tags/post-detail.tag
+++ b/src/web/app/desktop/tags/post-detail.tag
@@ -1,8 +1,8 @@
 <mk-post-detail title={ title }>
 	<div class="main">
 		<button class="read-more" if={ p.reply && p.reply.reply_id && context == null } title="会話をもっと読み込む" onclick={ loadContext } disabled={ contextFetching }>
-			<i class="fa fa-ellipsis-v" if={ !contextFetching }></i>
-			<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
+			<virtual if={ !contextFetching }>%fa:ellipsis-v%</virtual>
+			<virtual if={ contextFetching }>%fa:spinner .pluse%</virtual>
 		</button>
 		<div class="context">
 			<virtual each={ post in context }>
@@ -17,7 +17,7 @@
 				<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
 					<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
 				</a>
-				<i class="fa fa-retweet"></i><a class="name" href={ '/' + post.user.username }>
+				%fa:retweet%<a class="name" href={ '/' + post.user.username }>
 				{ post.user.name }
 			</a>
 			がRepost
@@ -44,16 +44,16 @@
 			<footer>
 				<mk-reactions-viewer post={ p }/>
 				<button onclick={ reply } title="返信">
-					<i class="fa fa-reply"></i><p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
+					%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 				</button>
 				<button onclick={ repost } title="Repost">
-					<i class="fa fa-retweet"></i><p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
+					%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 				</button>
 				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション">
-					<i class="fa fa-plus"></i><p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
+					%fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 				</button>
 				<button onclick={ menu } ref="menuButton">
-					<i class="fa fa-ellipsis-h"></i>
+					%fa:ellipsis-h%
 				</button>
 			</footer>
 		</article>
diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag
index f6d9ee3779..b235720d21 100644
--- a/src/web/app/desktop/tags/post-form.tag
+++ b/src/web/app/desktop/tags/post-form.tag
@@ -7,17 +7,17 @@
 					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
 					<img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
 				</li>
-				<li class="add" if={ files.length < 4 } title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }><i class="fa fa-plus"></i></li>
+				<li class="add" if={ files.length < 4 } title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li>
 			</ul>
 			<p class="remain">{ 4 - files.length }/4</p>
 		</div>
 		<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/>
 	</div>
 	<mk-uploader ref="uploader"/>
-	<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }><i class="fa fa-upload"></i></button>
-	<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
-	<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" onclick={ kao }><i class="fa fa-smile-o"></i></button>
-	<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }><i class="fa fa-pie-chart"></i></button>
+	<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:upload%</button>
+	<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" onclick={ selectFileFromDrive }>%fa:cloud%</button>
+	<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" onclick={ kao }>%fa:R smile%</button>
+	<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }>%fa:pie-chart%</button>
 	<p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p>
 	<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } onclick={ post }>
 		{ wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis if={ wait }/>
diff --git a/src/web/app/desktop/tags/repost-form-window.tag b/src/web/app/desktop/tags/repost-form-window.tag
index 58ececf0ec..dbc3f5a3c5 100644
--- a/src/web/app/desktop/tags/repost-form-window.tag
+++ b/src/web/app/desktop/tags/repost-form-window.tag
@@ -1,7 +1,7 @@
 <mk-repost-form-window>
 	<mk-window ref="window" is-modal={ true }>
 		<yield to="header">
-			<i class="fa fa-retweet"></i>%i18n:desktop.tags.mk-repost-form-window.title%
+			%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%
 		</yield>
 		<yield to="content">
 			<mk-repost-form ref="form" post={ parent.opts.post }/>
@@ -11,7 +11,7 @@
 		:scope
 			> mk-window
 				[data-yield='header']
-					> i
+					> [data-fa]
 						margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/search-posts.tag b/src/web/app/desktop/tags/search-posts.tag
index 4025f87332..14baa41919 100644
--- a/src/web/app/desktop/tags/search-posts.tag
+++ b/src/web/app/desktop/tags/search-posts.tag
@@ -2,8 +2,13 @@
 	<div class="loading" if={ isLoading }>
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" if={ isEmpty }><i class="fa fa-search"></i>「{ query }」に関する投稿は見つかりませんでした。</p>
-	<mk-timeline ref="timeline"><yield to="footer"><i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i></yield/>
+	<p class="empty" if={ isEmpty }>%fa:search%「{ query }」に関する投稿は見つかりませんでした。</p>
+	<mk-timeline ref="timeline">
+		<yield to="footer">
+			<virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
+			<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
+		</yield/>
+	</mk-timeline>
 	<style>
 		:scope
 			display block
@@ -20,7 +25,7 @@
 				text-align center
 				color #999
 
-				> i
+				> [data-fa]
 					display block
 					margin-bottom 16px
 					font-size 3em
diff --git a/src/web/app/desktop/tags/select-file-from-drive-window.tag b/src/web/app/desktop/tags/select-file-from-drive-window.tag
index 8a7e725b71..c4f8804885 100644
--- a/src/web/app/desktop/tags/select-file-from-drive-window.tag
+++ b/src/web/app/desktop/tags/select-file-from-drive-window.tag
@@ -7,7 +7,7 @@
 		<yield to="content">
 			<mk-drive-browser ref="browser" multiple={ parent.multiple }/>
 			<div>
-				<button class="upload" title="PCからドライブにファイルをアップロード" onclick={ parent.upload }><i class="fa fa-upload"></i></button>
+				<button class="upload" title="PCからドライブにファイルをアップロード" onclick={ parent.upload }>%fa:upload%</button>
 				<button class="cancel" onclick={ parent.close }>キャンセル</button>
 				<button class="ok" disabled={ parent.multiple && parent.files.length == 0 } onclick={ parent.ok }>決定</button>
 			</div>
@@ -18,7 +18,7 @@
 			> mk-window
 				[data-yield='header']
 					> mk-raw
-						> i
+						> [data-fa]
 							margin-right 4px
 
 					.count
@@ -138,7 +138,7 @@
 		this.files = [];
 
 		this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
-		this.title = this.opts.title || '<i class="fa fa-file-o"></i>ファイルを選択';
+		this.title = this.opts.title || '%fa:file-o%ファイルを選択';
 
 		this.on('mount', () => {
 			this.refs.window.refs.browser.on('selected', file => {
diff --git a/src/web/app/desktop/tags/select-folder-from-drive-window.tag b/src/web/app/desktop/tags/select-folder-from-drive-window.tag
index 375f428bfc..938084301f 100644
--- a/src/web/app/desktop/tags/select-folder-from-drive-window.tag
+++ b/src/web/app/desktop/tags/select-folder-from-drive-window.tag
@@ -16,7 +16,7 @@
 			> mk-window
 				[data-yield='header']
 					> mk-raw
-						> i
+						> [data-fa]
 							margin-right 4px
 
 				[data-yield='content']
@@ -92,7 +92,7 @@
 	<script>
 		this.files = [];
 
-		this.title = this.opts.title || '<i class="fa fa-folder-o"></i>フォルダを選択';
+		this.title = this.opts.title || '%fa:folder-o%フォルダを選択';
 
 		this.on('mount', () => {
 			this.refs.window.on('closed', () => {
diff --git a/src/web/app/desktop/tags/set-avatar-suggestion.tag b/src/web/app/desktop/tags/set-avatar-suggestion.tag
index 2fe7f963fe..7e871129fc 100644
--- a/src/web/app/desktop/tags/set-avatar-suggestion.tag
+++ b/src/web/app/desktop/tags/set-avatar-suggestion.tag
@@ -1,6 +1,6 @@
 <mk-set-avatar-suggestion onclick={ set }>
 	<p><b>アバターを設定</b>してみませんか？
-		<button onclick={ close }><i class="fa fa-times"></i></button>
+		<button onclick={ close }>%fa:times%</button>
 	</p>
 	<style>
 		:scope
diff --git a/src/web/app/desktop/tags/set-banner-suggestion.tag b/src/web/app/desktop/tags/set-banner-suggestion.tag
index d3c50362d9..4cd364ca3e 100644
--- a/src/web/app/desktop/tags/set-banner-suggestion.tag
+++ b/src/web/app/desktop/tags/set-banner-suggestion.tag
@@ -1,6 +1,6 @@
 <mk-set-banner-suggestion onclick={ set }>
 	<p><b>バナーを設定</b>してみませんか？
-		<button onclick={ close }><i class="fa fa-times"></i></button>
+		<button onclick={ close }>%fa:times%</button>
 	</p>
 	<style>
 		:scope
diff --git a/src/web/app/desktop/tags/settings-window.tag b/src/web/app/desktop/tags/settings-window.tag
index 28065e0a0d..5a725af51e 100644
--- a/src/web/app/desktop/tags/settings-window.tag
+++ b/src/web/app/desktop/tags/settings-window.tag
@@ -1,6 +1,6 @@
 <mk-settings-window>
 	<mk-window ref="window" is-modal={ true } width={ '700px' } height={ '550px' }>
-		<yield to="header"><i class="fa fa-cog"></i>設定</yield>
+		<yield to="header">%fa:cog%設定</yield>
 		<yield to="content">
 			<mk-settings/>
 		</yield>
@@ -9,7 +9,7 @@
 		:scope
 			> mk-window
 				[data-yield='header']
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				[data-yield='content']
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 4c16f9eaa8..304229d92c 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -1,14 +1,14 @@
 <mk-settings>
 	<div class="nav">
-		<p class={ active: page == 'account' } onmousedown={ setPage.bind(null, 'account') }><i class="fa fa-fw fa-user"></i>アカウント</p>
-		<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }><i class="fa fa-fw fa-desktop"></i>Web</p>
-		<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }><i class="fa fa-fw fa-bell-o"></i>通知</p>
-		<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }><i class="fa fa-fw fa-cloud"></i>ドライブ</p>
-		<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }><i class="fa fa-fw fa-puzzle-piece"></i>アプリ</p>
-		<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }><i class="fa fa-fw fa-twitter"></i>Twitter</p>
-		<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }><i class="fa fa-fw fa-sign-in"></i>ログイン履歴</p>
-		<p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }><i class="fa fa-fw fa-unlock-alt"></i>%i18n:desktop.tags.mk-settings.password%</p>
-		<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }><i class="fa fa-fw fa-key"></i>API</p>
+		<p class={ active: page == 'account' } onmousedown={ setPage.bind(null, 'account') }>%fa:user .fw%アカウント</p>
+		<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
+		<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
+		<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%ドライブ</p>
+		<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
+		<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:twitter .fw%Twitter</p>
+		<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in .fw%ログイン履歴</p>
+		<p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.password%</p>
+		<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
 	</div>
 	<div class="pages">
 		<section class="account" show={ page == 'account' }>
@@ -111,7 +111,7 @@
 					user-select none
 					transition margin-left 0.2s ease
 
-					> i
+					> [data-fa]
 						margin-right 4px
 
 					&:hover
diff --git a/src/web/app/desktop/tags/sub-post-content.tag b/src/web/app/desktop/tags/sub-post-content.tag
index 86269fdbe9..8989ff1c5b 100644
--- a/src/web/app/desktop/tags/sub-post-content.tag
+++ b/src/web/app/desktop/tags/sub-post-content.tag
@@ -1,7 +1,7 @@
 <mk-sub-post-content>
 	<div class="body">
 		<a class="reply" if={ post.reply_id }>
-			<i class="fa fa-reply"></i>
+			%fa:reply%
 		</a>
 		<span ref="text"></span>
 		<a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a>
diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag
index 13651dfa5f..b12728e19a 100644
--- a/src/web/app/desktop/tags/timeline.tag
+++ b/src/web/app/desktop/tags/timeline.tag
@@ -1,7 +1,7 @@
 <mk-timeline>
 	<virtual each={ post, i in posts }>
 		<mk-timeline-post post={ post }/>
-		<p class="date" if={ i != posts.length - 1 && post._date != posts[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ post._datetext }</span><span><i class="fa fa-angle-down"></i>{ posts[i + 1]._datetext }</span></p>
+		<p class="date" if={ i != posts.length - 1 && post._date != posts[i + 1]._date }><span>%fa:angle-up%{ post._datetext }</span><span>%fa:angle-down%{ posts[i + 1]._datetext }</span></p>
 	</virtual>
 	<footer data-yield="footer">
 		<yield from="footer"/>
@@ -90,7 +90,7 @@
 			<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
 				<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
 			</a>
-			<i class="fa fa-retweet"></i>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
+			%fa:retweet%{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
 		</p>
 		<mk-time time={ post.created_at }/>
 	</div>
@@ -114,7 +114,7 @@
 				<div class="text" ref="text">
 					<p class="channel" if={ p.channel != null }><a href={ _CH_URL_ + '/' + p.channel.id } target="_blank">{ p.channel.title }</a>:</p>
 					<a class="reply" if={ p.reply }>
-						<i class="fa fa-reply"></i>
+						%fa:reply%
 					</a>
 					<p class="dummy"></p>
 					<a class="quote" if={ p.repost != null }>RP:</a>
@@ -123,23 +123,23 @@
 					<mk-images-viewer images={ p.media }/>
 				</div>
 				<mk-poll if={ p.poll } post={ p } ref="pollViewer"/>
-				<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i>
+				<div class="repost" if={ p.repost }>%fa:quote-right -flip-h%
 					<mk-post-preview class="repost" post={ p.repost }/>
 				</div>
 			</div>
 			<footer>
 				<mk-reactions-viewer post={ p } ref="reactionsViewer"/>
 				<button onclick={ reply } title="%i18n:desktop.tags.mk-timeline-post.reply%">
-					<i class="fa fa-reply"></i><p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
+					%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 				</button>
 				<button onclick={ repost } title="%i18n:desktop.tags.mk-timeline-post.repost%">
-					<i class="fa fa-retweet"></i><p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
+					%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 				</button>
 				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%">
-					<i class="fa fa-plus"></i><p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
+					%fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 				</button>
 				<button onclick={ menu } ref="menuButton">
-					<i class="fa fa-ellipsis-h"></i>
+					%fa:ellipsis-h%
 				</button>
 				<button onclick={ toggleDetail } title="%i18n:desktop.tags.mk-timeline-post.detail">
 					<i class="fa fa-caret-down" if={ !isDetailOpened }></i>
@@ -378,7 +378,7 @@
 						> .repost
 							margin 8px 0
 
-							> i:first-child
+							> [data-fa]:first-child
 								position absolute
 								top -8px
 								left -8px
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index 047964fab4..41433b15cd 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -171,7 +171,7 @@
 </mk-ui-header-search>
 
 <mk-ui-header-post-button>
-	<button onclick={ post } title="%i18n:desktop.tags.mk-ui-header-post-button.post%"><i class="fa fa-pencil"></i></button>
+	<button onclick={ post } title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
 	<style>
 		:scope
 			display inline-block
@@ -215,7 +215,7 @@
 
 <mk-ui-header-notifications>
 	<button data-active={ isOpen } onclick={ toggle } title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
-		<i class="fa fa-bell-o icon"></i><i class="fa fa-circle badge" if={ hasUnreadNotifications }></i>
+		%fa:R bell%<virtual if={ hasUnreadNotifications }>%fa:circle%</virtual>
 	</button>
 	<div class="notifications" if={ isOpen }>
 		<mk-notifications/>
@@ -245,11 +245,11 @@
 				&:active
 					color darken(#9eaba8, 30%)
 
-				> .icon
+				> [data-fa].icon
 					font-size 1.2em
 					line-height 48px
 
-				> .badge
+				> [data-fa].circle
 					margin-left -5px
 					vertical-align super
 					font-size 10px
@@ -380,27 +380,27 @@
 		<virtual if={ SIGNIN }>
 			<li class="home { active: page == 'home' }">
 				<a href={ _URL_ }>
-					<i class="fa fa-home"></i>
+					%fa:home%
 					<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
 				</a>
 			</li>
 			<li class="messaging">
 				<a onclick={ messaging }>
-					<i class="fa fa-comments"></i>
+					%fa:comments%
 					<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
-					<i class="fa fa-circle" if={ hasUnreadMessagingMessages }></i>
+					<virtual if={ hasUnreadMessagingMessages }>%fa:circle%</virtual>
 				</a>
 			</li>
 		</virtual>
 		<li class="ch">
 			<a href={ _CH_URL_ } target="_blank">
-				<i class="fa fa-television"></i>
+				%fa:tv%
 				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
 			</a>
 		</li>
 		<li class="info">
 			<a href="https://twitter.com/misskey_xyz" target="_blank">
-				<i class="fa fa-info"></i>
+				%fa:info%
 				<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
 			</a>
 		</li>
@@ -450,10 +450,10 @@
 							color darken(#9eaba8, 20%)
 							text-decoration none
 
-						> i:first-child
+						> [data-fa]:first-child
 							margin-right 8px
 
-						> i:last-child
+						> [data-fa]:last-child
 							margin-left 5px
 							vertical-align super
 							font-size 10px
@@ -616,29 +616,29 @@
 
 <mk-ui-header-account>
 	<button class="header" data-active={ isOpen.toString() } onclick={ toggle }>
-		<span class="username">{ I.username }<i class="fa fa-angle-down" if={ !isOpen }></i><i class="fa fa-angle-up" if={ isOpen }></i></span>
+		<span class="username">{ I.username }<virtual if={ !isOpen }>%fa:angle-down%</virtual><virtual if={ isOpen }>%fa:angle-up%</virtual></span>
 		<img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 	</button>
 	<div class="menu" if={ isOpen }>
 		<ul>
 			<li>
-				<a href={ '/' + I.username }><i class="fa fa-user"></i>%i18n:desktop.tags.mk-ui-header-account.profile%<i class="fa fa-angle-right"></i></a>
+				<a href={ '/' + I.username }>%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
 			</li>
 			<li onclick={ drive }>
-				<p><i class="fa fa-cloud"></i>%i18n:desktop.tags.mk-ui-header-account.drive%<i class="fa fa-angle-right"></i></p>
+				<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
 			</li>
 			<li>
-				<a href="/i/mentions"><i class="fa fa-at"></i>%i18n:desktop.tags.mk-ui-header-account.mentions%<i class="fa fa-angle-right"></i></a>
+				<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
 			</li>
 		</ul>
 		<ul>
 			<li onclick={ settings }>
-				<p><i class="fa fa-cog"></i>%i18n:desktop.tags.mk-ui-header-account.settings%<i class="fa fa-angle-right"></i></p>
+				<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
 			</li>
 		</ul>
 		<ul>
 			<li onclick={ signout }>
-				<p><i class="fa fa-power-off"></i>%i18n:desktop.tags.mk-ui-header-account.signout%<i class="fa fa-angle-right"></i></p>
+				<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
 			</li>
 		</ul>
 	</div>
diff --git a/src/web/app/desktop/tags/user-timeline.tag b/src/web/app/desktop/tags/user-timeline.tag
index 5df13c436c..5bb441ef64 100644
--- a/src/web/app/desktop/tags/user-timeline.tag
+++ b/src/web/app/desktop/tags/user-timeline.tag
@@ -5,8 +5,13 @@
 	<div class="loading" if={ isLoading }>
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" if={ isEmpty }><i class="fa fa-comments-o"></i>このユーザーはまだ何も投稿していないようです。</p>
-	<mk-timeline ref="timeline"><yield to="footer"><i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i></yield/>
+	<p class="empty" if={ isEmpty }>%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
+	<mk-timeline ref="timeline">
+		<yield to="footer">
+			<virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
+			<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
+		</yield/>
+	</mk-timeline>
 	<style>
 		:scope
 			display block
@@ -40,7 +45,7 @@
 				text-align center
 				color #999
 
-				> i
+				> [data-fa]
 					display block
 					margin-bottom 16px
 					font-size 3em
diff --git a/src/web/app/desktop/tags/user.tag b/src/web/app/desktop/tags/user.tag
index 5ec6ac7624..21543e8796 100644
--- a/src/web/app/desktop/tags/user.tag
+++ b/src/web/app/desktop/tags/user.tag
@@ -48,12 +48,12 @@
 		<div class="title">
 			<p class="name" href={ '/' + user.username }>{ user.name }</p>
 			<p class="username">@{ user.username }</p>
-			<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p>
+			<p class="location" if={ user.profile.location }>%fa:map-marker%{ user.profile.location }</p>
 		</div>
 		<footer>
-			<a href={ '/' + user.username } data-active={ parent.page == 'home' }><i class="fa fa-home"></i>概要</a>
-			<a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }><i class="fa fa-picture-o"></i>メディア</a>
-			<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }><i class="fa fa-bar-chart"></i>グラフ</a>
+			<a href={ '/' + user.username } data-active={ parent.page == 'home' }>%fa:home%概要</a>
+			<a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }>%fa:image%メディア</a>
+			<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }>%fa:bar-chart%グラフ</a>
 		</footer>
 	</div>
 	<style>
@@ -230,15 +230,15 @@
 	</div>
 	<div class="description" if={ user.description }>{ user.description }</div>
 	<div class="birthday" if={ user.profile.birthday }>
-		<p><i class="fa fa-birthday-cake"></i>{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
+		<p>%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
 	</div>
 	<div class="twitter" if={ user.twitter }>
-		<p><i class="fa fa-twitter"></i><a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
+		<p>%fa:twitter%<a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
 	</div>
 	<div class="status">
-	  <p class="posts-count"><i class="fa fa-angle-right"></i><a>{ user.posts_count }</a><b>ポスト</b></p>
-		<p class="following"><i class="fa fa-angle-right"></i><a onclick={ showFollowing }>{ user.following_count }</a>人を<b>フォロー</b></p>
-		<p class="followers"><i class="fa fa-angle-right"></i><a onclick={ showFollowers }>{ user.followers_count }</a>人の<b>フォロワー</b></p>
+	  <p class="posts-count">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p>
+		<p class="following">%fa:angle-right%<a onclick={ showFollowing }>{ user.following_count }</a>人を<b>フォロー</b></p>
+		<p class="followers">%fa:angle-right%<a onclick={ showFollowers }>{ user.followers_count }</a>人の<b>フォロワー</b></p>
 	</div>
 	<style>
 		:scope
@@ -331,6 +331,8 @@
 <mk-user-photos>
 	<p class="title"><i class="fa fa-camera"></i>%i18n:desktop.tags.mk-user.photos.title%</p>
 	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
+	<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
 	<div class="stream" if={ !initializing && images.length > 0 }>
 		<virtual each={ image in images }>
 			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
@@ -423,8 +425,8 @@
 </mk-user-photos>
 
 <mk-user-frequently-replied-users>
-	<p class="title"><i class="fa fa-users"></i>%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
+	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
 	<div class="user" if={ !initializing && users.length != 0 } each={ _user in users }>
 		<a class="avatar-anchor" href={ '/' + _user.username }>
 			<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>
@@ -535,8 +537,8 @@
 </mk-user-frequently-replied-users>
 
 <mk-user-followers-you-know>
-	<p class="title"><i class="fa fa-users"></i>%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
+	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
 	<div if={ !initializing && users.length > 0 }>
 	<virtual each={ user in users }>
 		<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
@@ -712,7 +714,7 @@
 <mk-user-graphs>
 	<section>
 		<div>
-			<h1><i class="fa fa-pencil"></i>投稿</h1>
+			<h1>%fa:pencil-alt%投稿</h1>
 			<mk-user-graphs-activity-chart user={ opts.user }/>
 		</div>
 	</section>
diff --git a/src/web/app/desktop/tags/users-list.tag b/src/web/app/desktop/tags/users-list.tag
index eb34b15a29..215d582bbf 100644
--- a/src/web/app/desktop/tags/users-list.tag
+++ b/src/web/app/desktop/tags/users-list.tag
@@ -15,7 +15,7 @@
 		<span if={ moreFetching }>読み込み中<mk-ellipsis/></span>
 	</button>
 	<p class="no" if={ !fetching && users.length == 0 }>{ opts.noUsers }</p>
-	<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
+	<p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%読み込んでいます<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -84,7 +84,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/widgets/activity.tag b/src/web/app/desktop/tags/widgets/activity.tag
index baf385fe92..e98049e4cd 100644
--- a/src/web/app/desktop/tags/widgets/activity.tag
+++ b/src/web/app/desktop/tags/widgets/activity.tag
@@ -1,9 +1,9 @@
 <mk-activity-widget data-melt={ design == 2 }>
 	<virtual if={ design == 0 }>
-		<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-widget.title%</p>
-		<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%"><i class="fa fa-sort"></i></button>
+		<p class="title">%fa:bar-chart%%i18n:desktop.tags.mk-activity-widget.title%</p>
+		<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
 	</virtual>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<mk-activity-widget-calender if={ !initializing && view == 0 } data={ [].concat(activity) }/>
 	<mk-activity-widget-chart if={ !initializing && view == 1 } data={ [].concat(activity) }/>
 	<style>
@@ -27,7 +27,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
@@ -53,7 +53,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/desktop/tags/widgets/calendar.tag b/src/web/app/desktop/tags/widgets/calendar.tag
index 5f00d5cf29..abe9981873 100644
--- a/src/web/app/desktop/tags/widgets/calendar.tag
+++ b/src/web/app/desktop/tags/widgets/calendar.tag
@@ -1,8 +1,8 @@
 <mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }>
 	<virtual if={ opts.design == 0 || opts.design == 1 }>
-		<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar-widget.prev%"><i class="fa fa-chevron-circle-left"></i></button>
+		<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
 		<p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
-		<button onclick={ next } title="%i18n:desktop.tags.mk-calendar-widget.next%"><i class="fa fa-chevron-circle-right"></i></button>
+		<button onclick={ next } title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
 	</virtual>
 
 	<div class="calendar">
@@ -41,7 +41,7 @@
 				color #888
 				box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> button
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
index 256cfb7900..a47eb60b4c 100644
--- a/src/web/app/desktop/tags/window.tag
+++ b/src/web/app/desktop/tags/window.tag
@@ -5,8 +5,8 @@
 			<header ref="header" onmousedown={ onHeaderMousedown }>
 				<h1 data-yield="header"><yield from="header"/></h1>
 				<div>
-					<button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト"><i class="fa fa-window-restore"></i></button>
-					<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
+					<button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト">%fa:window-restore%</button>
+					<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる">%fa:times%</button>
 				</div>
 			</header>
 			<div class="content" data-yield="content"><yield from="content"/></div>
@@ -171,7 +171,7 @@
 								&:active
 									color darken(#000, 30%)
 
-								> i
+								> [data-fa]
 									padding 0
 									width $header-height
 									line-height $header-height
diff --git a/src/web/app/dev/tags/new-app-form.tag b/src/web/app/dev/tags/new-app-form.tag
index dc63145d71..e1fad7dce9 100644
--- a/src/web/app/dev/tags/new-app-form.tag
+++ b/src/web/app/dev/tags/new-app-form.tag
@@ -10,13 +10,13 @@
 			<label>
 				<p class="caption">Named ID</p>
 				<input ref="nid" type="text" pattern="^[a-zA-Z0-9-]{3,30}$" placeholder="ex) misskey-for-ios" autocomplete="off" required="required" onkeyup={ onChangeNid }/>
-				<p class="info" if={ nidState == 'wait' } style="color:#999"><i class="fa fa-fw fa-spinner fa-pulse"></i>確認しています...</p>
-				<p class="info" if={ nidState == 'ok' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>利用できます</p>
-				<p class="info" if={ nidState == 'unavailable' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>既に利用されています</p>
-				<p class="info" if={ nidState == 'error' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>通信エラー</p>
-				<p class="info" if={ nidState == 'invalid-format' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>a~z、A~Z、0~9、-(ハイフン)が使えます</p>
-				<p class="info" if={ nidState == 'min-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>3文字以上でお願いします！</p>
-				<p class="info" if={ nidState == 'max-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>30文字以内でお願いします</p>
+				<p class="info" if={ nidState == 'wait' } style="color:#999">%fa:spinner .pluse .fw%確認しています...</p>
+				<p class="info" if={ nidState == 'ok' } style="color:#3CB7B5">%fa:fw check%利用できます</p>
+				<p class="info" if={ nidState == 'unavailable' } style="color:#FF1161">%fa:fw exclamation-triangle%既に利用されています</p>
+				<p class="info" if={ nidState == 'error' } style="color:#FF1161">%fa:fw exclamation-triangle%通信エラー</p>
+				<p class="info" if={ nidState == 'invalid-format' } style="color:#FF1161">%fa:fw exclamation-triangle%a~z、A~Z、0~9、-(ハイフン)が使えます</p>
+				<p class="info" if={ nidState == 'min-range' } style="color:#FF1161">%fa:fw exclamation-triangle%3文字以上でお願いします！</p>
+				<p class="info" if={ nidState == 'max-range' } style="color:#FF1161">%fa:fw exclamation-triangle%30文字以内でお願いします</p>
 			</label>
 		</section>
 		<section class="description">
@@ -71,7 +71,7 @@
 					<p>通知を操作する。</p>
 				</label>
 			</div>
-			<p><i class="fa fa-exclamation-triangle"></i>アプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーキーはすべて無効になります。</p>
+			<p>%fa:exclamation-triangle%アプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーキーはすべて無効になります。</p>
 		</section>
 		<button onclick={ onsubmit }>アプリ作成</button>
 	</form>
@@ -91,7 +91,7 @@
 						color #616161
 						font-size 0.95em
 
-						> i
+						> [data-fa]
 							margin-right 0.25em
 							color #96adac
 
@@ -100,7 +100,7 @@
 						margin 4px 0
 						font-size 0.8em
 
-						> i
+						> [data-fa]
 							margin-right 0.3em
 
 				section.permission
@@ -141,7 +141,7 @@
 						font-size 0.8em
 						color #999
 
-						> i
+						> [data-fa]
 							margin-right 4px
 
 				[type=text]
diff --git a/src/web/app/mobile/tags/drive-folder-selector.tag b/src/web/app/mobile/tags/drive-folder-selector.tag
index eebd62df6c..35d0208a07 100644
--- a/src/web/app/mobile/tags/drive-folder-selector.tag
+++ b/src/web/app/mobile/tags/drive-folder-selector.tag
@@ -2,8 +2,8 @@
 	<div class="body">
 		<header>
 			<h1>%i18n:mobile.tags.mk-drive-folder-selector.select-folder%</h1>
-			<button class="close" onclick={ cancel }><i class="fa fa-times"></i></button>
-			<button class="ok" onclick={ ok }><i class="fa fa-check"></i></button>
+			<button class="close" onclick={ cancel }>%fa:times%</button>
+			<button class="ok" onclick={ ok }>%fa:check%</button>
 		</header>
 		<mk-drive ref="browser" select-folder={ true }/>
 	</div>
diff --git a/src/web/app/mobile/tags/drive-selector.tag b/src/web/app/mobile/tags/drive-selector.tag
index 2edae67c1b..f8bc49dab0 100644
--- a/src/web/app/mobile/tags/drive-selector.tag
+++ b/src/web/app/mobile/tags/drive-selector.tag
@@ -2,8 +2,8 @@
 	<div class="body">
 		<header>
 			<h1>%i18n:mobile.tags.mk-drive-selector.select-file%<span class="count" if={ files.length > 0 }>({ files.length })</span></h1>
-			<button class="close" onclick={ cancel }><i class="fa fa-times"></i></button>
-			<button if={ opts.multiple } class="ok" onclick={ ok }><i class="fa fa-check"></i></button>
+			<button class="close" onclick={ cancel }>%fa:times%</button>
+			<button if={ opts.multiple } class="ok" onclick={ ok }>%fa:check%</button>
 		</header>
 		<mk-drive ref="browser" select-file={ true } multiple={ opts.multiple }/>
 	</div>
diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 2c36c43ac5..8350ce07e1 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -1,16 +1,16 @@
 <mk-drive>
 	<nav ref="nav">
-		<p onclick={ goRoot }><i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-drive.drive%</p>
+		<p onclick={ goRoot }>%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</p>
 		<virtual each={ folder in hierarchyFolders }>
-			<span><i class="fa fa-angle-right"></i></span>
+			<span>%fa:angle-right%</span>
 			<p onclick={ move }>{ folder.name }</p>
 		</virtual>
 		<virtual if={ folder != null }>
-			<span><i class="fa fa-angle-right"></i></span>
+			<span>%fa:angle-right%</span>
 			<p>{ folder.name }</p>
 		</virtual>
 		<virtual if={ file != null }>
-			<span><i class="fa fa-angle-right"></i></span>
+			<span>%fa:angle-right%</span>
 			<p>{ file.name }</p>
 		</virtual>
 	</nav>
@@ -81,7 +81,7 @@
 					&:last-child
 						font-weight bold
 
-					> i
+					> [data-fa]
 						margin-right 4px
 
 				> span
diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag
index 2cec4f329e..21203c8aaf 100644
--- a/src/web/app/mobile/tags/drive/file-viewer.tag
+++ b/src/web/app/mobile/tags/drive/file-viewer.tag
@@ -1,7 +1,7 @@
 <mk-drive-file-viewer>
 	<div class="preview">
 		<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name }>
-		<i if={ kind != 'image' } class="fa fa-file"></i>
+		<virtual if={ kind != 'image' }>%fa:file%</virtual>
 		<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
 			<span class="size">
 				<span class="width">{ file.properties.width }</span>
@@ -23,26 +23,26 @@
 			<span class="separator"></span>
 			<span class="data-size">{ bytesToSize(file.datasize) }</span>
 			<span class="separator"></span>
-			<span class="created-at" onclick={ showCreatedAt }><i class="fa fa-clock-o"></i><mk-time time={ file.created_at }/></span>
+			<span class="created-at" onclick={ showCreatedAt }>%fa:R clock%<mk-time time={ file.created_at }/></span>
 		</div>
 	</div>
 	<div class="menu">
 		<div>
 			<a href={ file.url + '?download' } download={ file.name }>
-				<i class="fa fa-download"></i>%i18n:mobile.tags.mk-drive-file-viewer.download%
+				%fa:download%%i18n:mobile.tags.mk-drive-file-viewer.download%
 			</a>
 			<button onclick={ rename }>
-				<i class="fa fa-pencil"></i>%i18n:mobile.tags.mk-drive-file-viewer.rename%
+				%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
 			</button>
 			<button onclick={ move }>
-				<i class="fa fa-folder-open"></i>%i18n:mobile.tags.mk-drive-file-viewer.move%
+				%fa:folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
 			</button>
 		</div>
 	</div>
 	<div class="hash">
 		<div>
 			<p>
-				<i class="fa fa-hashtag"></i>%i18n:mobile.tags.mk-drive-file-viewer.hash%
+				%fa:hashtag%%i18n:mobile.tags.mk-drive-file-viewer.hash%
 			</p>
 			<code>{ file.md5 }</code>
 		</div>
@@ -114,7 +114,7 @@
 					> .created-at
 						color #bdbdbd
 
-						> i
+						> [data-fa]
 							margin-right 2px
 
 			> .menu
@@ -149,7 +149,7 @@
 							border-color #444
 							box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
 
-						> i
+						> [data-fa]
 							margin-right 4px
 
 			> .hash
@@ -167,7 +167,7 @@
 						color #555
 						font-size 0.9em
 
-						> i
+						> [data-fa]
 							margin-right 4px
 
 					> code
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index 1499e8d7b7..93a8dba7e5 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/src/web/app/mobile/tags/drive/file.tag
@@ -15,7 +15,7 @@
 				<p class="data-size">{ bytesToSize(file.datasize) }</p>
 				<p class="separator"></p>
 				<p class="created-at">
-					<i class="fa fa-clock-o"></i><mk-time time={ file.created_at }/>
+					%fa:R clock%<mk-time time={ file.created_at }/>
 				</p>
 			</footer>
 		</div>
@@ -112,7 +112,7 @@
 							padding 0
 							color #BDBDBD
 
-							> i
+							> [data-fa]
 								margin-right 2px
 
 			&[data-is-selected]
diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag
index 27e86662c7..196e7e326b 100644
--- a/src/web/app/mobile/tags/drive/folder.tag
+++ b/src/web/app/mobile/tags/drive/folder.tag
@@ -1,6 +1,6 @@
 <mk-drive-folder onclick={ onclick }>
 	<div class="container">
-		<p class="name"><i class="fa fa-folder"></i>{ folder.name }</p><i class="fa fa-angle-right"></i>
+		<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
 	</div>
 	<style>
 		:scope
@@ -23,10 +23,10 @@
 					margin 0
 					padding 0
 
-					> i
+					> [data-fa]
 						margin-right 6px
 
-				> i
+				> [data-fa]
 					position absolute
 					top 0
 					bottom 0
diff --git a/src/web/app/mobile/tags/follow-button.tag b/src/web/app/mobile/tags/follow-button.tag
index f25b2ed50e..dd6e28861c 100644
--- a/src/web/app/mobile/tags/follow-button.tag
+++ b/src/web/app/mobile/tags/follow-button.tag
@@ -1,6 +1,10 @@
 <mk-follow-button>
-	<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait }><i class="fa fa-minus" if={ !wait && user.is_following }></i><i class="fa fa-plus" if={ !wait && !user.is_following }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ wait }></i>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' }</button>
-	<div class="init" if={ init }><i class="fa fa-spinner fa-pulse fa-fw"></i></div>
+	<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait }>
+		<virtual if={ !wait && user.is_following }>%fa:minus%</virtual>
+		<virtual if={ !wait && !user.is_following }>%fa:plus%</virtual>
+		<virtual if={ wait }>%fa:spinner .pluse .fw%</virtual>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' }
+	</button>
+	<div class="init" if={ init }>%fa:spinner .pluse .fw%</div>
 	<style>
 		:scope
 			display block
@@ -43,7 +47,7 @@
 					cursor wait !important
 					opacity 0.7
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/mobile/tags/init-following.tag b/src/web/app/mobile/tags/init-following.tag
index 6357f86a29..552b43348b 100644
--- a/src/web/app/mobile/tags/init-following.tag
+++ b/src/web/app/mobile/tags/init-following.tag
@@ -6,9 +6,9 @@
 		</virtual>
 	</div>
 	<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
-	<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
+	<p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%読み込んでいます<mk-ellipsis/></p>
 	<a class="refresh" onclick={ refresh }>もっと見る</a>
-	<button class="close" onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
+	<button class="close" onclick={ close } title="閉じる">%fa:times%</button>
 	<style>
 		:scope
 			display block
@@ -46,7 +46,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> .refresh
@@ -78,7 +78,7 @@
 				&:active
 					color #222
 
-				> i
+				> [data-fa]
 					padding 10px
 
 	</style>
diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag
index 1fdcc57641..0472ca2521 100644
--- a/src/web/app/mobile/tags/notification-preview.tag
+++ b/src/web/app/mobile/tags/notification-preview.tag
@@ -9,41 +9,41 @@
 	<virtual if={ notification.type == 'repost' }>
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p><i class="fa fa-retweet"></i>{ notification.post.user.name }</p>
+			<p>%fa:retweet%{ notification.post.user.name }</p>
 			<p class="post-ref">{ getPostSummary(notification.post.repost) }</p>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'quote' }>
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p><i class="fa fa-quote-left"></i>{ notification.post.user.name }</p>
+			<p>%fa:quote-left%{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'follow' }>
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p><i class="fa fa-user-plus"></i>{ notification.user.name }</p>
+			<p>%fa:user-plus%{ notification.user.name }</p>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'reply' }>
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p><i class="fa fa-reply"></i>{ notification.post.user.name }</p>
+			<p>%fa:reply%{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'mention' }>
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p><i class="fa fa-at"></i>{ notification.post.user.name }</p>
+			<p>%fa:at%{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
 	<virtual if={ notification.type == 'poll_vote' }>
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p><i class="fa fa-pie-chart"></i>{ notification.user.name }</p>
+			<p>%fa:pie-chart%{ notification.user.name }</p>
 			<p class="post-ref">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag
index 53222b9dbe..e3575a4920 100644
--- a/src/web/app/mobile/tags/notification.tag
+++ b/src/web/app/mobile/tags/notification.tag
@@ -18,7 +18,7 @@
 		</a>
 		<div class="text">
 			<p>
-				<i class="fa fa-retweet"></i>
+				%fa:retweet%
 				<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
 			</p>
 			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
@@ -30,7 +30,7 @@
 		</a>
 		<div class="text">
 			<p>
-				<i class="fa fa-quote-left"></i>
+				%fa:quote-left%
 				<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
 			</p>
 			<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
@@ -42,7 +42,7 @@
 		</a>
 		<div class="text">
 			<p>
-				<i class="fa fa-user-plus"></i>
+				%fa:user-plus%
 				<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
 			</p>
 		</div>
@@ -53,7 +53,7 @@
 		</a>
 		<div class="text">
 			<p>
-				<i class="fa fa-reply"></i>
+				%fa:reply%
 				<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
 			</p>
 			<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
@@ -65,7 +65,7 @@
 		</a>
 		<div class="text">
 			<p>
-				<i class="fa fa-at"></i>
+				%fa:at%
 				<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
 			</p>
 			<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
@@ -77,7 +77,7 @@
 		</a>
 		<div class="text">
 			<p>
-				<i class="fa fa-pie-chart"></i>
+				%fa:pie-chart%
 				<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
 			</p>
 			<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
diff --git a/src/web/app/mobile/tags/notifications.tag b/src/web/app/mobile/tags/notifications.tag
index 7406fd95e2..102631cd79 100644
--- a/src/web/app/mobile/tags/notifications.tag
+++ b/src/web/app/mobile/tags/notifications.tag
@@ -2,14 +2,14 @@
 	<div class="notifications" if={ notifications.length != 0 }>
 		<virtual each={ notification, i in notifications }>
 			<mk-notification notification={ notification }/>
-			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
+			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span>%fa:angle-up%{ notification._datetext }</span><span>%fa:angle-down%{ notifications[i + 1]._datetext }</span></p>
 		</virtual>
 	</div>
 	<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
-		<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
+		<virtual if={ fetchingMoreNotifications }>%fa:spinner .pluse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
 	</button>
 	<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
-	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -58,7 +58,7 @@
 				color #555
 				border-top solid 1px rgba(0, 0, 0, 0.05)
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> .empty
@@ -73,7 +73,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/mobile/tags/page/drive.tag b/src/web/app/mobile/tags/page/drive.tag
index 218960c702..1d2c595416 100644
--- a/src/web/app/mobile/tags/page/drive.tag
+++ b/src/web/app/mobile/tags/page/drive.tag
@@ -12,11 +12,11 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey Drive';
-			ui.trigger('title', '<i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-drive-page.drive%');
+			ui.trigger('title', '%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%');
 
 			ui.trigger('func', () => {
 				this.refs.ui.refs.browser.openContextMenu();
-			}, 'ellipsis-h');
+			}, '%fa:ellipsis-h%');
 
 			this.refs.ui.refs.browser.on('begin-fetch', () => {
 				Progress.start();
@@ -37,7 +37,7 @@
 				history.pushState(null, title, '/i/drive');
 
 				document.title = title;
-				ui.trigger('title', '<i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-drive-page.drive%');
+				ui.trigger('title', '%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%');
 			});
 
 			this.refs.ui.refs.browser.on('open-folder', (folder, silent) => {
@@ -50,7 +50,7 @@
 
 				document.title = title;
 				// TODO: escape html characters in folder.name
-				ui.trigger('title', '<i class="fa fa-folder-open"></i>' + folder.name);
+				ui.trigger('title', '%fa:folder-open%' + folder.name);
 			});
 
 			this.refs.ui.refs.browser.on('open-file', (file, silent) => {
diff --git a/src/web/app/mobile/tags/page/entrance/signup.tag b/src/web/app/mobile/tags/page/entrance/signup.tag
index 3798c94349..7b11bcad4d 100644
--- a/src/web/app/mobile/tags/page/entrance/signup.tag
+++ b/src/web/app/mobile/tags/page/entrance/signup.tag
@@ -1,6 +1,6 @@
 <mk-entrance-signup>
 	<mk-signup/>
-	<button class="cancel" type="button" onclick={ parent.signin } title="%i18n:mobile.tags.mk-entrance-signup.cancel%"><i class="fa fa-times"></i></button>
+	<button class="cancel" type="button" onclick={ parent.signin } title="%i18n:mobile.tags.mk-entrance-signup.cancel%">%fa:times%</button>
 	<style>
 		:scope
 			display block
@@ -31,7 +31,7 @@
 				&:active
 					color #222
 
-				> i
+				> [data-fa]
 					padding 14px
 
 	</style>
diff --git a/src/web/app/mobile/tags/page/home.tag b/src/web/app/mobile/tags/page/home.tag
index 1b2a4b1e13..99cc6b29bf 100644
--- a/src/web/app/mobile/tags/page/home.tag
+++ b/src/web/app/mobile/tags/page/home.tag
@@ -22,12 +22,12 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey'
-			ui.trigger('title', '<i class="fa fa-home"></i>%i18n:mobile.tags.mk-home.home%');
+			ui.trigger('title', '%fa:home%%i18n:mobile.tags.mk-home.home%');
 			document.documentElement.style.background = '#313a42';
 
 			ui.trigger('func', () => {
 				openPostForm();
-			}, 'pencil');
+			}, '%fa:pencil-alt%');
 
 			Progress.start();
 
diff --git a/src/web/app/mobile/tags/page/messaging-room.tag b/src/web/app/mobile/tags/page/messaging-room.tag
index e66e03177f..00ee265120 100644
--- a/src/web/app/mobile/tags/page/messaging-room.tag
+++ b/src/web/app/mobile/tags/page/messaging-room.tag
@@ -24,7 +24,7 @@
 
 				document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${user.name} | Misskey`;
 				// TODO: ユーザー名をエスケープ
-				ui.trigger('title', '<i class="fa fa-comments-o"></i>' + user.name);
+				ui.trigger('title', '%fa:R comments%' + user.name);
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/page/messaging.tag b/src/web/app/mobile/tags/page/messaging.tag
index 11e8f8cb48..29e98ce092 100644
--- a/src/web/app/mobile/tags/page/messaging.tag
+++ b/src/web/app/mobile/tags/page/messaging.tag
@@ -13,7 +13,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-messaging-page.message%';
-			ui.trigger('title', '<i class="fa fa-comments-o"></i>%i18n:mobile.tags.mk-messaging-page.message%');
+			ui.trigger('title', '%fa:R comments%%i18n:mobile.tags.mk-messaging-page.message%');
 
 			this.refs.ui.refs.index.on('navigate-user', user => {
 				this.page('/i/messaging/' + user.username);
diff --git a/src/web/app/mobile/tags/page/notifications.tag b/src/web/app/mobile/tags/page/notifications.tag
index 743de04393..1db9c5d661 100644
--- a/src/web/app/mobile/tags/page/notifications.tag
+++ b/src/web/app/mobile/tags/page/notifications.tag
@@ -14,12 +14,12 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-notifications-page.notifications%';
-			ui.trigger('title', '<i class="fa fa-bell-o"></i>%i18n:mobile.tags.mk-notifications-page.notifications%');
+			ui.trigger('title', '%fa:R bell%%i18n:mobile.tags.mk-notifications-page.notifications%');
 			document.documentElement.style.background = '#313a42';
 
 			ui.trigger('func', () => {
 				this.readAll();
-			}, 'check');
+			}, '%fa:check%');
 
 			Progress.start();
 
diff --git a/src/web/app/mobile/tags/page/post.tag b/src/web/app/mobile/tags/page/post.tag
index 6888229f89..91babd0b15 100644
--- a/src/web/app/mobile/tags/page/post.tag
+++ b/src/web/app/mobile/tags/page/post.tag
@@ -1,11 +1,11 @@
 <mk-post-page>
 	<mk-ui ref="ui">
 		<main if={ !parent.fetching }>
-			<a if={ parent.post.next } href={ parent.post.next }><i class="fa fa-angle-up"></i>%i18n:mobile.tags.mk-post-page.next%</a>
+			<a if={ parent.post.next } href={ parent.post.next }>%fa:angle-up%%i18n:mobile.tags.mk-post-page.next%</a>
 			<div>
 				<mk-post-detail ref="post" post={ parent.post }/>
 			</div>
-			<a if={ parent.post.prev } href={ parent.post.prev }><i class="fa fa-angle-down"></i>%i18n:mobile.tags.mk-post-page.prev%</a>
+			<a if={ parent.post.prev } href={ parent.post.prev }>%fa:angle-down%%i18n:mobile.tags.mk-post-page.prev%</a>
 		</main>
 	</mk-ui>
 	<style>
@@ -40,8 +40,9 @@
 						@media (min-width 500px)
 							margin-bottom 16px
 
-					> i
+					> [data-fa]
 						margin-right 4px
+
 	</style>
 	<script>
 		import ui from '../../scripts/ui-event';
@@ -54,7 +55,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey';
-			ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>%i18n:mobile.tags.mk-post-page.title%');
+			ui.trigger('title', '%fa:sticky-note-o%%i18n:mobile.tags.mk-post-page.title%');
 			document.documentElement.style.background = '#313a42';
 
 			Progress.start();
diff --git a/src/web/app/mobile/tags/page/search.tag b/src/web/app/mobile/tags/page/search.tag
index a66f07971a..5c39d97e51 100644
--- a/src/web/app/mobile/tags/page/search.tag
+++ b/src/web/app/mobile/tags/page/search.tag
@@ -13,7 +13,7 @@
 		this.on('mount', () => {
 			document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
 			// TODO: クエリをHTMLエスケープ
-			ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query);
+			ui.trigger('title', '%fa:search%' + this.opts.query);
 			document.documentElement.style.background = '#313a42';
 
 			Progress.start();
diff --git a/src/web/app/mobile/tags/page/selectdrive.tag b/src/web/app/mobile/tags/page/selectdrive.tag
index 79ea3548f8..1a790d806c 100644
--- a/src/web/app/mobile/tags/page/selectdrive.tag
+++ b/src/web/app/mobile/tags/page/selectdrive.tag
@@ -1,8 +1,8 @@
 <mk-selectdrive-page>
 	<header>
 		<h1>%i18n:mobile.tags.mk-selectdrive-page.select-file%<span class="count" if={ files.length > 0 }>({ files.length })</span></h1>
-		<button class="upload" onclick={ upload }><i class="fa fa-upload"></i></button>
-		<button if={ multiple } class="ok" onclick={ ok }><i class="fa fa-check"></i></button>
+		<button class="upload" onclick={ upload }>%fa:upload%</button>
+		<button if={ multiple } class="ok" onclick={ ok }>%fa:check%</button>
 	</header>
 	<mk-drive ref="browser" select-file={ true } multiple={ multiple } is-naked={ true } top={ 42 }/>
 
diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag
index 95b3f757d7..1d46e0546f 100644
--- a/src/web/app/mobile/tags/page/settings.tag
+++ b/src/web/app/mobile/tags/page/settings.tag
@@ -11,7 +11,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
-			ui.trigger('title', '<i class="fa fa-cog"></i>%i18n:mobile.tags.mk-settings-page.settings%');
+			ui.trigger('title', '%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%');
 			document.documentElement.style.background = '#313a42';
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/page/settings/api.tag b/src/web/app/mobile/tags/page/settings/api.tag
index 25413e2d80..8de0e96963 100644
--- a/src/web/app/mobile/tags/page/settings/api.tag
+++ b/src/web/app/mobile/tags/page/settings/api.tag
@@ -11,7 +11,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | API';
-			ui.trigger('title', '<i class="fa fa-key"></i>API');
+			ui.trigger('title', '%fa:key%API');
 		});
 	</script>
 </mk-api-info-page>
diff --git a/src/web/app/mobile/tags/page/settings/authorized-apps.tag b/src/web/app/mobile/tags/page/settings/authorized-apps.tag
index 78efd13e47..8d538eba5d 100644
--- a/src/web/app/mobile/tags/page/settings/authorized-apps.tag
+++ b/src/web/app/mobile/tags/page/settings/authorized-apps.tag
@@ -11,7 +11,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-authorized-apps-page.application%';
-			ui.trigger('title', '<i class="fa fa-puzzle-piece"></i>%i18n:mobile.tags.mk-authorized-apps-page.application%');
+			ui.trigger('title', '%fa:puzzle-piece%%i18n:mobile.tags.mk-authorized-apps-page.application%');
 		});
 	</script>
 </mk-authorized-apps-page>
diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag
index 305f16fec5..8881e95190 100644
--- a/src/web/app/mobile/tags/page/settings/profile.tag
+++ b/src/web/app/mobile/tags/page/settings/profile.tag
@@ -11,7 +11,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
-			ui.trigger('title', '<i class="fa fa-user"></i>%i18n:mobile.tags.mk-profile-setting-page.title%');
+			ui.trigger('title', '%fa:user%%i18n:mobile.tags.mk-profile-setting-page.title%');
 			document.documentElement.style.background = '#313a42';
 		});
 	</script>
@@ -19,7 +19,7 @@
 
 <mk-profile-setting>
 	<div>
-		<p><i class="fa fa-info-circle"></i>%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
+		<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
 		<div class="form">
 			<div style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=1024)' : '' } onclick={ clickBanner }>
 				<img src={ I.avatar_url + '?thumbnail&size=200' } alt="avatar" onclick={ clickAvatar }/>
@@ -49,7 +49,7 @@
 				<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
 			</label>
 		</div>
-		<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button>
+		<button class="save" onclick={ save } disabled={ saving }>%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
 	</div>
 	<style>
 		:scope
@@ -76,7 +76,7 @@
 					//border solid 1px #a9d5de
 					border-radius 8px
 
-					> i
+					> [data-fa]
 						margin-right 6px
 
 				> .form
@@ -165,7 +165,7 @@
 					&:disabled
 						opacity 0.7
 
-					> i
+					> [data-fa]
 						margin-right 4px
 
 	</style>
diff --git a/src/web/app/mobile/tags/page/settings/signin.tag b/src/web/app/mobile/tags/page/settings/signin.tag
index a91ebfb140..19aae34736 100644
--- a/src/web/app/mobile/tags/page/settings/signin.tag
+++ b/src/web/app/mobile/tags/page/settings/signin.tag
@@ -11,7 +11,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-signin-history-page.signin-history%';
-			ui.trigger('title', '<i class="fa fa-sign-in"></i>%i18n:mobile.tags.mk-signin-history-page.signin-history%');
+			ui.trigger('title', '%fa:sign-in%%i18n:mobile.tags.mk-signin-history-page.signin-history%');
 		});
 	</script>
 </mk-signin-history-page>
diff --git a/src/web/app/mobile/tags/page/settings/twitter.tag b/src/web/app/mobile/tags/page/settings/twitter.tag
index 870eeeb5bc..d8e19cb3e4 100644
--- a/src/web/app/mobile/tags/page/settings/twitter.tag
+++ b/src/web/app/mobile/tags/page/settings/twitter.tag
@@ -11,7 +11,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%';
-			ui.trigger('title', '<i class="fa fa-twitter"></i>%i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%');
+			ui.trigger('title', '%fa:twitter%%i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%');
 		});
 	</script>
 </mk-twitter-setting-page>
diff --git a/src/web/app/mobile/tags/page/user.tag b/src/web/app/mobile/tags/page/user.tag
index 1abeab492a..78ca534eb0 100644
--- a/src/web/app/mobile/tags/page/user.tag
+++ b/src/web/app/mobile/tags/page/user.tag
@@ -20,7 +20,7 @@
 				Progress.done();
 				document.title = user.name + ' | Misskey';
 				// TODO: ユーザー名をエスケープ
-				ui.trigger('title', '<i class="fa fa-user"></i>' + user.name);
+				ui.trigger('title', '%fa:user%' + user.name);
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index 28071a5cac..cfc5ee2f40 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -1,7 +1,7 @@
 <mk-post-detail>
 	<button class="read-more" if={ p.reply && p.reply.reply_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
-		<i class="fa fa-ellipsis-v" if={ !contextFetching }></i>
-		<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
+		<virtual if={ !contextFetching }>%fa:ellipsis-v%</virtual>
+		<virtual if={ contextFetching }>%fa:spinner .pluse%</virtual>
 	</button>
 	<div class="context">
 		<virtual each={ post in context }>
@@ -15,7 +15,7 @@
 		<p>
 			<a class="avatar-anchor" href={ '/' + post.user.username }>
 				<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/></a>
-				<i class="fa fa-retweet"></i><a class="name" href={ '/' + post.user.username }>
+				%fa:retweet%<a class="name" href={ '/' + post.user.username }>
 				{ post.user.name }
 			</a>
 			がRepost
@@ -44,16 +44,16 @@
 		<footer>
 			<mk-reactions-viewer post={ p }/>
 			<button onclick={ reply } title="%i18n:mobile.tags.mk-post-detail.reply%">
-				<i class="fa fa-reply"></i><p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
+				%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 			</button>
 			<button onclick={ repost } title="Repost">
-				<i class="fa fa-retweet"></i><p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
+				%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 			</button>
 			<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%">
-				<i class="fa fa-plus"></i><p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
+				%fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 			</button>
 			<button onclick={ menu } ref="menuButton">
-				<i class="fa fa-ellipsis-h"></i>
+				%fa:ellipsis-h%
 			</button>
 		</footer>
 	</article>
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index 2912bfdfa2..a408006949 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -1,6 +1,6 @@
 <mk-post-form>
 	<header>
-		<button class="cancel" onclick={ cancel }><i class="fa fa-times"></i></button>
+		<button class="cancel" onclick={ cancel }>%fa:times%</button>
 		<div>
 			<span if={ refs.text } class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span>
 			<button class="submit" onclick={ post }>%i18n:mobile.tags.mk-post-form.submit%</button>
@@ -14,15 +14,15 @@
 				<li class="file" each={ files }>
 					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
 				</li>
-				<li class="add" if={ files.length < 4 } title="%i18n:mobile.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }><i class="fa fa-plus"></i></li>
+				<li class="add" if={ files.length < 4 } title="%i18n:mobile.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li>
 			</ul>
 		</div>
 		<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/>
 		<mk-uploader ref="uploader"/>
-		<button ref="upload" onclick={ selectFile }><i class="fa fa-upload"></i></button>
-		<button ref="drive" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
-		<button class="kao" onclick={ kao }><i class="fa fa-smile-o"></i></button>
-		<button class="poll" onclick={ addPoll }><i class="fa fa-pie-chart"></i></button>
+		<button ref="upload" onclick={ selectFile }>%fa:upload%</button>
+		<button ref="drive" onclick={ selectFileFromDrive }>%fa:cloud%</button>
+		<button class="kao" onclick={ kao }>%fa:R smile%</button>
+		<button class="poll" onclick={ addPoll }>%fa:pie-chart%</button>
 		<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
 	</div>
 	<style>
@@ -126,10 +126,10 @@
 							&:hover
 								border-color rgba($theme-color, 0.3)
 
-								> i
+								> [data-fa]
 									color rgba($theme-color, 0.4)
 
-							> i
+							> [data-fa]
 								display block
 								width 60px
 								height 60px
diff --git a/src/web/app/mobile/tags/sub-post-content.tag b/src/web/app/mobile/tags/sub-post-content.tag
index c14233d3b7..9436b6c1d7 100644
--- a/src/web/app/mobile/tags/sub-post-content.tag
+++ b/src/web/app/mobile/tags/sub-post-content.tag
@@ -1,5 +1,5 @@
 <mk-sub-post-content>
-	<div class="body"><a class="reply" if={ post.reply_id }><i class="fa fa-reply"></i></a><span ref="text"></span><a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a></div>
+	<div class="body"><a class="reply" if={ post.reply_id }>%fa:reply%</a><span ref="text"></span><a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a></div>
 	<details if={ post.media }>
 		<summary>({ post.media.length }個のメディア)</summary>
 		<mk-images-viewer images={ post.media }/>
diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag
index 074422a20e..47d71d3d4b 100644
--- a/src/web/app/mobile/tags/timeline.tag
+++ b/src/web/app/mobile/tags/timeline.tag
@@ -1,15 +1,15 @@
 <mk-timeline>
 	<div class="init" if={ init }>
-		<i class="fa fa-spinner fa-pulse"></i>%i18n:common.loading%
+		%fa:spinner .pluse%%i18n:common.loading%
 	</div>
 	<div class="empty" if={ !init && posts.length == 0 }>
-		<i class="fa fa-comments-o"></i>{ opts.empty || '%i18n:mobile.tags.mk-timeline.empty%' }
+		%fa:R comments%{ opts.empty || '%i18n:mobile.tags.mk-timeline.empty%' }
 	</div>
 	<virtual each={ post, i in posts }>
 		<mk-timeline-post post={ post }/>
 		<p class="date" if={ i != posts.length - 1 && post._date != posts[i + 1]._date }>
-			<span><i class="fa fa-angle-up"></i>{ post._datetext }</span>
-			<span><i class="fa fa-angle-down"></i>{ posts[i + 1]._datetext }</span>
+			<span>%fa:angle-up%{ post._datetext }</span>
+			<span>%fa:angle-down%{ posts[i + 1]._datetext }</span>
 		</p>
 	</virtual>
 	<footer if={ !init }>
@@ -30,7 +30,7 @@
 				text-align center
 				color #999
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 			> .empty
@@ -40,7 +40,7 @@
 				text-align center
 				color #999
 
-				> i
+				> [data-fa]
 					display block
 					margin-bottom 16px
 					font-size 3em
@@ -145,7 +145,7 @@
 			<a class="avatar-anchor" href={ '/' + post.user.username }>
 				<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 			</a>
-			<i class="fa fa-retweet"></i>{'%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username }>{ post.user.name }</a>{'%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
+			%fa:retweet%{'%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username }>{ post.user.name }</a>{'%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
 		</p>
 		<mk-time time={ post.created_at }/>
 	</div>
@@ -166,7 +166,7 @@
 				<div class="text" ref="text">
 					<p class="channel" if={ p.channel != null }><a href={ _CH_URL_ + '/' + p.channel.id } target="_blank">{ p.channel.title }</a>:</p>
 					<a class="reply" if={ p.reply }>
-						<i class="fa fa-reply"></i>
+						%fa:reply%
 					</a>
 					<p class="dummy"></p>
 					<a class="quote" if={ p.repost != null }>RP:</a>
@@ -176,23 +176,23 @@
 				</div>
 				<mk-poll if={ p.poll } post={ p } ref="pollViewer"/>
 				<span class="app" if={ p.app }>via <b>{ p.app.name }</b></span>
-				<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i>
+				<div class="repost" if={ p.repost }>%fa:quote-right -flip-h%
 					<mk-post-preview class="repost" post={ p.repost }/>
 				</div>
 			</div>
 			<footer>
 				<mk-reactions-viewer post={ p } ref="reactionsViewer"/>
 				<button onclick={ reply }>
-					<i class="fa fa-reply"></i><p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
+					%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 				</button>
 				<button onclick={ repost } title="Repost">
-					<i class="fa fa-retweet"></i><p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
+					%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 				</button>
 				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton">
-					<i class="fa fa-plus"></i><p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
+					%fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 				</button>
 				<button class="menu" onclick={ menu } ref="menuButton">
-					<i class="fa fa-ellipsis-h"></i>
+					%fa:ellipsis-h%
 				</button>
 			</footer>
 		</div>
@@ -422,7 +422,7 @@
 						> .repost
 							margin 8px 0
 
-							> i:first-child
+							> [data-fa]:first-child
 								position absolute
 								top -8px
 								left -8px
diff --git a/src/web/app/mobile/tags/ui.tag b/src/web/app/mobile/tags/ui.tag
index bad6bf73fe..1d5e675250 100644
--- a/src/web/app/mobile/tags/ui.tag
+++ b/src/web/app/mobile/tags/ui.tag
@@ -52,10 +52,10 @@
 	<div class="main">
 		<div class="backdrop"></div>
 		<div class="content">
-			<button class="nav" onclick={ parent.toggleDrawer }><i class="fa fa-bars"></i></button>
-			<i class="fa fa-circle" if={ hasUnreadNotifications || hasUnreadMessagingMessages }></i>
+			<button class="nav" onclick={ parent.toggleDrawer }>%fa:bars%</button>
+			<virtual if={ hasUnreadNotifications || hasUnreadMessagingMessages }>%fa:circle%</virtual>
 			<h1 ref="title">Misskey</h1>
-			<button if={ func } onclick={ func }><i class="fa fa-{ funcIcon }"></i></button>
+			<button if={ func } onclick={ func }><mk-raw content={ funcIcon }/></button>
 		</div>
 	</div>
 	<style>
@@ -99,7 +99,7 @@
 						overflow hidden
 						text-overflow ellipsis
 
-						> i
+					> [data-fa]
 						> .icon
 							margin-right 8px
 
@@ -121,10 +121,10 @@
 						line-height $height
 						border-right solid 1px rgba(#000, 0.1)
 
-						> i
+						> [data-fa]
 							transition all 0.2s ease
 
-					> i
+					> [data-fa]
 						position absolute
 						top 8px
 						left 8px
@@ -234,19 +234,19 @@
 		</a>
 		<div class="links">
 			<ul>
-				<li><a href="/"><i class="fa fa-home"></i>%i18n:mobile.tags.mk-ui-nav.home%<i class="fa fa-angle-right"></i></a></li>
-				<li><a href="/i/notifications"><i class="fa fa-bell-o"></i>%i18n:mobile.tags.mk-ui-nav.notifications%<i class="i fa fa-circle" if={ hasUnreadNotifications }></i><i class="fa fa-angle-right"></i></a></li>
-				<li><a href="/i/messaging"><i class="fa fa-comments-o"></i>%i18n:mobile.tags.mk-ui-nav.messaging%<i class="i fa fa-circle" if={ hasUnreadMessagingMessages }></i><i class="fa fa-angle-right"></i></a></li>
+				<li><a href="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</a></li>
+				<li><a href="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<virtual if={ hasUnreadNotifications }>%fa:circle%</virtual>%fa:angle-right%</a></li>
+				<li><a href="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<virtual if={ hasUnreadMessagingMessages }>%fa:circle%</virtual>%fa:angle-right%</a></li>
 			</ul>
 			<ul>
-				<li><a href={ _CH_URL_ } target="_blank"><i class="fa fa-television"></i>%i18n:mobile.tags.mk-ui-nav.ch%<i class="fa fa-angle-right"></i></a></li>
-				<li><a href="/i/drive"><i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-ui-nav.drive%<i class="fa fa-angle-right"></i></a></li>
+				<li><a href={ _CH_URL_ } target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li>
+				<li><a href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-ui-nav.drive%%fa:angle-right%</a></li>
 			</ul>
 			<ul>
-				<li><a onclick={ search }><i class="fa fa-search"></i>%i18n:mobile.tags.mk-ui-nav.search%<i class="fa fa-angle-right"></i></a></li>
+				<li><a onclick={ search }>%fa:search%%i18n:mobile.tags.mk-ui-nav.search%%fa:angle-right%</a></li>
 			</ul>
 			<ul>
-				<li><a href="/i/settings"><i class="fa fa-cog"></i>%i18n:mobile.tags.mk-ui-nav.settings%<i class="fa fa-angle-right"></i></a></li>
+				<li><a href="/i/settings">%fa:cog%%i18n:mobile.tags.mk-ui-nav.settings%%fa:angle-right%</a></li>
 			</ul>
 		</div>
 		<a href={ _ABOUT_URL_ }><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a>
@@ -323,7 +323,7 @@
 						color #777
 						text-decoration none
 
-						> i:first-child
+						> [data-fa]:first-child
 							margin-right 0.5em
 
 						> .i
@@ -332,7 +332,7 @@
 							font-size 10px
 							color $theme-color
 
-						> i:last-child
+						> [data-fa]:last-child
 							position absolute
 							top 0
 							right 0
diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag
index a332e930e2..38c5b9cb2a 100644
--- a/src/web/app/mobile/tags/user.tag
+++ b/src/web/app/mobile/tags/user.tag
@@ -17,10 +17,10 @@
 				<div class="description">{ user.description }</div>
 				<div class="info">
 					<p class="location" if={ user.profile.location }>
-						<i class="fa fa-map-marker"></i>{ user.profile.location }
+						%fa:map-marker%{ user.profile.location }
 					</p>
 					<p class="birthday" if={ user.profile.birthday }>
-						<i class="fa fa-birthday-cake"></i>{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)
+						%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)
 					</p>
 				</div>
 				<div class="status">
@@ -217,43 +217,43 @@
 <mk-user-overview>
 	<mk-post-detail if={ user.pinned_post } post={ user.pinned_post } compact={ true }/>
 	<section class="recent-posts">
-		<h2><i class="fa fa-comments-o"></i>%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
+		<h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
 		<div>
 			<mk-user-overview-posts user={ user }/>
 		</div>
 	</section>
 	<section class="images">
-		<h2><i class="fa fa-picture-o"></i>%i18n:mobile.tags.mk-user-overview.images%</h2>
+		<h2>%fa:image%%i18n:mobile.tags.mk-user-overview.images%</h2>
 		<div>
 			<mk-user-overview-photos user={ user }/>
 		</div>
 	</section>
 	<section class="activity">
-		<h2><i class="fa fa-bar-chart"></i>%i18n:mobile.tags.mk-user-overview.activity%</h2>
+		<h2>%fa:bar-chart%%i18n:mobile.tags.mk-user-overview.activity%</h2>
 		<div>
 			<mk-user-overview-activity-chart user={ user }/>
 		</div>
 	</section>
 	<section class="keywords">
-		<h2><i class="fa fa-comment-o"></i>%i18n:mobile.tags.mk-user-overview.keywords%</h2>
+		<h2>%fa:R comment%%i18n:mobile.tags.mk-user-overview.keywords%</h2>
 		<div>
 			<mk-user-overview-keywords user={ user }/>
 		</div>
 	</section>
 	<section class="domains">
-		<h2><i class="fa fa-globe"></i>%i18n:mobile.tags.mk-user-overview.domains%</h2>
+		<h2>%fa:globe%%i18n:mobile.tags.mk-user-overview.domains%</h2>
 		<div>
 			<mk-user-overview-domains user={ user }/>
 		</div>
 	</section>
 	<section class="frequently-replied-users">
-		<h2><i class="fa fa-users"></i>%i18n:mobile.tags.mk-user-overview.frequently-replied-users%</h2>
+		<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.frequently-replied-users%</h2>
 		<div>
 			<mk-user-overview-frequently-replied-users user={ user }/>
 		</div>
 	</section>
 	<section class="followers-you-know" if={ SIGNIN && I.id !== user.id }>
-		<h2><i class="fa fa-users"></i>%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2>
+		<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2>
 		<div>
 			<mk-user-overview-followers-you-know user={ user }/>
 		</div>
@@ -307,7 +307,7 @@
 </mk-user-overview>
 
 <mk-user-overview-posts>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
 	<div if={ !initializing && posts.length > 0 }>
 		<virtual each={ posts }>
 			<mk-user-overview-posts-post-card post={ this }/>
@@ -436,7 +436,7 @@
 </mk-user-overview-posts-post-card>
 
 <mk-user-overview-photos>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p>
 	<div class="stream" if={ !initializing && images.length > 0 }>
 		<virtual each={ image in images }>
 			<a class="img" style={ 'background-image: url(' + image.media.url + '?thumbnail&size=256)' } href={ '/' + image.post.user.username + '/' + image.post.id }></a>
@@ -626,7 +626,7 @@
 </mk-user-overview-domains>
 
 <mk-user-overview-frequently-replied-users>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p>
 	<div if={ !initializing && users.length > 0 }>
 		<virtual each={ users }>
 			<mk-user-card user={ this.user }/>
@@ -678,7 +678,7 @@
 </mk-user-overview-frequently-replied-users>
 
 <mk-user-overview-followers-you-know>
-	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
+	<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
 	<div if={ !initializing && users.length > 0 }>
 		<virtual each={ user in users }>
 			<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
diff --git a/src/web/app/mobile/tags/users-list.tag b/src/web/app/mobile/tags/users-list.tag
index 295ae06694..ed8001333a 100644
--- a/src/web/app/mobile/tags/users-list.tag
+++ b/src/web/app/mobile/tags/users-list.tag
@@ -10,7 +10,7 @@
 		<span if={ !moreFetching }>%i18n:mobile.tags.mk-users-list.load-more%</span>
 		<span if={ moreFetching }>%i18n:common.loading%<mk-ellipsis/></span></button>
 	<p class="no" if={ !fetching && users.length == 0 }>{ opts.noUsers }</p>
-	<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style>
 		:scope
 			display block
@@ -73,7 +73,7 @@
 				text-align center
 				color #aaa
 
-				> i
+				> [data-fa]
 					margin-right 4px
 
 	</style>
diff --git a/src/web/app/status/tags/index.tag b/src/web/app/status/tags/index.tag
index cb379f66bc..dcadc66172 100644
--- a/src/web/app/status/tags/index.tag
+++ b/src/web/app/status/tags/index.tag
@@ -1,6 +1,6 @@
 <mk-index>
 	<h1>Misskey<i>Status</i></h1>
-	<p><i class="fa fa-info-circle"></i>%i18n:status.all-systems-maybe-operational%</p>
+	<p>%fa:info-circle%%i18n:status.all-systems-maybe-operational%</p>
 	<main>
 		<mk-cpu-usage connection={ connection }/>
 		<mk-mem-usage connection={ connection }/>
@@ -19,7 +19,7 @@
 				font-size 24px
 				font-weight normal
 
-				> i
+				> [data-fa]
 					font-style normal
 					color #f43b16
 
@@ -31,7 +31,7 @@
 				//border solid 1px #99ccb2
 				border-radius 4px
 
-				> i
+				> [data-fa]
 					margin-right 5px
 
 			> main
diff --git a/webpack/module/rules/fa.ts b/webpack/module/rules/fa.ts
new file mode 100644
index 0000000000..57691f9899
--- /dev/null
+++ b/webpack/module/rules/fa.ts
@@ -0,0 +1,54 @@
+/**
+ * Replace fontawesome symbols
+ */
+
+const StringReplacePlugin = require('string-replace-webpack-plugin');
+
+const fontawesome = require('@fortawesome/fontawesome');
+const solid = require('@fortawesome/fontawesome-free-solid');
+
+// Adds all the icons from the Solid style into our library for easy lookup
+fontawesome.library.add(solid);
+
+export default () => ({
+	enforce: 'pre',
+	test: /\.(tag|js|ts)$/,
+	exclude: /node_modules/,
+	loader: StringReplacePlugin.replace({
+		replacements: [{
+			pattern: /%fa:(.+?)%/g, replacement: (_, key) => {
+				const args = key.split(' ');
+				let prefix = 'fas';
+				let klass = '';
+				let transform = '';
+				let name;
+
+				args.forEach(arg => {
+					if (arg == 'R' || arg == 'S') {
+						prefix =
+							arg == 'R' ? 'far' :
+							arg == 'S' ? 'fas' :
+							'';
+					} else if (arg[0] == '.') {
+						klass += arg.substr(1) + ' ';
+					} else if (arg[0] == '-') {
+						transform = arg.substr(1).split('|').join(' ');
+					} else {
+						name = arg;
+					}
+				});
+
+				const icon = fontawesome.icon({ prefix, iconName: name });
+
+				if (icon) {
+					icon.class = klass;
+					icon.transform = fontawesome.parse.transform(transform);
+					return `<i data-fa style="display:inline-block" class="${name}">${icon.html[0]}</i>`;
+				} else {
+					console.warn(`'${name}' not found in fa`);
+					return '';
+				}
+			}
+		}]
+	})
+});
diff --git a/webpack/module/rules/index.ts b/webpack/module/rules/index.ts
index 9c1262b3d6..79740ce48e 100644
--- a/webpack/module/rules/index.ts
+++ b/webpack/module/rules/index.ts
@@ -1,4 +1,5 @@
 import i18n from './i18n';
+import fa from './fa';
 import base64 from './base64';
 import themeColor from './theme-color';
 import tag from './tag';
@@ -7,6 +8,7 @@ import typescript from './typescript';
 
 export default (lang, locale) => [
 	i18n(lang, locale),
+	fa(),
 	base64(),
 	themeColor(),
 	tag(),