Flag Icons in navbar (All browser)

support
1

Hi,

I am looking for flags in my navigation to switch between english and german. The switch is working, but my flags are shown only on Windows 11 in firefox(156) and on mobile browser(Android 16/firefox and chrome). On Edge and Chrome on Windows 11 they do not work.

I have seen this Emojis

But do not know, if this works on all browser.

At the end, if nothing else works I will insert an image/svg for the flags. In another post I have seen this: How can I replace languages by flag images?

This it is at the moment on firefox and how it should look like:

Screenshot 2026-09-23 154721

And this it looks like on chrome:

Screenshot 2026-09-23 154751

This is my hugo.toml:

[languages]
[languages.de]
locale = 'de-DE'
label = 'Deutsch🇩🇪'
contentDir = 'content/de'
flag = '/images/svgs/flag-german.svg' // I'll insert this if nothing else will work
weight = 1

And a snippet of my navbar:

{ range .AllTranslations }}
<li class="nav-item language-pipe">|</li>
<li class="nav-item">
    <a class="nav-link" href="{{ .Permalink }}">
        <img class="menu-item" alt="Language items" src="/images/svgs/menu-arrow.svg">
        {{ .Language.Label }}
    </a>
</li>
{{ end }}

What is the best solution for my problem?

3

So looks like the emoji translates to unicode symbols

&#x1f1e9;&#x1f1ea; which renders as :germany: It’s a special styled ‘D’ followed by an ‘E’.

no image inside as far as I can see

if you check the Full Emoji List, v18.0 the images displayed there are real images with an ALT text and the first column is also rendered as DE …

<td class='andr alt'><img alt='&#x1F1E9;&#x1F1EA;' class='imgs' src='data:image/png;base64,R0lGODlhDwAPALMPAP7XAF0HAdejADY2NpwEA/hhAAMDA8oKCf0AAKZpADwwABUVFWBPACUVDBELAgAAACH5BAEAAA8ALAAAAAAPAA8AAARh0KxJzbv4rcG7kRa2dZzhDEuokajZgsEhz0HTbkuA7DxBHAQHTsfb/XY1lKLAbCYICOAvwABYr4LmkXrFCqyJA4LbBQi+Z2bAoWi7GwnrGcDIZBwMRpxu7zu+dX12CgwNEQA7'></td>

and if you ask some AI-search engines:

you need a Font that renders these sequences as Flags IF the platform (browser) does not support that by itself :wink:

might also help to not set a font for the sequence

PS. if you wonder why that is displayed viewing the Forum in chrome check the source code (ctrl+u) of this page, you will see a link to an image

https://emoji.discourse-cdn.com/twitter/germany.png?v=15

ignoring the “flag = country <> language” discussions from the past

4

OK, I am bit confused now :slight_smile:

What shall I do or what is the best solution?

I have tried changing the fonts, but that did not work. Shall I use an emoji font or images now?

I have asked the AI-search and got this result:

Screenshot 2026-09-23 175250
Screenshot 2026-09-23 1752501268×526 35.8 KB

Looks like I need two.. one for Android/Chrome and one for Windows. But I do not know about the license for the Windows font. How about the size of the fonts and are two small images smaller or bigger than the fonts?

5

I’m out here, sry

If it were mine, i would get in a deeper discussion with the AI. should also be able to answer the license questions.

maybe it can tell about a best practice or even provide a working setup.

for manual testing I would set up a minimal test page without noise and check the results incl. the real source (ctrl+u) and in dev console on the systems - check the used fonts…

6

Thanks for your time.. I have got it working now. I am using the emoji font:

It is working on Edge and Chrome now. But how you can see on the screenshot the navbar has got two different fonts:

Screenshot 2026-09-23 190547

Thats my navbar code:

{{ range .AllTranslations }}
<li class="nav-item language-pipe">|</li>
<li class="nav-item">
    <a class="nav-link" href="{{ .Permalink }}">
        <img class="menu-item" alt="Language items" src="/images/svgs/menu-arrow.svg">
        <span class="language-label">{{ .Language.Label }}</span>
    </a>
</li>
{{ end }}

My CSS:

@font-face {
  font-family: "Noto Color Emoji";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/NotoColorEmoji-Regular.ttf");
}

.language-label {
    font-family: "Noto Color Emoji" !important;
}

and my hugo.toml:

[languages]
[``languages.de``]
locale = 'de-DE'
label = 'Deutsch 🇩🇪'
contentDir = 'content/de'

I need to split it somehow into two peaces. One font for the links and one font for the flags.

7

move the flag part to a param

[languages.de.params]
      flag = '&#x1f1e9;&#x1f1ea;'
8

Got it like this now:

[languages]
[languages.de]
locale = 'de-DE'
label = 'Deutsch'
contentDir = 'content/de'
[languages.de.params]
flag = '🇩🇪'

and my navbar:

{{ range .AllTranslations }}
<li class="nav-item language-pipe">|</li>
<li class="nav-item">
    <a class="nav-link" href="{{ .Permalink }}">
        <img class="menu-item" alt="Language items" src="/images/svgs/menu-arrow.svg">
        {{ .Language.Label }}
            <span class="language-flag">{{ .Language.Params.Flag }}</span>
    </a>
</li>
{{ end }}

Thanks for your help!! :smiley:

9

i would rename that class maybe language-flag as you dont style the label anymore

10

good point.. i have done it.