[GH-ISSUE #236] Language Flags

kerem commented

2026-03-03 14:35:01 +03:00

Owner

Originally created by @matze-berg on GitHub (May 4, 2016).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/236

I have missed the possibility to get a flag by the language. So i added .flag-icon-lang-en

Here is the new flag-icon-base.scss:

$countries: (
dj: "aa", ru: "ady", na: "af", gh: "ak", et: "am", sy: "arc", in: "as", tr: "av", bo: "ay", az: "az", om: "bal", by: "be", zm: "bem", bg: "bg", mu: "bho", vu: "bi", ml: "bm", fr: "br", pk: "brh", ba: "bs", es: "ca", fm: "chk", sg: "cmn", cz: "cs", cs: "cu", is: "da", tg: "dag", de: "de", ne: "dje", cn: "dta", mv: "dv", bt: "dz", al: "el", gb: "en", ee: "et", ae: "fa", gm: "ff", no: "fi", sd: "fia", mp: "fil", fj: "fj", dk: "fo", mr: "fuc", wf: "fud", md: "gag", ki: "gil", ar: "gn", im: "gv", tw: "hak", us: "haw", il: "he", sr: "hns", pg: "ho", at: "hr", ht: "ht", hu: "hu", am: "hy", id: "id", ng: "ig", it: "it", ca: "iu", jp: "ja", ge: "ka", cd: "kg", kz: "kk", gl: "kl", kh: "km", iq: "ku", er: "kun", kg: "ky", va: "la", lu: "lb", ug: "lg", la: "lo", lt: "lt", lv: "lv", sl: "men", eh: "mey", mg: "mg", mh: "mh", ck: "mi", mk: "mk", mn: "mn", mt: "mt", pt: "mwl", mm: "my", nr: "na", zw: "nd", nu: "niu", nl: "nl", za: "nr", mw: "ny", bq: "pap", pw: "pau", pl: "pl", gw: "pov", af: "ps", ch: "rm", bi: "rn", me: "rom", rw: "rw", cf: "sg", si: "sh", lk: "si", as: "sm", se: "sma", fi: "smn", rs: "sr", td: "sre", ls: "st", tl: "tet", tj: "tg", my: "th", tk: "tkl", tv: "tvl", pf: "ty", ua: "uk", vn: "vi", mz: "vmw"
);


@mixin flag-icon-background {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

.flag-icon {
    @include flag-icon-background();
    position: relative;
    display: inline-block;
    width: (4 / 3) * 1em;
    line-height: 1em;
    &:before {
        content: '\00a0';
    }
    &.flag-icon-squared {
        width: 1em;
    }
}

@mixin flag-icon($country) {
    .flag-icon-#{$country} {
        background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
        &.flag-icon-squared {
            background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
        }
    }
    $langCountry: map-get($countries, $country);
    @if $langCountry != '' {
        .flag-icon-lang-#{$langCountry} {
            background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
            &.flag-icon-squared {
                background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
            }
        }
    }
}

Originally created by @matze-berg on GitHub (May 4, 2016). Original GitHub issue: https://github.com/lipis/flag-icons/issues/236 I have missed the possibility to get a flag by the language. So i added **.flag-icon-lang-en** ## Here is the new flag-icon-base.scss: ``` scss $countries: ( dj: "aa", ru: "ady", na: "af", gh: "ak", et: "am", sy: "arc", in: "as", tr: "av", bo: "ay", az: "az", om: "bal", by: "be", zm: "bem", bg: "bg", mu: "bho", vu: "bi", ml: "bm", fr: "br", pk: "brh", ba: "bs", es: "ca", fm: "chk", sg: "cmn", cz: "cs", cs: "cu", is: "da", tg: "dag", de: "de", ne: "dje", cn: "dta", mv: "dv", bt: "dz", al: "el", gb: "en", ee: "et", ae: "fa", gm: "ff", no: "fi", sd: "fia", mp: "fil", fj: "fj", dk: "fo", mr: "fuc", wf: "fud", md: "gag", ki: "gil", ar: "gn", im: "gv", tw: "hak", us: "haw", il: "he", sr: "hns", pg: "ho", at: "hr", ht: "ht", hu: "hu", am: "hy", id: "id", ng: "ig", it: "it", ca: "iu", jp: "ja", ge: "ka", cd: "kg", kz: "kk", gl: "kl", kh: "km", iq: "ku", er: "kun", kg: "ky", va: "la", lu: "lb", ug: "lg", la: "lo", lt: "lt", lv: "lv", sl: "men", eh: "mey", mg: "mg", mh: "mh", ck: "mi", mk: "mk", mn: "mn", mt: "mt", pt: "mwl", mm: "my", nr: "na", zw: "nd", nu: "niu", nl: "nl", za: "nr", mw: "ny", bq: "pap", pw: "pau", pl: "pl", gw: "pov", af: "ps", ch: "rm", bi: "rn", me: "rom", rw: "rw", cf: "sg", si: "sh", lk: "si", as: "sm", se: "sma", fi: "smn", rs: "sr", td: "sre", ls: "st", tl: "tet", tj: "tg", my: "th", tk: "tkl", tv: "tvl", pf: "ty", ua: "uk", vn: "vi", mz: "vmw" ); @mixin flag-icon-background { background-size: contain; background-position: 50%; background-repeat: no-repeat; } .flag-icon { @include flag-icon-background(); position: relative; display: inline-block; width: (4 / 3) * 1em; line-height: 1em; &:before { content: '\00a0'; } &.flag-icon-squared { width: 1em; } } @mixin flag-icon($country) { .flag-icon-#{$country} { background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg); &.flag-icon-squared { background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg); } } $langCountry: map-get($countries, $country); @if $langCountry != '' { .flag-icon-lang-#{$langCountry} { background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg); &.flag-icon-squared { background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg); } } } } ```

