How to add Search icon to Header

[tuanphan]

#1. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<a href="/search" class="header-search"><img src="https://assets.squarespace.com/universal/images-v6/icons/icon-searchqueries-20-dark.png"/></a>').appendTo('nav.header-nav-list');
});
</script>

#2. Use this code to Custom CSS box

nav.header-nav-list {
  align-items: center;
}
a.header-search {
  margin-left: 1.5vw;
}

#3. Result

#4. If you want to change it to white color, use this to Custom CSS box

a.header-search {
    filter: invert(1);
    -webkit-filter: invert(1);
}