lafeber / world-flags-sprite Goto Github PK

A sprite of all the worlds' flags.

License: Other

CSS 40.29% HTML 19.94% SCSS 39.77%

world-flags-sprite's Introduction

The flags of all countries in the world in one sprite

Include 1 css file and have all the worlds' flags on your site. Tell everyone who uses a lot of country flags to use this link, so it will be in everyone's cache!

Example usage:

In the head of your html file:

<link
    rel="stylesheet"
    type="text/css"
    href="//github.com/downloads/lafeber/world-flags-sprite/flags32.css"
/>

In the body of your html file:

<ul class="f32">
  <li class="flag ar">Argentina</li>
  <li class="flag au">Australia</li>
  <li class="flag at">Austria</li>
  ...
</ul>

Or:

<ul class="f32">
  <li class="flag arg">Argentina</li>
  <li class="flag aus">Australia</li>
  <li class="flag aut">Austria</li>
  ...
</ul>

The countries corresponding to the codes can be found at: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 and https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3

If a previously visited site uses this same code, the file is already in the cache of the user and doesn't need to be downloaded again.

See the cheese wiki: http://www.cheesewiki.com/ for an example

world-flags-sprite's People

Contributors

Stargazers

Watchers

Forkers

blister mechanism t0d0r ilya-yurtaev umpirsky ericsessions lethea deeky666 craigmoliver beenhero yanivpr sonatadancewear dilandeau brocard darwayne florinbriskcode tiagom101 nightsh kangu ckyabsley iagosa spanakorizo un33k mokhov psramkumar jay3126 ydoudothis brodkinca plantsam kfuglsang adamrogas javex landsurveyorsunited lord-viper jordanmg davidlis anil3a lahaxearnaud dream4ge alnafie fritids ottonet feralou mitjazeleznikar amazeika tpruvot tataihono jonabitz paivaric thouis yurnih scopevale unlock-pro anyangocynthia edpichler martinbutt mrgeneric dhalai snprabhu2004 dehiz trickortweak abdulhamid-alattar assistanz bercanozcan thalesfsp rewiko farangeo digggggggggg bobbycar80 marcolino wiseguy tudorpavel aloxe sthapaun rozehnal aadelelsayed kiwibrew spikewilliams tonda13 antonellopasella przemyslaws arcaneforks robfrawley carldai0106 shapiromichael flyeven andreialecu alexsj jvmsangkal ericf parisilabs slals simmbiote muddy-28 pancakesmix resicon ivnukov lucax88x snapshot-repo metacowboy

world-flags-sprite's Issues

Some Flags are Missing

I have generated this page with country list project. Some flags are missing, and they are displayed with "Ascension Island" flag.

Maybe it should be smart to place empty flag at the beginning of the sprite, so if CSS class is missing, it shows empty flag instead Ascension Island.

Also I noticed that it is not possible to reference css from github, because they send content-type text/html instead text/css for raw files and css never gets loaded.

Myanmar Flag displaying old version

The correct flag is shown in world-flags-sprite/images/flags16.png
but the old version is in https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags16.css

A USSR flag would be appreciated

The USSR flag (for code 'su') would be appreciated for historical purposes.

Thanks!

Make also flags 24px x 24px

This is a feature request.

Can you make 24px x 24px flags?

Instead of the transparent default, an image placeholder could be better

Something like this:

I will probably do this for one of my projects. Let me know if you want me to submit a PR with the new image(s).

Great! can we combine three flags?

For examle we want to list german speaking countries

So we select Germany, Switzerland and Austria

Would we great if we can do this with one selector or one selector used with three country codes

Also maybe think of minimum length (say 3 flags wide) for when building a list of languages and some have 1, 2 or 3 flags

Libya flag is broken, just shows solid green

https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.png

.f32 .ly{background-position:0 -4672px;}

Any plans for @2x high resolution (retina) support?

I was just looking at my site on a new retina display and realizing the flags were the only thing that weren't high resolution. Do you have vector source art for the flag images? It seems like we could currently offer high resolution versions at 8x8px and 16x16px (half the size of the current images). Most useful for me would be a new version at 64x64px so we could offer a replacement 32x32px @2x version to higher resolution screens.

Congo and DR Congo flags are switched in flags16.css

DR congo:
http://en.wikipedia.org/wiki/File:Flag_of_the_Democratic_Republic_of_the_Congo.svg

Congo:
http://en.wikipedia.org/wiki/File:Flag_of_the_Republic_of_the_Congo.svg

Here's a diff for flags16.css

-.f16 .cd{background-position:left -896px;}
+.f16 .cg{background-position:left -896px;}
.f16 .cf{background-position:left -912px;}
-.f16 .cg{background-position:left -928px;}
+.f16 .cd{background-position:left -928px;}

flags32.css is ok.

Snippet retrieve out-dated file

