Icons in Navigation

Site URL: https://www.mirboonorth.com/

Is it possible to replace text in the navigation with an icon? I would like to replace the word 'Search' (which is a custom page, not the standard 'Search' page offered by Squarespace, with a magnifying glass icon. I have tried the Alt code for a magnifying glass but it isn't recognised. 

Add to Design > Custom CSS. Replace with search image url

header.Header [href="/search-website"] {
    background-image: url(https://cdn.pixabay.com/photo/2022/07/31/20/00/little-boy-7356705__480.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

Thank you. Do you have a recommendation for image dimensions? 

I tried with this link https://drive.google.com/file/d/1N2XhuvbB_WK42LGpJWD6s3J3PGiZwsCJ/view?usp=sharing but it just made the word 'Search' transparent

On 9/12/2022 at 10:38 AM, sarahprime said:

I tried with this link https://drive.google.com/file/d/1N2XhuvbB_WK42LGpJWD6s3J3PGiZwsCJ/view?usp=sharing but it just made the word 'Search' transparent

Use a direct url, the gg drive won't work.

You can upload image to Squarespace site to get url

https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

suppose your file name is search.jpeg

when you uploaded it, it will have url: https://www.mirboonorth.com/s/search.jpeg

Thank you! If I wanted to add the search icon to the secondary navigation, how would I tweak the code? 

6 hours ago, sarahprime said:

Thank you! If I wanted to add the search icon to the secondary navigation, how would I tweak the code? 

Before or after button?

After 🙂 

10 hours ago, sarahprime said:

After 🙂 

You can add item in Secondary Nav, then we give code to change it to icon

I've moved it to secondary nav - Discover Mirboo North | South Gippsland, Victoria

17 hours ago, sarahprime said:

I've moved it to secondary nav - Discover Mirboo North | South Gippsland, Victoria

Use this code

header.Header [href="/search-website"] {
    background-image: url(https://cdn.pixabay.com/photo/2022/07/31/20/00/little-boy-7356705__480.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
    background-color: transparent !important;
}

Thank you so much!