From 4ed81b48a7f4c0280d9c57fcafe082a402c26383 Mon Sep 17 00:00:00 2001
From: "minseok.park" <minseok.park@bankwareglobal.com>
Date: Mon, 1 Jul 2024 18:23:23 +0900
Subject: [PATCH] remove -- fontawesome cdn & add search svg

---
 src/css/header.css              | 13 ++++++++-----
 src/img/ico-search-active.svg   |  1 +
 src/img/ico-search.svg          |  1 +
 src/partials/head.hbs           |  1 -
 src/partials/header-content.hbs |  2 +-
 5 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 src/img/ico-search-active.svg
 create mode 100644 src/img/ico-search.svg

diff --git a/src/css/header.css b/src/css/header.css
index 38b8ee5..475c4ba 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -100,10 +100,13 @@ body {
 }
 
 #search-field > i {
+  background: url(../img/ico-search.svg) no-repeat center;
   position: absolute;
-  top: 15px;
+  top: 14px;
   right: 20px;
-  color: #dbdbdb;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
 }
 
 #search-input {
@@ -111,12 +114,12 @@ body {
   color: #333;
   font-family: inherit;
   font-size: 0.95rem;
-  width: 150px;
+  width: 120px;
   height: 45px;
   border: 1px solid #dbdbdb;
   border-radius: 28px;
   line-height: 1.5;
-  padding: 0 1rem !important;
+  padding: 0 2.15rem 0 1rem !important;
 }
 
 #search-input:disabled {
@@ -136,7 +139,7 @@ body {
 }
 
 #search-input:focus + i {
-  color: var(--color-bwg-main);
+  background: url(../img/ico-search-active.svg) no-repeat center;
 }
 
 .navbar-burger {
diff --git a/src/img/ico-search-active.svg b/src/img/ico-search-active.svg
new file mode 100644
index 0000000..1298d1f
--- /dev/null
+++ b/src/img/ico-search-active.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#0072ce" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
\ No newline at end of file
diff --git a/src/img/ico-search.svg b/src/img/ico-search.svg
new file mode 100644
index 0000000..0814c73
--- /dev/null
+++ b/src/img/ico-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dbdbdb" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
\ No newline at end of file
diff --git a/src/partials/head.hbs b/src/partials/head.hbs
index 59553ad..7dd18b2 100644
--- a/src/partials/head.hbs
+++ b/src/partials/head.hbs
@@ -1,4 +1,3 @@
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
 {{> head-prelude}}
 {{> head-title}}
 {{> head-info}}
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index 6029a1e..86d254d 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -13,7 +13,7 @@
         <div id="search-field" class="field">
           {{!-- <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}> --}}
           <input id="search-input" type="text">
-          <i class="fas fa-search"></i>
+          <i/>
         </div>
       </div>
       {{/if}}
-- 
2.18.1