✌️

src/web/app/app.styl

@@ -168,3 +168,6 @@ mk-locker
 	width 100%
 	height 100%
 	cursor wait
+
+[data-fa]
+	display inline-block

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

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 '';