Fixing FontAwesome icon handling in search placeholder (#1247)

3 files changed, 46 insertions, 4 deletions

diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 87bda33..b5429fd 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -57,6 +57,10 @@
         font-weight: $font-weight-bold;
     }
 
+    .td-search-wrapper .fa {
+        color: $navbar-dark-color;
+    }
+
     .td-search-input {
         border: none;
         color: $navbar-dark-color;
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 4c8fe88..bd8ca34 100644
--- a/assets/scss/_search.scss
+++ b/assets/scss/_search.scss
@@ -1,8 +1,21 @@
 // Search
+.td-search-wrapper {
+    position: relative;
+    background: transparent;
+    width: 90%;
+}
+
+.td-search-wrapper:not(:focus-within) {
+    color: $input-placeholder-color;
+}
 
-.td-search-input {
+.td-search-wrapper .td-search-input:not(:focus) {
     background: transparent;
-    max-width: 90%;
+}
+
+.td-search-wrapper .td-search-input {
+    width: 100%;
+    text-indent: 1.25em;
 
     &.form-control:focus {
         border-color: lighten($primary, 60%);
@@ -13,8 +26,30 @@
     @if $enable-rounded {
         border-radius: 1rem;
     }
+}
+
+.td-search-wrapper .fa {
+    // Vertically center the content.
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    height: 100%;
+
+    // Position this on the left of the input.
+    position: absolute;
+    left: 0.75em;
+
+    // Click-through to the underlying input.
+    pointer-events: none;
+}
+
+// Hide the icon on focus.
+.td-search-wrapper:focus-within .fa {
+    display: none;
+}
 
-    font-family: $font-family-base, $font-awesome-font-name;
+.td-search-wrapper:focus-within .td-search-input {
+   text-indent: 0px;
 }
 
 .popover.offline-search-result {
diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html
index 22e9002..86eb0c1 100644
--- a/layouts/partials/search-input.html
+++ b/layouts/partials/search-input.html
@@ -1,5 +1,8 @@
 {{ if .Site.Params.gcs_engine_id -}}
-<input type="search" class="form-control td-search-input" placeholder="&#xf002; {{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+<div class="td-search-wrapper">
+<i class="fa fa-search"></i>
+<input type="search" class="form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+</div>
 {{ else if .Site.Params.algolia_docsearch -}}
 <div id="docsearch"></div>
 {{ else if .Site.Params.offlineSearch -}}