kerem closed this issue

2026-03-03 14:35:01 +03:00

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@lipis commented on GitHub (May 8, 2016):

Sorry but flags belong to countries/areas.. not languages :)

@lipis commented on GitHub (May 8, 2016): Sorry but flags belong to countries/areas.. not languages :)

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@matze-berg commented on GitHub (Oct 13, 2016):

True. But do you choose country or languages for websites?
So it is possible to use them as language selector, too. And the countries are still working.

But ok. Ignore my changes if you want. Why should it be so easy to switch languages with cour flags css. ;) :P

@matze-berg commented on GitHub (Oct 13, 2016): True. But do you choose country or languages for websites? So it is possible to use them as language selector, too. And the countries are still working. But ok. Ignore my changes if you want. Why should it be so easy to switch languages with cour flags css. ;) :P

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@tomlutzenberger commented on GitHub (Oct 13, 2016):

@MatneX Flags are not always used to display languages. Also, some countries use more than one language officially.

@tomlutzenberger commented on GitHub (Oct 13, 2016): @MatneX Flags are not always used to display languages. Also, some countries use more than one language officially.

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@lipis commented on GitHub (Oct 13, 2016):

Also maintenance.. there are thousands of languages and I'm not sure how it will work with simple things.. on which flag to use for English.. US, GB, AU? So in the end of the day.. that's why you have all the sources to adjust those things to your personal needs..

@lipis commented on GitHub (Oct 13, 2016): Also maintenance.. there are thousands of languages and I'm not sure how it will work with simple things.. on which flag to use for English.. US, GB, AU? So in the end of the day.. that's why you have all the sources to adjust those things to your personal needs..

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@moldovans commented on GitHub (Oct 9, 2017):

really, how often do you think your package is used to reference countries, rather than languages?
Give a language its default country as fist country that matches it, and let users optionally modify that setting. Surely, languages have no flags, but your package should be flexible enough to become a popular one...

@moldovans commented on GitHub (Oct 9, 2017): really, how often do you think your package is used to reference countries, rather than languages? Give a language its default country as fist country that matches it, and let users optionally modify that setting. Surely, languages have no flags, but your package should be flexible enough to become a popular one...

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@tomlutzenberger commented on GitHub (Oct 9, 2017):

http://www.flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/

@tomlutzenberger commented on GitHub (Oct 9, 2017): http://www.flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@mrmckeb commented on GitHub (Oct 10, 2017):

I use flags as flags too. I understand the need that some people have for flag icons as languages, but I'd also suggest talking to your UX/design team about alternatives.

As an Australian, clicking a British flag (or a half-British half-American flag) is a learnt behaviour, but still an unintuitive one. This selection method isn't used by companies like Facebook, Google, Microsoft, etc.

@mrmckeb commented on GitHub (Oct 10, 2017): I use flags as flags too. I understand the need that some people have for flag icons as languages, but I'd also suggest talking to your UX/design team about alternatives. As an Australian, clicking a British flag (or a half-British half-American flag) is a learnt behaviour, but still an unintuitive one. This selection method isn't used by companies like Facebook, Google, Microsoft, etc.

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@moldovans commented on GitHub (Nov 9, 2017):

@tomlutzenberger
Do you really think we are so stupid don't understand what there are countries having 2 or more languages, and a flag does not represent a language?

However, personally I don't care about this philosophy.
I need to find a way to associate a country's flag with a language, and if your library does not offer such a way, I will search another one, it's all.

You can write me a philosophical essay on the languages and countries associations, however if my client asked me to click a picture to change a language, I don't care about what do YOU or ME personally think about that question.

we are here to solve practical needs, so please let me associate a UK flag to the EN language, without telling me that is not so good my idea.

