From 08a15102b2c8494d9320c7a677f34321f603f9d8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 8 Dec 2017 14:35:50 +0900
Subject: [PATCH] :v:

---
 src/web/app/app.styl            |  3 +++
 src/web/app/desktop/tags/ui.tag | 18 +++++++++++++++---
 webpack/module/rules/fa.ts      |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/web/app/app.styl b/src/web/app/app.styl
index 94faba73d4..de66df74d4 100644
--- a/src/web/app/app.styl
+++ b/src/web/app/app.styl
@@ -168,3 +168,6 @@ mk-locker
 	width 100%
 	height 100%
 	cursor wait
+
+[data-fa]
+	display inline-block
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index 0398809188..052568062a 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -124,7 +124,8 @@
 
 <mk-ui-header-search>
 	<form class="search" onsubmit={ onsubmit }>
-		<input ref="q" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
+		%fa:search%
+		<input ref="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
 		<div class="result"></div>
 	</form>
 	<style>
@@ -134,11 +135,22 @@
 				display block
 				float left
 
+				> [data-fa]
+					display block
+					position absolute
+					top 0
+					left 0
+					width 48px
+					text-align center
+					line-height 48px
+					color #9eaba8
+					pointer-events none
+
 				> input
 					user-select text
 					cursor auto
 					margin 8px 0 0 0
-					padding 6px 18px
+					padding 6px 18px 6px 36px
 					width 14em
 					height 32px
 					font-size 1em
@@ -150,7 +162,7 @@
 					transition color 0.5s ease, border 0.5s ease
 					font-family FontAwesome, sans-serif
 
-					&::-webkit-input-placeholder
+					&:placeholder-shown
 						color #9eaba8
 
 					&:hover
diff --git a/webpack/module/rules/fa.ts b/webpack/module/rules/fa.ts
index 15f8775f01..47c72a28a1 100644
--- a/webpack/module/rules/fa.ts
+++ b/webpack/module/rules/fa.ts
@@ -49,7 +49,7 @@ export default () => ({
 
 				if (icon) {
 					icon.transform = fontawesome.parse.transform(transform);
-					return `<i data-fa style="display:inline-block" class="${name}">${icon.html[0]}</i>`;
+					return `<i data-fa class="${name}">${icon.html[0]}</i>`;
 				} else {
 					console.warn(`'${name}' not found in fa`);
 					return '';