Skip to content

Latest commit

 

History

History
325 lines (299 loc) · 27.1 KB

README.md

File metadata and controls

325 lines (299 loc) · 27.1 KB
Raw

Flag-css

CSS for SVG country flag icons with PNG fallback (all alpha-2, alpha-3, numeric, IOC and FIFA are all supported). See the demo.

As a backend developer, I prefer ISO_3166-1 alpha-3.

  • Including all world flags (over 250 flags)
  • Images are vectors - they are scalable
  • All flags from Wikimedia
  • Use ISO 3166-1, all alpha-2, alpha-3 and numeric are supported
  • IOC and FIFA are also supported
  • Respect flag's original ratio
  • Flag-css CSS, LESS, and Sass files are licensed under the MIT License

Install

bower:

    bower install --save flag-css

Or download

Usage

For using the flags inline with text add the classes .flag with .flag-xxx or .flag-xx (where xxx is the ISO 3166-1-alpha-3 or ISO 3166-1-numeric and xx is the ISO 3166-1-alpha-2 of a country) to an empty <span>. Or using flag-ioc-xxx or flag-fifa-xxx (where xxx either the IOC or FIFA of a country). Example:

<span class="flag flag-hkg"></span>
<span class="flag flag-hk"></span>
<span class="flag flag-344"></span>
<span class="flag flag-ioc-hkg"></span>
<span class="flag flag-fifa-hkg"></span>

Sizing

<span class="flag flag-hkg flag-2x"></span>
<span class="flag flag-hkg flag-3x"></span>
<span class="flag flag-hkg flag-4x"></span>
                  ⋮
                  ⋮
<span class="flag flag-hkg flag-10x"></span>

Rotating and flipping

<span class="flag flag-hkg flag-rotate-90"></span>
<span class="flag flag-hkg flag-rotate-180"></span>
<span class="flag flag-hkg flag-rotate-270"></span>
<span class="flag flag-hkg flag-flip-horizontal"></span>
<span class="flag flag-hkg flag-flip-vertical"></span>

Flag list

