How to add linked icon to navigation bar?

Hey everyone, 

I want to add a search icon to the navigation bar of my website that will also be linked once you click on it.

Is there an easy way to do it?

https://cyan-dove-em8n.squarespace.com/

Have a look at this tutorial:

https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71

@Ziggy

This is a bit different than what I wanted, I just need the search icon to be present, and once clicked it will be linked to a different section. 

Add a link to your navigation, set the title to SEARCH and the link to /search

Then add this to Header Code Injection:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script>
  // Wait for the DOM to load
  document.addEventListener('DOMContentLoaded', function () {
    // Find the anchor element with the class "search-link"
    const searchLink = document.querySelector('.header-nav a[href="/search"]');

    // Check if the element is found
    if (searchLink) {
      // Remove the text content
      searchLink.textContent = '';

      // Create an icon element using Font Awesome
      const iconElement = document.createElement('i');
      iconElement.className = 'fas fa-search'; // Font Awesome search icon class

      // Append the icon element to the anchor element
      searchLink.appendChild(iconElement);
    }
  });
</script>