From 25068f12f5e584df120efb0e0aa4ee38df7074c8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 8 Dec 2017 13:10:31 +0900
Subject: [PATCH] wip

---
 gulpfile.ts                                   | 10 ++++++---
 package.json                                  |  2 ++
 src/web/app/common/tags/messaging/form.tag    |  2 +-
 src/web/app/common/tags/nav-links.tag         |  2 +-
 src/web/app/common/tags/stream-indicator.tag  |  4 ++--
 .../desktop/tags/drive/base-contextmenu.tag   |  4 ++--
 .../desktop/tags/drive/file-contextmenu.tag   |  2 +-
 .../desktop/tags/drive/folder-contextmenu.tag |  4 ++--
 src/web/app/desktop/tags/drive/folder.tag     |  2 +-
 .../tags/home-widgets/recommended-polls.tag   |  4 ++--
 .../app/desktop/tags/home-widgets/trends.tag  |  2 +-
 .../tags/home-widgets/user-recommendation.tag |  2 +-
 src/web/app/desktop/tags/notifications.tag    |  2 +-
 src/web/app/desktop/tags/post-form.tag        |  2 +-
 .../tags/select-file-from-drive-window.tag    |  2 +-
 .../tags/select-folder-from-drive-window.tag  |  2 +-
 src/web/app/desktop/tags/settings.tag         |  4 ++--
 src/web/app/desktop/tags/timeline.tag         |  4 ++--
 src/web/app/desktop/tags/ui.tag               |  7 +++---
 src/web/app/desktop/tags/user.tag             |  4 ++--
 src/web/app/desktop/tags/widgets/activity.tag |  2 +-
 src/web/app/desktop/tags/window.tag           |  2 +-
 src/web/app/mobile/tags/drive/file-viewer.tag |  2 +-
 .../app/mobile/tags/notification-preview.tag  |  2 +-
 src/web/app/mobile/tags/notification.tag      |  2 +-
 src/web/app/mobile/tags/page/drive.tag        |  2 +-
 src/web/app/mobile/tags/page/post.tag         |  2 +-
 src/web/app/mobile/tags/page/settings.tag     |  8 +++----
 .../app/mobile/tags/page/settings/signin.tag  |  2 +-
 .../app/mobile/tags/page/settings/twitter.tag |  2 +-
 src/web/app/mobile/tags/post-form.tag         |  2 +-
 src/web/app/mobile/tags/ui.tag                |  8 +++----
 src/web/app/mobile/tags/user.tag              |  2 +-
 webpack/module/rules/fa.ts                    | 22 ++++++++++++-------
 34 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/gulpfile.ts b/gulpfile.ts
index 95aeb6e06..dd8fc7a63 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -20,11 +20,15 @@ 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');
+import * as fontawesome from '@fortawesome/fontawesome';
+import * as regular from '@fortawesome/fontawesome-free-regular';
+import * as solid from '@fortawesome/fontawesome-free-solid';
+import * as brands from '@fortawesome/fontawesome-free-brands';
 
-// Adds all the icons from the Solid style into our library for easy lookup
+// Add icons
+fontawesome.library.add(regular);
 fontawesome.library.add(solid);
+fontawesome.library.add(brands);
 
 import version from './src/version';
 