Flag Element Alpha 3 Alpha 2 Numeric IOC FIFA
<span class="flag flag-abw"></span> abw aw 533 aru aru
<span class="flag flag-afg"></span> afg af 4 afg afg
<span class="flag flag-ago"></span> ago ao 24 ang ang
<span class="flag flag-aia"></span> aia ai 660 aia aia
<span class="flag flag-ala"></span> ala ax 248 ald
<span class="flag flag-alb"></span> alb al 8 alb alb
<span class="flag flag-and"></span> and ad 20 and and
<span class="flag flag-are"></span> are ae 784 uae uae
<span class="flag flag-arg"></span> arg ar 32 arg arg
<span class="flag flag-arm"></span> arm am 51 arm arm
<span class="flag flag-asm"></span> asm as 16 asa asa
<span class="flag flag-ata"></span> ata aq 10 ros
<span class="flag flag-atf"></span> atf tf 260
<span class="flag flag-atg"></span> atg ag 28 ant atg
<span class="flag flag-aus"></span> aus au 36 aus aus
<span class="flag flag-aut"></span> aut at 40 aut aut
<span class="flag flag-aze"></span> aze az 31 aze aze
<span class="flag flag-bdi"></span> bdi bi 108 bdi bdi
<span class="flag flag-bel"></span> bel be 56 bel bel
<span class="flag flag-ben"></span> ben bj 204 ben ben
<span class="flag flag-bes"></span> bes bq 535 aho ant
<span class="flag flag-bfa"></span> bfa bf 854 bur bfa
<span class="flag flag-bgd"></span> bgd bd 50 ban ban
<span class="flag flag-bgr"></span> bgr bg 100 bul bul
<span class="flag flag-bhr"></span> bhr bh 48 brn bhr
<span class="flag flag-bhs"></span> bhs bs 44 bah bah
<span class="flag flag-bih"></span> bih ba 70 bih bih
<span class="flag flag-blm"></span> blm bl 652
<span class="flag flag-blr"></span> blr by 112 blr blr
<span class="flag flag-blz"></span> blz bz 84 biz blz
<span class="flag flag-bmu"></span> bmu bm 60 ber ber
<span class="flag flag-bol"></span> bol bo 68 bol bol
<span class="flag flag-bra"></span> bra br 76 bra bra
<span class="flag flag-brb"></span> brb bb 52 bar brb
<span class="flag flag-brn"></span> brn bn 96 bru bru
<span class="flag flag-btn"></span> btn bt 64 bhu bhu
<span class="flag flag-bvt"></span> bvt bv 74
<span class="flag flag-bwa"></span> bwa bw 72 bot bot
<span class="flag flag-caf"></span> caf cf 140 caf cta
<span class="flag flag-can"></span> can ca 124 can can
<span class="flag flag-cck"></span> cck cc 166 cck
<span class="flag flag-che"></span> che ch 756 sui sui
<span class="flag flag-chl"></span> chl cl 152 chi chi
<span class="flag flag-chn"></span> chn cn 156 chn chn
<span class="flag flag-civ"></span> civ ci 384 civ civ
<span class="flag flag-cmr"></span> cmr cm 120 cmr cmr
<span class="flag flag-cod"></span> cod cd 180 cod cod
<span class="flag flag-cog"></span> cog cg 178 cgo cgo
<span class="flag flag-cok"></span> cok ck 184 cok cok
<span class="flag flag-col"></span> col co 170 col col
<span class="flag flag-com"></span> com km 174 com com
<span class="flag flag-cpv"></span> cpv cv 132 cpv cpv
<span class="flag flag-cri"></span> cri cr 188 crc crc
<span class="flag flag-cub"></span> cub cu 192 cub cub
<span class="flag flag-cuw"></span> cuw cw 531
<span class="flag flag-cxr"></span> cxr cx 162 cxr
<span class="flag flag-cym"></span> cym ky 136 cay cay
<span class="flag flag-cyp"></span> cyp cy 196 cyp cyp
<span class="flag flag-cze"></span> cze cz 203 cze cze
<span class="flag flag-deu"></span> deu de 276 ger ger
<span class="flag flag-dji"></span> dji dj 262 dji dji
<span class="flag flag-dma"></span> dma dm 212 dma dma
<span class="flag flag-dnk"></span> dnk dk 208 den den
<span class="flag flag-dom"></span> dom do 214 dom dom
<span class="flag flag-dza"></span> dza dz 12 alg alg
<span class="flag flag-ecu"></span> ecu ec 218 ecu ecu
<span class="flag flag-egy"></span> egy eg 818 egy egy
<span class="flag flag-eri"></span> eri er 232 eri eri
<span class="flag flag-esh"></span> esh eh 732 sah
<span class="flag flag-esp"></span> esp es 724 esp esp
<span class="flag flag-est"></span> est ee 233 est est
<span class="flag flag-eth"></span> eth et 231 eth eth
<span class="flag flag-fin"></span> fin fi 246 fin fin
<span class="flag flag-fji"></span> fji fj 242 fij fij
<span class="flag flag-flk"></span> flk fk 238 flk flk
<span class="flag flag-fra"></span> fra fr 250 fra fra
<span class="flag flag-fro"></span> fro fo 234 far fro
<span class="flag flag-fsm"></span> fsm fm 583 fsm fsm
<span class="flag flag-gab"></span> gab ga 266 gab gab
<span class="flag flag-gbr"></span> gbr gb 826 gbr
<span class="flag flag-geo"></span> geo ge 268 geo geo
<span class="flag flag-ggy"></span> ggy gg 831 gbg
<span class="flag flag-gha"></span> gha gh 288 gha gha
<span class="flag flag-gib"></span> gib gi 292 gib gbz
<span class="flag flag-gin"></span> gin gn 324 gui gui
<span class="flag flag-glp"></span> glp gp 312 gud glp
<span class="flag flag-gmb"></span> gmb gm 270 gam gam
<span class="flag flag-gnb"></span> gnb gw 624 gbs gnb
<span class="flag flag-gnq"></span> gnq gq 226 geq eqg
<span class="flag flag-grc"></span> grc gr 300 gre gre
<span class="flag flag-grd"></span> grd gd 308 grn grn
<span class="flag flag-grl"></span> grl gl 304 grl grl
<span class="flag flag-gtm"></span> gtm gt 320 gua gua
<span class="flag flag-guf"></span> guf gf 254 fgu guf
<span class="flag flag-gum"></span> gum gu 316 gum gum
<span class="flag flag-guy"></span> guy gy 328 guy guy
<span class="flag flag-hkg"></span> hkg hk 344 hkg hkg
<span class="flag flag-hmd"></span> hmd hm 334
<span class="flag flag-hnd"></span> hnd hn 340 hon hon
<span class="flag flag-hrv"></span> hrv hr 191 cro cro
<span class="flag flag-hti"></span> hti ht 332 hai hai
<span class="flag flag-hun"></span> hun hu 348 hun hun
<span class="flag flag-idn"></span> idn id 360 ina idn
<span class="flag flag-imn"></span> imn im 833 gbm
<span class="flag flag-ind"></span> ind in 356 ind ind
<span class="flag flag-iot"></span> iot io 86
<span class="flag flag-irl"></span> irl ie 372 irl irl
<span class="flag flag-irn"></span> irn ir 364 iri irn
<span class="flag flag-irq"></span> irq iq 368 irq irq
<span class="flag flag-isl"></span> isl is 352 isl isl
<span class="flag flag-isr"></span> isr il 376 isr isr
<span class="flag flag-ita"></span> ita it 380 ita ita
<span class="flag flag-jam"></span> jam jm 388 jam jam
<span class="flag flag-jey"></span> jey je 832 gbj
<span class="flag flag-jor"></span> jor jo 400 jor jor
<span class="flag flag-jpn"></span> jpn jp 392 jpn jpn
<span class="flag flag-kaz"></span> kaz kz 398 kaz kaz
<span class="flag flag-ken"></span> ken ke 404 ken ken
<span class="flag flag-kgz"></span> kgz kg 417 kgz kgz
<span class="flag flag-khm"></span> khm kh 116 cam cam
<span class="flag flag-kir"></span> kir ki 296 kir kir
<span class="flag flag-kna"></span> kna kn 659 skn skn
<span class="flag flag-kor"></span> kor kr 410 kor kor
<span class="flag flag-kwt"></span> kwt kw 414 kuw kuw
<span class="flag flag-lao"></span> lao la 418 lao lao
<span class="flag flag-lbn"></span> lbn lb 422 lib lib
<span class="flag flag-lbr"></span> lbr lr 430 lbr lbr
<span class="flag flag-lby"></span> lby ly 434 lba lby
<span class="flag flag-lca"></span> lca lc 662 lca lca
<span class="flag flag-lie"></span> lie li 438 lie lie
<span class="flag flag-lka"></span> lka lk 144 sri sri
<span class="flag flag-lso"></span> lso ls 426 les les
<span class="flag flag-ltu"></span> ltu lt 440 ltu ltu
<span class="flag flag-lux"></span> lux lu 442 lux lux
<span class="flag flag-lva"></span> lva lv 428 lat lva
<span class="flag flag-mac"></span> mac mo 446 mac mac
<span class="flag flag-maf"></span> maf mf 663
<span class="flag flag-mar"></span> mar ma 504 mar mar
<span class="flag flag-mco"></span> mco mc 492 mon mon
<span class="flag flag-mda"></span> mda md 498 mda mda
<span class="flag flag-mdg"></span> mdg mg 450 mad mad
<span class="flag flag-mdv"></span> mdv mv 462 mdv mdv
<span class="flag flag-mex"></span> mex mx 484 mex mex
<span class="flag flag-mhl"></span> mhl mh 584 msh mhl
<span class="flag flag-mkd"></span> mkd mk 807 mkd mkd
<span class="flag flag-mli"></span> mli ml 466 mli mli
<span class="flag flag-mlt"></span> mlt mt 470 mlt mlt
<span class="flag flag-mmr"></span> mmr mm 104 mya mya
<span class="flag flag-mne"></span> mne me 499 mgo mne
<span class="flag flag-mng"></span> mng mn 496 mgl mng
<span class="flag flag-mnp"></span> mnp mp 580 nma nmi
<span class="flag flag-moz"></span> moz mz 508 moz moz
<span class="flag flag-mrt"></span> mrt mr 478 mtn mtn
<span class="flag flag-msr"></span> msr ms 500 mnt msr
<span class="flag flag-mtq"></span> mtq mq 474 mrt mtq
<span class="flag flag-mus"></span> mus mu 480 mri mri
<span class="flag flag-mwi"></span> mwi mw 454 maw mwi
<span class="flag flag-mys"></span> mys my 458 mas mas
<span class="flag flag-myt"></span> myt yt 175 may myt
<span class="flag flag-nam"></span> nam na 516 nam nam
<span class="flag flag-ncl"></span> ncl nc 540 ncd ncl
<span class="flag flag-ner"></span> ner ne 562 nig nig
<span class="flag flag-nfk"></span> nfk nf 574 nfi nfk
<span class="flag flag-nga"></span> nga ng 566 ngr nga
<span class="flag flag-nic"></span> nic ni 558 nca nca
<span class="flag flag-niu"></span> niu nu 570 niu niu
<span class="flag flag-nld"></span> nld nl 528 ned ned
<span class="flag flag-nor"></span> nor no 578 nor nor
<span class="flag flag-npl"></span> npl np 524 nep nep
<span class="flag flag-nru"></span> nru nr 520 nru nru
<span class="flag flag-nzl"></span> nzl nz 554 nzl nzl
<span class="flag flag-omn"></span> omn om 512 oma oma
<span class="flag flag-pak"></span> pak pk 586 pak pak
<span class="flag flag-pan"></span> pan pa 591 pan pan
<span class="flag flag-pcn"></span> pcn pn 612 pcn
<span class="flag flag-per"></span> per pe 604 per per
<span class="flag flag-phl"></span> phl ph 608 phi phi
<span class="flag flag-plw"></span> plw pw 585 plw plw
<span class="flag flag-png"></span> png pg 598 png png
<span class="flag flag-pol"></span> pol pl 616 pol pol
<span class="flag flag-pri"></span> pri pr 630 pur pur
<span class="flag flag-prk"></span> prk kp 408 prk prk
<span class="flag flag-prt"></span> prt pt 620 por por
<span class="flag flag-pry"></span> pry py 600 par par
<span class="flag flag-pse"></span> pse ps 275 ple ple
<span class="flag flag-pyf"></span> pyf pf 258 fpo tah2
<span class="flag flag-qat"></span> qat qa 634 qat qat
<span class="flag flag-reu"></span> reu re 638 reu reu
<span class="flag flag-rou"></span> rou ro 642 rou rou
<span class="flag flag-rus"></span> rus ru 643 rus rus
<span class="flag flag-rwa"></span> rwa rw 646 rwa rwa
<span class="flag flag-sau"></span> sau sa 682 ksa ksa
<span class="flag flag-sdn"></span> sdn sd 729 sud sud
<span class="flag flag-sen"></span> sen sn 686 sen sen
<span class="flag flag-sgp"></span> sgp sg 702 sin sin
<span class="flag flag-sgs"></span> sgs gs 239
<span class="flag flag-shn"></span> shn sh 654 hel shn
<span class="flag flag-sjm"></span> sjm sj 744
<span class="flag flag-slb"></span> slb sb 90 sol sol
<span class="flag flag-sle"></span> sle sl 694 sle sle
<span class="flag flag-slv"></span> slv sv 222 esa slv
<span class="flag flag-smr"></span> smr sm 674 smr smr
<span class="flag flag-som"></span> som so 706 som som
<span class="flag flag-spm"></span> spm pm 666 spm spm
<span class="flag flag-srb"></span> srb rs 688 srb srb
<span class="flag flag-ssd"></span> ssd ss 728
<span class="flag flag-stp"></span> stp st 678 stp stp
<span class="flag flag-sur"></span> sur sr 740 sur sur
<span class="flag flag-svk"></span> svk sk 703 svk svk
<span class="flag flag-svn"></span> svn si 705 slo svn
<span class="flag flag-swe"></span> swe se 752 swe swe
<span class="flag flag-swz"></span> swz sz 748 swz swz
<span class="flag flag-sxm"></span> sxm sx 534
<span class="flag flag-syc"></span> syc sc 690 sey sey
<span class="flag flag-syr"></span> syr sy 760 syr syr
<span class="flag flag-tca"></span> tca tc 796 tks tca
<span class="flag flag-tcd"></span> tcd td 148 cha cha
<span class="flag flag-tgo"></span> tgo tg 768 tog tog
<span class="flag flag-tha"></span> tha th 764 tha tha
<span class="flag flag-tjk"></span> tjk tj 762 tjk tjk
<span class="flag flag-tkl"></span> tkl tk 772 tkl
<span class="flag flag-tkm"></span> tkm tm 795 tkm tkm
<span class="flag flag-tls"></span> tls tl 626 tls tls
<span class="flag flag-ton"></span> ton to 776 tga tga
<span class="flag flag-tto"></span> tto tt 780 tto tri
<span class="flag flag-tun"></span> tun tn 788 tun tun
<span class="flag flag-tur"></span> tur tr 792 tur tur
<span class="flag flag-tuv"></span> tuv tv 798 tuv tuv
<span class="flag flag-twn"></span> twn tw 158 tpe tpe
<span class="flag flag-tza"></span> tza tz 834 tan tan
<span class="flag flag-uga"></span> uga ug 800 uga uga
<span class="flag flag-ukr"></span> ukr ua 804 ukr ukr
<span class="flag flag-umi"></span> umi um 581
<span class="flag flag-ury"></span> ury uy 858 uru uru
<span class="flag flag-usa"></span> usa us 840 usa usa
<span class="flag flag-uzb"></span> uzb uz 860 uzb uzb
<span class="flag flag-vat"></span> vat va 336 vat
<span class="flag flag-vct"></span> vct vc 670 vin vin
<span class="flag flag-ven"></span> ven ve 862 ven ven
<span class="flag flag-vgb"></span> vgb vg 92 ivb vgb
<span class="flag flag-vir"></span> vir vi 850 isv vir
<span class="flag flag-vnm"></span> vnm vn 704 vie vie
<span class="flag flag-vut"></span> vut vu 548 van van
<span class="flag flag-wlf"></span> wlf wf 876 waf wlf
<span class="flag flag-wsm"></span> wsm ws 882 sam sam
<span class="flag flag-yem"></span> yem ye 887 yem yem
<span class="flag flag-zaf"></span> zaf za 710 rsa rsa
<span class="flag flag-zmb"></span> zmb zm 894 zam zam
<span class="flag flag-zwe"></span> zwe zw 716 zim zim

Todo's

  • 3×4 flag ratio available

License

MIT

Development

Ubuntu:

apt-get install imagemagick
apt-get install graphicsmagick

Mac OS X (using Homebrew):

brew install imagemagick
brew install graphicsmagick