Fixing magnifying glass icon handling in search bar

google · Oct 7, 2022 · dedbe4f · dedbe4f
1 parent 326b0f1
commit dedbe4f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
@@ -1,8 +1,13 @@
 // Search
-
-.td-search-input {
+.td-search-wrapper {
+    position: relative;
     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%);
@@ -14,7 +19,25 @@
         border-radius: 1rem;
     }
 
-    font-family: $font-family-base, $font-awesome-font-name;
+    font-family: $font-family-base;
+}
+
+.td-search-wrapper .fa {
+    // Make this consistent with placeholder formatting.
+    color: $input-placeholder-color;
+
+    // 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;
 }
 
 .popover.offline-search-result {

diff --git 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 -}}