diff --git a/package.json b/package.json
index df82e1f67..584d6bd10 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
 	},
 	"dependencies": {
 		"@fortawesome/fontawesome": "^1.0.0",
+		"@fortawesome/fontawesome-free-brands": "^5.0.0",
+		"@fortawesome/fontawesome-free-regular": "^5.0.0",
 		"@fortawesome/fontawesome-free-solid": "^5.0.0",
 		"@prezzemolo/rap": "0.1.2",
 		"@prezzemolo/zip": "0.0.3",
diff --git a/src/web/app/common/tags/messaging/form.tag b/src/web/app/common/tags/messaging/form.tag
index 9a687aebf..7b133a71c 100644
--- a/src/web/app/common/tags/messaging/form.tag
+++ b/src/web/app/common/tags/messaging/form.tag
@@ -9,7 +9,7 @@
 		%fa:upload%
 	</button>
 	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
-		%fa:folder-open%
+		%fa:R folder-open%
 	</button>
 	<input name="file" type="file" accept="image/*"/>
 	<style>
diff --git a/src/web/app/common/tags/nav-links.tag b/src/web/app/common/tags/nav-links.tag
index 3994aa464..71f0453db 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 %fa:twitter%</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:B twitter%</a>
 	<style>
 		:scope
 			display inline
diff --git a/src/web/app/common/tags/stream-indicator.tag b/src/web/app/common/tags/stream-indicator.tag
index 73c27fe13..2f905b8a6 100644
--- a/src/web/app/common/tags/stream-indicator.tag
+++ b/src/web/app/common/tags/stream-indicator.tag
@@ -1,10 +1,10 @@
 <mk-stream-indicator>
 	<p if={ connection.state == 'initializing' }>
-		%fa:spinner .spin%
+		%fa:spinner .spin .pulse%
 		<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
 	</p>
 	<p if={ connection.state == 'reconnecting' }>
-		%fa:spinner .spin%
+		%fa:spinner .spin .pulse%
 		<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
 	</p>
 	<p if={ connection.state == 'connected' }>
diff --git a/src/web/app/desktop/tags/drive/base-contextmenu.tag b/src/web/app/desktop/tags/drive/base-contextmenu.tag
index 14ce83bdc..b16dbf55d 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>%fa:folder-o%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
+				<p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
 			</li>
 			<li onclick={ parent.upload }>
 				<p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
 			</li>
 			<li onclick={ parent.urlUpload }>
-				<p>%fa:cloud-upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
+				<p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
 			</li>
 		</ul>
 	</mk-contextmenu>
diff --git a/src/web/app/desktop/tags/drive/file-contextmenu.tag b/src/web/app/desktop/tags/drive/file-contextmenu.tag
index 54b95923d..532417c75 100644
--- a/src/web/app/desktop/tags/drive/file-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/file-contextmenu.tag
@@ -10,7 +10,7 @@
 			<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>%fa:trash-o%%i18n:common.delete%</p>
+				<p>%fa:R trash-alt%%i18n:common.delete%</p>
 			</li>
 			<li class="separator"></li>
 			<li class="has-child">
diff --git a/src/web/app/desktop/tags/drive/folder-contextmenu.tag b/src/web/app/desktop/tags/drive/folder-contextmenu.tag
index e5ad7beb2..c6a1ea3b8 100644
--- a/src/web/app/desktop/tags/drive/folder-contextmenu.tag
+++ b/src/web/app/desktop/tags/drive/folder-contextmenu.tag
@@ -5,7 +5,7 @@
 				<p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
 			</li>
 			<li onclick={ parent.newWindow }>
-				<p>%fa:share-square-o%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
+				<p>%fa:R window-restore%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
 			</li>
 			<li class="separator"></li>
 			<li onclick={ parent.rename }>
@@ -13,7 +13,7 @@
 			</li>
 			<li class="separator"></li>
 			<li onclick={ parent.delete }>
-				<p>%fa:trash-o%%i18n:common.delete%</p>
+				<p>%fa:R trash-alt%%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 d4b57183a..0b7ee6e2d 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"><virtual if={ hover }>%fa:folder-open .fw%</virtual><virtual if={ !hover }>%fa:folder .fw%</virtual>{ folder.name }</p>
+	<p class="name"><virtual if={ hover }>%fa:R folder-open .fw%</virtual><virtual if={ !hover }>%fa:R folder .fw%</virtual>{ folder.name }</p>
 	<style>
 		:scope
 			display block
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 8b3713cae..9bc29054d 100644
--- a/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
+++ b/src/web/app/desktop/tags/home-widgets/recommended-polls.tag
@@ -1,7 +1,7 @@
 <mk-recommended-polls-home-widget>
 	<virtual if={ !data.compact }>
-		<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>
+		<p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
+		<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
 	</virtual>
 	<div class="poll" if={ !loading && poll != null }>
 		<p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
diff --git a/src/web/app/desktop/tags/home-widgets/trends.tag b/src/web/app/desktop/tags/home-widgets/trends.tag
index a0f4c9fcc..77480ec4d 100644
--- a/src/web/app/desktop/tags/home-widgets/trends.tag
+++ b/src/web/app/desktop/tags/home-widgets/trends.tag
@@ -1,7 +1,7 @@
 <mk-trends-home-widget>
 	<virtual if={ !data.compact }>
 		<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>
+		<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
 	</virtual>
 	<div class="post" if={ !loading && post != null }>
 		<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
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 1f38a7321..d95b50661 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">%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>
+		<button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
 	</virtual>
 	<div class="user" if={ !loading && users.length != 0 } each={ _user in users }>
 		<a class="avatar-anchor" href={ '/' + _user.username }>
diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag
index b65f1a6a6..d0e994063 100644
--- a/src/web/app/desktop/tags/notifications.tag
+++ b/src/web/app/desktop/tags/notifications.tag
@@ -56,7 +56,7 @@
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
-						<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>
+						<p>%fa:chart-pie%<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>
diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag
index b235720d2..8e5171c83 100644
--- a/src/web/app/desktop/tags/post-form.tag
+++ b/src/web/app/desktop/tags/post-form.tag
@@ -17,7 +17,7 @@
 	<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>
+	<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }>%fa:chart-pie%</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/select-file-from-drive-window.tag b/src/web/app/desktop/tags/select-file-from-drive-window.tag
index c4f880488..17cc60798 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
@@ -138,7 +138,7 @@
 		this.files = [];
 
 		this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