@moldovans commented on GitHub (Nov 9, 2017): @tomlutzenberger Do you really think we are so stupid don't understand what there are countries having 2 or more languages, and a flag does not represent a language? However, personally I don't care about this philosophy. I need to find a way to associate a country's flag with a language, and if your library does not offer such a way, I will search another one, it's all. You can write me a philosophical essay on the languages and countries associations, however if my client asked me to click a picture to change a language, I don't care about what do YOU or ME personally think about that question. we are here to **solve** practical needs, so please let me associate a UK flag to the EN language, without telling me that is not so good my idea.

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@Findus23 commented on GitHub (Nov 9, 2017):

@serhioV
I agree with, @lipis that there is no general mapping from languages to flags. But this doesn't mean that there couldn't be a mapping for a single project (e.g. because all of your German speaking users are coming from Germany and you don't make business with Austrians)
This mapping is specific to your use case and therefore should be build in your program. Just write a function that takes the language you want to display and outputs the classname of the flag.

@Findus23 commented on GitHub (Nov 9, 2017): @serhioV I agree with, @lipis that there is no **general** mapping from languages to flags. But this doesn't mean that there couldn't be a mapping for a single project (e.g. because all of your German speaking users are coming from Germany and you don't make business with Austrians) This mapping is specific to your use case and therefore should be build in your program. Just write a function that takes the language you want to display and outputs the classname of the flag.

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@lipis commented on GitHub (Nov 9, 2017):

@serhioV Since you are not so stupid.. do you understand that this requirement that you have for your own projects/clients, maybe it's not going to work for everyone, so there is no point of asking for any sort of implementation here..

@lipis commented on GitHub (Nov 9, 2017): @serhioV Since you are not so stupid.. do you understand that this requirement that you have for your own projects/clients, maybe it's not going to work for everyone, so there is no point of asking for any sort of implementation here..

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@moldovans commented on GitHub (Nov 9, 2017):

@lipis quite sure the vast majority of library users don't have list of countries on their sites, but languages. you can go for a poll, so as long it could be the main target for users, I could ask an implementation here.

Just do a Google Search of "choose language" pictures.

@moldovans commented on GitHub (Nov 9, 2017): @lipis quite sure the vast majority of library users don't have list of countries on their sites, but languages. you can go for a poll, so as long it could be the main target for users, I could ask an implementation here. Just do a Google Search of "choose language" _pictures_.

kerem commented

2026-03-03 14:35:02 +03:00

Author

Owner

@lipis commented on GitHub (Nov 9, 2017):

true.. but every website uses their own flags for whatever language they want depending which country their represent.. so there is no way to satisfy everyone by having the UK flag for English or PT for Portuguese, etc..

@lipis commented on GitHub (Nov 9, 2017): true.. but every website uses their own flags for whatever language they want depending which country their represent.. so there is no way to satisfy everyone by having the UK flag for English or PT for Portuguese, etc..

kerem commented

2026-03-03 14:35:03 +03:00

Author

Owner

@moldovans commented on GitHub (Nov 9, 2017):

this is why I ask to give a developer a way to customize the language flag for a country, if the default (there should be a default) implementation does not satisfies them.

By ex by default is Romania flag for the Romanian language, but some people from Moldova would like to select the Moldova flag for the Ro language, however the large majority would like to have the Romania flag for Romania language and not to develop every time the same code, every developer by its own, to re-code a language flag for your library, if not, why do bother using your library.

@moldovans commented on GitHub (Nov 9, 2017): this is why I ask to give a developer a way to customize the language flag for a country, if the default (there should be a default) implementation does not satisfies them. By ex **by default** is Romania flag for the Romanian language, but **some people** from Moldova would like to select the Moldova flag for the Ro language, however the **large majority** would like to have the Romania flag for Romania language and **not to develop every time the same code**, every developer by its own, to re-code a language flag for your library, if not, why do bother using your library.

kerem commented

2026-03-03 14:35:03 +03:00

Author

Owner

@mrmckeb commented on GitHub (Nov 10, 2017):

This is no different than me complaining that ISO 3166-1-alpha-2 codes are no good for me as I need ISO 3166-1 alpha-3 codes.

The way to fix this is to create a map. This package has worked for me before, and if it's missing some information, create a PR to help them fix it. They're very receptive and their package is designed to do exactly what you want.
https://www.npmjs.com/package/country-data

@mrmckeb commented on GitHub (Nov 10, 2017): This is no different than me complaining that `ISO 3166-1-alpha-2` codes are no good for me as I need `ISO 3166-1 alpha-3` codes. The way to fix this is to create a map. This package has worked for me before, and if it's missing some information, create a PR to help them fix it. They're very receptive and their package is designed to do exactly what you want. https://www.npmjs.com/package/country-data

kerem referenced this issue

2026-03-03 14:40:37 +03:00

[PR #338] [MERGED] Update Bosnia and Herzegovina National Flag #758

Rows
Columns

[GH-ISSUE #236] Language Flags #154

Here is the new flag-icon-base.scss: