add search icon on sidebar and search-page

Author: MAX-786

docs/_static/custom.css

@@ -189,6 +189,20 @@ div.admonition.admonition-todo>.admonition-title::before {
   padding-bottom: 0;
 }
 
+#search-form .search-icon {
+  position: absolute;
+  top: 50%;
+  transform: translate(0,-50%);
+  color: #a4a6a7;
+  left: 6.875rem;
+  z-index: 100;
+}
+
+#search-form .form-control {
+  border-radius: .2rem;
+  padding-left: 2.1875rem;
+}
+
 .form-control:focus {
   box-shadow: none;
   border-width: 2px;
@@ -248,6 +262,7 @@ ul.search li p.context {
 
 .bd-search .input-group {
   flex-direction: row-reverse;
+  align-items: center;
 }
 
 .bd-search {
@@ -260,6 +275,21 @@ ul.search li p.context {
   padding-left: .5em;
 }
 
+.bd-search .input-group-append {
+  align-self: stretch;
+}
+
+.bd-search input {
+  padding-left: 2.1875rem;
+}
+
+.bd-search .search-icon {
+  position: absolute;
+  color: #a4a6a7;
+  left: .625rem;
+  z-index: 100;
+}
+
 .input-group-text kbd {
   padding: 0rem 0.4rem;
   font-size: 135%;

docs/_static/search_shortcut.js

@@ -13,13 +13,6 @@
             }
         });
 
-        // $("button[type='reset']").on('click',function () {
-        //     const formInputs = $('#search-form').find('.form-check-input');
-        //     if(formInputs.length) {
-        //         formInputs.prop('checked',false);
-        //         formInputs.find('#doc_section_all').prop('checked',true);
-        //     }
-        // });
     } else {
         $(document).keydown(function(event) {
             if ((event.ctrlKey || event.metaKey) && event.key == "k") {

docs/_templates/search-field.html

@@ -7,6 +7,7 @@
         <kbd id="search-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
       </span>
     </div>
+    <i class="search-icon fa fa-search fa-lg" aria-hidden="true"></i>
     <input
       type="search" name="q" id="search-input"
       class="form-control"

docs/_templates/search.html

@@ -55,6 +55,7 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
               <kbd id="search-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
             </span>
           </div>
+          <i class="search-icon fa fa-search fa-lg" aria-hidden="true"></i>
           <input
             type="search" name="q" id="q"
             class="form-control"

docs/conf.py

@@ -223,7 +223,7 @@
 html_logo = "_static/logo.svg"
 html_favicon = "_static/favicon.ico"
 
-html_css_files = ["custom.css", ("print.css", {"media": "print"})]
+html_css_files = ["custom.css", ("print.css", {"media": "print"}),"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"]
 
 # See http://sphinx-doc.org/ext/todo.html#confval-todo_include_todos
 todo_include_todos = True