-		this.title = this.opts.title || '%fa:file-o%ファイルを選択';
+		this.title = this.opts.title || '%fa:R file%ファイルを選択';
 
 		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 938084301..3c66a4e6d 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
@@ -92,7 +92,7 @@
 	<script>
 		this.files = [];
 
-		this.title = this.opts.title || '%fa:folder-o%フォルダを選択';
+		this.title = this.opts.title || '%fa:R folder%フォルダを選択';
 
 		this.on('mount', () => {
 			this.refs.window.on('closed', () => {
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 304229d92..46cd40552 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -5,8 +5,8 @@
 		<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 == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
+		<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in-alt .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>
diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag
index b12728e19..81c16591f 100644
--- a/src/web/app/desktop/tags/timeline.tag
+++ b/src/web/app/desktop/tags/timeline.tag
@@ -142,8 +142,8 @@
 					%fa:ellipsis-h%
 				</button>
 				<button onclick={ toggleDetail } title="%i18n:desktop.tags.mk-timeline-post.detail">
-					<i class="fa fa-caret-down" if={ !isDetailOpened }></i>
-					<i class="fa fa-caret-up" if={ isDetailOpened }></i>
+					<virtual if={ !isDetailOpened }>%fa:caret-down%</virtual>
+					<virtual if={ isDetailOpened }>%fa:caret-up%</virtual>
 				</button>
 			</footer>
 		</div>
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index 41433b15c..cb5b1ec72 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -245,7 +245,7 @@
 				&:active
 					color darken(#9eaba8, 30%)
 
-				> [data-fa].icon
+				> [data-fa].bell
 					font-size 1.2em
 					line-height 48px
 
@@ -455,7 +455,6 @@
 
 						> [data-fa]:last-child
 							margin-left 5px
-							vertical-align super
 							font-size 10px
 							color $theme-color
 
@@ -756,10 +755,10 @@
 							*
 								pointer-events none
 
-							> i:first-of-type
+							> [data-fa]:first-of-type
 								margin-right 6px
 
-							> i:last-of-type
+							> [data-fa]:last-of-type
 								display block
 								position absolute
 								top 0
diff --git a/src/web/app/desktop/tags/user.tag b/src/web/app/desktop/tags/user.tag
index 386ecc27c..f22239e43 100644
--- a/src/web/app/desktop/tags/user.tag
+++ b/src/web/app/desktop/tags/user.tag
@@ -53,7 +53,7 @@
 		<footer>
 			<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>
+			<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }>%fa:chart-bar%グラフ</a>
 		</footer>
 	</div>
 	<style>
@@ -233,7 +233,7 @@
 		<p>%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
 	</div>
 	<div class="twitter" if={ user.twitter }>
-		<p>%fa:twitter%<a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
+		<p>%fa:B 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">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p>
diff --git a/src/web/app/desktop/tags/widgets/activity.tag b/src/web/app/desktop/tags/widgets/activity.tag
index e98049e4c..2419a75ca 100644
--- a/src/web/app/desktop/tags/widgets/activity.tag
+++ b/src/web/app/desktop/tags/widgets/activity.tag
@@ -1,6 +1,6 @@
 <mk-activity-widget data-melt={ design == 2 }>
 	<virtual if={ design == 0 }>
-		<p class="title">%fa:bar-chart%%i18n:desktop.tags.mk-activity-widget.title%</p>
+		<p class="title">%fa:chart-bar%%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 }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
index a47eb60b4..5b4b3c83e 100644
--- a/src/web/app/desktop/tags/window.tag
+++ b/src/web/app/desktop/tags/window.tag
@@ -5,7 +5,7 @@
 			<header ref="header" onmousedown={ onHeaderMousedown }>
 				<h1 data-yield="header"><yield from="header"/></h1>
 				<div>
-					<button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト">%fa:window-restore%</button>
+					<button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト">%fa:R window-restore%</button>
 					<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる">%fa:times%</button>
 				</div>
 			</header>
diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag
index 21203c8aa..da895359d 100644
--- a/src/web/app/mobile/tags/drive/file-viewer.tag
+++ b/src/web/app/mobile/tags/drive/file-viewer.tag
@@ -35,7 +35,7 @@
 				%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
 			</button>
 			<button onclick={ move }>
-				%fa:folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
+				%fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
 			</button>
 		</div>
 	</div>
diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag
index 0472ca252..373b1f157 100644
--- a/src/web/app/mobile/tags/notification-preview.tag
+++ b/src/web/app/mobile/tags/notification-preview.tag
@@ -43,7 +43,7 @@
 	<virtual if={ notification.type == 'poll_vote' }>
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p>%fa:pie-chart%{ notification.user.name }</p>
+			<p>%fa:chart-pie%{ 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 e3575a492..de98f2554 100644
--- a/src/web/app/mobile/tags/notification.tag
+++ b/src/web/app/mobile/tags/notification.tag
@@ -77,7 +77,7 @@
 		</a>
 		<div class="text">
 			<p>
-				%fa:pie-chart%
+				%fa:chart-pie%
 				<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/page/drive.tag b/src/web/app/mobile/tags/page/drive.tag
index 1d2c59541..0033ffe65 100644
--- a/src/web/app/mobile/tags/page/drive.tag
+++ b/src/web/app/mobile/tags/page/drive.tag
@@ -50,7 +50,7 @@
 
 				document.title = title;
 				// TODO: escape html characters in folder.name
-				ui.trigger('title', '%fa:folder-open%' + folder.name);
+				ui.trigger('title', '%fa:R folder-open%' + folder.name);
 			});
 
 			this.refs.ui.refs.browser.on('open-file', (file, silent) => {
diff --git a/src/web/app/mobile/tags/page/post.tag b/src/web/app/mobile/tags/page/post.tag
index 91babd0b1..5303ca8d3 100644
--- a/src/web/app/mobile/tags/page/post.tag
+++ b/src/web/app/mobile/tags/page/post.tag
@@ -55,7 +55,7 @@
 
 		this.on('mount', () => {
 			document.title = 'Misskey';
-			ui.trigger('title', '%fa:sticky-note-o%%i18n:mobile.tags.mk-post-page.title%');
+			ui.trigger('title', '%fa:R sticky-note%%i18n:mobile.tags.mk-post-page.title%');
 			document.documentElement.style.background = '#313a42';
 
 			Progress.start();
diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag
index 304ba3c59..978978214 100644
--- a/src/web/app/mobile/tags/page/settings.tag
+++ b/src/web/app/mobile/tags/page/settings.tag
@@ -22,8 +22,8 @@
 	<ul>
 		<li><a href="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li>
 		<li><a href="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</a></li>
-		<li><a href="./settings/twitter">%fa:twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li>
-		<li><a href="./settings/signin-history">%fa:sign-in%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
+		<li><a href="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li>
+		<li><a href="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
 		<li><a href="./settings/api">%fa:key%%i18n:mobile.tags.mk-settings-page.api%%fa:angle-right%</a></li>
 	</ul>
 	<ul>
@@ -78,10 +78,10 @@
 						line-height $height
 						color #4d635e
 
-						> i:nth-of-type(1)
+						> [data-fa]:nth-of-type(1)
 							margin-right 4px
 
-						> i:nth-of-type(2)
+						> [data-fa]:nth-of-type(2)
 							display block
 							position absolute
 							top 0
diff --git a/src/web/app/mobile/tags/page/settings/signin.tag b/src/web/app/mobile/tags/page/settings/signin.tag
index 19aae3473..1a9e63886 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', '%fa:sign-in%%i18n:mobile.tags.mk-signin-history-page.signin-history%');
+			ui.trigger('title', '%fa:sign-in-alt%%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 d8e19cb3e..02661d3b6 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', '%fa:twitter%%i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%');
+			ui.trigger('title', '%fa:B twitter%%i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%');
 		});
 	</script>
 </mk-twitter-setting-page>
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index a40800694..3ac7296f7 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -22,7 +22,7 @@
 		<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>
+		<button class="poll" onclick={ addPoll }>%fa:chart-pie%</button>
 		<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
 	</div>
 	<style>
diff --git a/src/web/app/mobile/tags/ui.tag b/src/web/app/mobile/tags/ui.tag
index 1d5e67525..62e128489 100644
--- a/src/web/app/mobile/tags/ui.tag
+++ b/src/web/app/mobile/tags/ui.tag
@@ -99,8 +99,7 @@
 						overflow hidden
 						text-overflow ellipsis
 
-					> [data-fa]
-						> .icon
+						[data-fa]
 							margin-right 8px
 
 						> img
@@ -124,7 +123,7 @@
 						> [data-fa]
 							transition all 0.2s ease
 
-					> [data-fa]
+					> [data-fa].circle
 						position absolute
 						top 8px
 						left 8px
@@ -326,9 +325,8 @@
 						> [data-fa]:first-child
 							margin-right 0.5em
 
-						> .i
+						> [data-fa].circle
 							margin-left 6px
-							vertical-align super
 							font-size 10px
 							color $theme-color
 
diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag
index 38c5b9cb2..c2b1e3dce 100644
--- a/src/web/app/mobile/tags/user.tag
+++ b/src/web/app/mobile/tags/user.tag
@@ -229,7 +229,7 @@
 		</div>
 	</section>
 	<section class="activity">
-		<h2>%fa:bar-chart%%i18n:mobile.tags.mk-user-overview.activity%</h2>
+		<h2>%fa:chart-bar%%i18n:mobile.tags.mk-user-overview.activity%</h2>
 		<div>
 			<mk-user-overview-activity-chart user={ user }/>
 		</div>
diff --git a/webpack/module/rules/fa.ts b/webpack/module/rules/fa.ts
index 57691f989..15f8775f0 100644
--- a/webpack/module/rules/fa.ts
+++ b/webpack/module/rules/fa.ts
@@ -4,11 +4,15 @@
 
 const StringReplacePlugin = require('string-replace-webpack-plugin');
 
-const fontawesome = require('@fortawesome/fontawesome');
-const solid = require('@fortawesome/fontawesome-free-solid');
+import * as fontawesome from '@fortawesome/fontawesome';
+import * as regular from '@fortawesome/fontawesome-free-regular';
+import * as solid from '@fortawesome/fontawesome-free-solid';
+import * as brands from '@fortawesome/fontawesome-free-brands';
 
-// Adds all the icons from the Solid style into our library for easy lookup
+// Add icons
+fontawesome.library.add(regular);
 fontawesome.library.add(solid);
+fontawesome.library.add(brands);
 
 export default () => ({
 	enforce: 'pre',
@@ -19,18 +23,19 @@ export default () => ({
 			pattern: /%fa:(.+?)%/g, replacement: (_, key) => {
 				const args = key.split(' ');
 				let prefix = 'fas';
-				let klass = '';
+				const classes = [];
 				let transform = '';
 				let name;
 
 				args.forEach(arg => {
-					if (arg == 'R' || arg == 'S') {
+					if (arg == 'R' || arg == 'S' || arg == 'B') {
 						prefix =
 							arg == 'R' ? 'far' :
 							arg == 'S' ? 'fas' :
+							arg == 'B' ? 'fab' :
 							'';
 					} else if (arg[0] == '.') {
-						klass += arg.substr(1) + ' ';
+						classes.push('fa-' + arg.substr(1));
 					} else if (arg[0] == '-') {
 						transform = arg.substr(1).split('|').join(' ');
 					} else {
@@ -38,10 +43,11 @@ export default () => ({
 					}
 				});
 
-				const icon = fontawesome.icon({ prefix, iconName: name });
+				const icon = fontawesome.icon({ prefix, iconName: name }, {
+					classes: classes
+				});
 
 				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 {