The file //cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css doesn't have all the latest updates and doesn't load the latest //cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.png. Any idea how to update it?

Libya's flag has changed

Libya's flag has changed, check the new one at http://en.wikipedia.org/wiki/Libya

world-flags-sprite as submodule

I have tried to use world-flags-sprite as submodule in my project, but unfortunately paths to sprite in css files does not point to images directory. I wonder if you could make this minor change.

Réunion could have a better flag

One of our users pointed us to this document that explains the use of a more appropriate flag for Réunion. If you could, it'd be nice if this project could make use of this flag instead of the one currently in use for .re.

Further information on this can be found here.

Clarify licensing?

Howdy,

I was wondering if you had a license in mind for this? Particularly as the Github-hosted version doesn't work due to mime type if people are going to host it themselves it'd be great if you had an explicit license in the readme/at the top of the CSS/SCSS files.

Perhaps https://github.com/twitter/bootstrap/blob/master/LICENSE or maybe MIT license would be appropriate?

Love your work!

Add to npm

Could this be added to npm? I don't use bower anymore so would be good to install thru npm.

Falkland Islands flag missing

Hi,

The Falkland Islands flag is missing (fk):

http://en.wikipedia.org/wiki/Flag_of_the_Falkland_Islands

Problem occured after latest commit (#55)

Since commit #55, files "flags16.css" & "flags32.css" don't exist anymore in "stylesheets" folder, but they are still referenced as main in bower.json. It seems that flags in newly created css files are wrong and don't match the country code.
Moreover, the package version has not been changed, so there's no going back for people using your library.

New flags

I found that some countries flags are absent.

Please add these ones:

{
    "SH-AC": "Ascension Island",
    "BN": "Brunei",
    "BO": "Bolivia",
    "CD": "Democratic Republic of the Congo",
    "CI": "Ivory Coast",
    "FM": "Federated States of Micronesia",
    "GG": "Guernsey",
    "IR": "Iran",
    "LA": "Laos",
    "MD": "Moldova",
    "MK": "Macedonia",
    "MM": "Republic of the Union of Myanmar",
    "PN": "Pitcairn Islands",
    "TW": "Taiwan",
    "VN": "Vietnam",
}

flags.zip

Zimbabwe flag position same as Zambia

The css position for the Zimbabwe flag should be -3888px for f16 and -7744px for f32.

Would be good to also have flags for:

IO - Br. Indian Ocean Ter.
FK - Falkland Is. (Malvinas)
PN - Pitcairn
GS - S. Georgia and S. Sandwich
SH - Saint Helena
SJ - Svalbard and Jan Mayen
WF - Wallis and Futuna

Update README.md URL to point to proper CSS include location

Looks like this is no longer working: https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css

Please update to: https://github.com/downloads/lafeber/world-flags-sprite/flags32.css

16px and 32px versions flags swap

cd and cg countries has flags positions switched in CSS files.

New version for flags without borders

I just discover that you've removed those 1px light grey borders from all flags in latest commit (96a9bc8), which is fine, but could you please make a new version out of it? My older designs are suited for images with borders, so it looks weird now, especially when you've got a flag with white space on white background for example.

SCSS code fix

SCSS is not meant for rewriting CSS. With loops and interpolations you may use something like:

//WARNING: image file flags should be in same order!
//CD and CG countries are witched!
//16 or 32
$mysize: 16;
.f#{$mysize} {
    .flag {
        display:inline-block;
        height: ($mysize)px;
        width: ($mysize)px;
        vertical-align: text-top;
        line-height: ($mysize)px;
        background:url(../../images/flags/flags#{$mysize}.png) no-repeat;
    }

    $countries-list: _African_Union, _Arab_League, _ASEAN, _CARICOM, _CIS, _Commonwealth, _England, _European_Union, _Islamic_Conference, _Kosovo, _NATO, _Northern_Cyprus, _Northern_Ireland, _Olimpic_Movement, _OPEC, _Red_Cross, _Scotland, _Somaliland, _Tibet, _United_Nations, _Wales, ad, ae, af, ag, ai, al, am, an, ao, aq, ar, as, at, au, aw, az, ba, bb, bd, be, bf, bg, bh, bi, bj, bm, bn, bo, br, bs, bt, bw, by, bz, ca, cg, cf, cd, ch, ci, ck, cl, cm, cn, co, cr, cu, cv, cy, cz, de, dj, dk, dm, do, dz, ec, ee, eg, eh, er, es, et, fi, fj, fm, fo, fr, ga, gb, gd, ge, gg, gh, gi, gl, gm, gn, gp, gq, gr, gt, gu, gw, gy, hk, hn, hr, ht, hu, id, ie, il, im, in, iq, ir, is, it, je, jm, jo, jp, ke, kg, kh, ki, km, kn, kp, kr, kw, ky, kz, la, lb, lc, li, lk, lr, ls, lt, lu, lv, ly, ma, md, me, mg, mh, mk, ml, mm, mn, mo, mq, mr, ms, mt, mu, mv, mw, mx, my, mz, na, nc, ne, ng, ni, nl, no, np, nr, nz, om, pa, pe, pf, pg, ph, pk, pl, pr, ps, pt, pw, py, qa, re, ro, rs, ru, rw, sa, sb, sc, sd, se, sg, si, sk, sl, sm, sn, so, sr, st, sv, sy, sz, tc, td, tg, th, tj, tl, tm, tn, to, tr, tt, tv, tw, tz, ua, ug, us, uy, uz, va, vc, ve, vg, vi, vn, vu, ws, ye, za, zm;

    @for $i from 1 through length($countries-list)
    {
        .#{nth($countries-list, $i)}
        {
            background-position:0 (-1 * $i * $mysize)px;
        }
    }
    //should they really be duplicated (i.e. mc copies id)?
    .mc{background-position:0 (-112 * $mysize)px;}
    .zw{background-position:0 (-242 * $mysize)px;}
    //write here fix for wrong CG CD positions

} // .f16 or .f32

P.S. Using _.African_Union(OAS) is wrong because parenthesis here throws console error.

21 Missing Flags

After testing I found there were 21 missing flags...

~~AX:Åland Islands~~
~~BV:Bouvet Island~~
IO:British Indian Ocean Territory
CX:Christmas Island
CC:Cocos (Keeling) Islands
FK:Falkland Islands (Malvinas)
GF:French Guiana
TF:French Southern Territories
HM:Heard Island and Mcdonald Islands
~~YT:Mayotte~~
~~NU:Niue~~
NF:Norfolk Island
MP:Northern Mariana Islands
PN:Pitcairn
~~SH:Saint Helena~~
PM:Saint Pierre and Miquelon
GS:South Georgia and The South Sandwich Islands
~~SJ:Svalbard and Jan Mayen~~
TK:Tokelau
UM:United States Minor Outlying Islands
WF:Wallis and Futuna

Sass throws an error for _African_Union(OAS)

Doesn't like parenthesis in class name

3-letter country codes

It would be nice to support 2 letter and 3 letter ISO country codes -- some mapping technologies only support one or the other -- and translating between the two is a pain.

Error downloading file flags32.css

//github.com/downloads/lafeber/world-flags-sprite/flags32.css in example usage throws error 'Error downloading file.' What's happened so suddenly?

Flags directory structure

The CSS files points to images/flags/flags.png but the flags folder doesn't exist. The CSS should point to images/flags.png.

Emoji's

Idea: use https://apps.timwhitlock.info/emoji/tables/iso3166 ?

You'll have less control over the looks, but it doesn't require an image.

UM not defined

you missed UM flag

example for the flags32.css :

line 231 before :
.f32 .us{background-position:0 -7328px;}

line 231 after :
.f32 .us{background-position:0 -7328px;}.f32 .um{background-position:0 -7328px;}

flags16-iso-3166-1-alpha-3.css has wrong positions

16px CSS seems to have the postions for the 32px flags e.g.

.flag.usa {background-position: 0 -7328px;}

when the 16px image is only 3968px high.

Bower installation support

This is very nice library and would be great if it could be installed with the Bower package manager.

EU flag cannot be displayed

Thanks for your work. Unfortunately EU flag cannot be displayed. Could you please check.

Lesotho flag has changed (LSO)

http://en.wikipedia.org/wiki/Lesotho

Update country names

Here is a more updated list of countries by:
Updated to 01/07/2020 from wikipedia
Sources:
https://en.wikipedia.org/wiki/List_of_sovereign_states
https://en.wikipedia.org/wiki/ISO_3166-1

dont see world-flags-sprite folder in node_modules

For some reason whenever i do an
npm install world-flags-sprite --save

i see a success message on the terminal but i don't see the package in my node_modules folder. Anybody faced this issue?

Image compression.

Hey,
I just wanted to bring something to your attention. I've been looking at optimizing my site to reduce the amount of bytes I send to users. I'm already using the smaller flags16, since the 194KB filesize for flags32 is too much for my usage. I'm only displaying a maximum of two separate flags to each user.

I've run the flags16.png though an image compressor https://compressor.io/compress and it reduces the flags16 filesize from 69.5KB to 19.7KB, a saving of about 72%. This compression does slightly change some colours, presumably by reducing the colour palette, but it's not really noticeable unless you zoom in.

Here's a comparison image. The uncompressed version is on the left.

I checked the flags32 image too out of interest, and while the difference is much more apparent when zoomed in, I think it's quite difficult to tell them apart at their display size. The filesize goes from 194KB to 51KB.

I think it would be great to have the compressed version as the default. If you don't agree with that, I think it would be good to have a note in the documentation letting people know that they can substantially reduce the filesize.

Thanks for your work on this.

===================================================================================================================================================================

Thanks

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.