Adding a custom icon next to the hamburger nav icon

Is it possible to add a 'Font Awesome' icon or any custom icon next to the hamburger nav icon and link it to the search page?

Like so:

I already have Font Awesome set up on my website and would like to use this icon:

<i class="fa-solid fa-magnifying-glass"></i>

Website URL: https://steven.squarespace.com

Thank you

Hopefully somebody will be kind enough to help out with this.

This is FontAwesome 5 or 6. And have you declared FontAwesome Library link to Code Injection Header yet?

15 hours ago, tuanphan said:

This is FontAwesome 5 or 6. And have you declared FontAwesome Library link to Code Injection Header yet?

Hi Tuan, it's Font Awesome 6. And yes, I've already declared it in the header.

7 hours ago, tuanphan said:

Add 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="custom-search"><i class="fa-solid fa-magnifying-glass"></i></a>').insertBefore('.header-burger');
});
</script>
<style>
  a.custom-search {
    margin-right: 20px;
    display: inline-block;
}
</style>

Hi Tuan, thank you for the code. One slight visual issue though.

It looks fine on desktop, but on mobile, the spacing is a little off.

This is the original without the code:

And this is with the code:

Would it be possible to have it look as close to the original as possible?

As always, thank you for your time.

Use this code under

<style>
  @media screen and (max-width:767px) {
  .header-burger {
    left: -5vw !important;
    position: relative;
}
a.custom-search {
    position: relative;
    left: -3vw;
}
  }
</style>

40 minutes ago, tuanphan said:

Use this code under

<style>
  @media screen and (max-width:767px) {
  .header-burger {
    left: -5vw !important;
    position: relative;
}
a.custom-search {
    position: relative;
    left: -3vw;
}
  }
</style>

 

Thank you, Tuan!