Missing country flags

I am using a function to translate the two letters country code to an emoji, something like:

    {{ range $country := $.Scratch.Get "countries" }}
    {{ (printf ":%s:" $country) | lower | emojify }}
    {{ end }}

where countries is an array of country code. Some countries are rendered properly but others aren’t, such as :be:. Looking at the reference page, there is indeed only a handful country flags. Is there a way to add them all?

Could you explain rendered where?

FYI, windows system doesn’t have flags emoji where others will display them correctly.

Thanks for the quick reply. It’s rendered as part of a layout. I am collecting the countries in a slice that looks as follow:

[AT BE CH DE ES FR JP MA SE TN UK US]

The output of the script above, based on that slice is something like:

:at: :be: :ch: :de: :es: :fr: :jp: :ma: :se: :tn: :uk: :us:

I’ve noticed that only certain flags are available at 🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more (linked from the doc of emojify).

I don’t necessarily want to use emojis for this. I could use anything else like font awesome or whatever. I don’t know where to look though.

If emojify function is limited to webfx.com if emoji is not available there I doubt you will be able to do anything about it.

Thanks but that’s why I am asking here. Rather than circling around what I requested initially, I’d like to see if anyone here knows of an alternative.

free flags here

You will need to use the correct ISO country code for Great Britain: GB not UK.[1]

npm install flag-icons
config.toml
[params.flags]
# Aspect ratio must be 4:3
width = 24
height = 18

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'node_modules/flag-icons/'
target = 'assets/flag-icons'

layouts/partials/render-flag.html
{{- $country := . }}
{{- $path := printf "flag-icons/flags/4x3/%s.svg" (lower $country) }}
{{- with resources.Get $path }}
  <img
    src="{{ .RelPermalink }}"
    width="{{ string site.Params.flags.width }}"
    height="{{ string site.Params.flags.height }}"
    alt="{{ printf "country flag for %s" $country }}"
  >
{{- else }}
  {{- errorf "Unable to find %s" $path }}
{{- end -}}

Then, in your templates, do something like:

{{ $countries := slice "AT" "BE" "CH" "DE" "ES" "FR" "JP" "MA" "SE" "TN" "GB" "US" }}
{{ range $countries }}
  {{ partial "render-flag.html" . }}
{{ end }}

Or for a single flag:

{{ partial "render-flag.html" "BE" }}

The ISO country code is case-insensitive.


  1. Or replace GB with UK in the partial before the resource call. ↩︎

3 Likes

Awesome, that worked perfectly. Thanks!

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.