Replace folder nav name with icon on both desktop and mobille

Hello, everyone.

I'd like to hack a way to deliver translated content.  The campaign doesn't have budget for Weglot but they can get volunteers to translate a single page into multiple languages.

I'd like to use an icon to indicate translated pages for those who aren't proficient in English (and also keep my primary nav clean).

I was able to get there on desktop with the CSS below—but the icon is missing from the mobile menu. (Screen caps attached.) How do I add that in?

The folder slug is /multilingual and the navigation title is a single space.

The site isn't live yet, I'm afraid.

Can anyone lend a hand?

Thank you so much!

/*MULTILINGUAL NAV ICON */
a.header-nav-folder-title[href="/multilingual"]:before
  {
    content: "";
    display: inline-block;
    background-image: url(https://images.squarespace-cdn.com/content/65c80e54bc05ab34638a1fbb/1e653753-328c-458f-aca8-ca502514bf4e/solid+globe+icon.png?content-type=image%2Fpng);
    width: 25px;
    height: 25px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}
 

@sarahoneill Hi! Replace the code you shared in your post with the following:

a[href="/multilingual"] .header-menu-nav-item-content span:nth-child(2) {
    display: none;
}

a.header-nav-folder-title[href="/multilingual"]:before, a[href="/multilingual"] .header-menu-nav-item-content:before {
    content: "";
    display: inline-block;
    background-image: url(https://images.squarespace-cdn.com/content/65c80e54bc05ab34638a1fbb/1e653753-328c-458f-aca8-ca502514bf4e/solid+globe+icon.png?content-type=image%2Fpng);
    width: 25px;
    height: 25px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}