You know how sometimes you need to add to the application that you do some fancy flags during the language or country selection, well here are they in a nice web optimized sprite ready for use + extra CSS source for their application.
Example use of the CSS in your HTML source:
<div class="flag" id="AFG"></div> Afganistan
The countries selectors are organized by three letters ISO Code
.flag {
display: inline-block;
width: 32px;
height: 32px;
background: url('flags/small-flags.png') no-repeat;
opacity: .7;
}
#AFG {
background-position: -96px 0;
}
#ALB {
background-position: -192px 0;
}
#DZA {
background-position: -320px -96px;
}
#ASM {
background-position: -352px 0;
}
#AND {
background-position: -32px 0;
}
#AGO {
background-position: -288px 0;
}
#AIA {
background-position: -160px 0;
}
#ATG {
background-position: -128px 0;
}
#ARG {
background-position: -320px 0;
}
#ARM {
background-position: -224px 0;
}
#ABW {
background-position: -448px 0;
}
#AUS, #AUS2, #AUS3, #HMD {
background-position: -416px 0;
}
#AUT, #AUT2 {
background-position: -384px 0;
}
#AZE {
background-position: 0 -32px;
}
#BHS {
background-position: -480px -32px;
}
#BHR {
background-position: -224px -32px;
}
#BGD, #BGD2 {
background-position: -96px -32px;
}
#BRB {
background-position: -64px -32px;
}
#BLR {
background-position: -64px -64px;
}
#BEL, #BEL2 {
background-position: -128px -32px;
}
#BLZ {
background-position: -96px -64px;
}
#BEN {
background-position: -288px -32px;
}
#BMU {
background-position: -352px -32px;
}
#BTN {
background-position: 0 -64px;
}
#BOL {
background-position: -416px -32px;
}
#BIH {
background-position: -32px -32px;
}
#BWA {
background-position: -32px -64px;
}
#BRA, #BRA2 {
background-position: -448px -32px;
}
#VGB {
background-position: -192px -448px;
}
#BRN {
background-position: -384px -32px;
}
#BGR {
background-position: -192px -32px;
}
#BFA {
background-position: -160px -32px;
}
#BDI {
background-position: -256px -32px;
}
#KHM {
background-position: 0 -224px;
}
#CMR {
background-position: -384px -64px;
}
#CAN, #CAN2 {
background-position: -128px -64px;
}
#CPV {
background-position: -32px -96px;
}
#CYM {
background-position: -224px -224px;
}
#CAF {
background-position: -192px -64px;
}
#TCD {
background-position: -480px -384px;
}
#CHL {
background-position: -352px -64px;
}
#CHN, #CHN2, #CHN3, #CHN4, #CHN5, #CHN6 {
background-position: -416px -64px;
}
#COL, #COL2 {
background-position: -448px -64px;
}
#COM {
background-position: -64px -224px;
}
#COD {
background-position: -160px -64px;
}
#COG {
background-position: -224px -64px;
}
#COK {
background-position: -320px -64px;
}
#CRI {
background-position: -480px -64px;
}
#CIV, #CIV2 {
background-position: -288px -64px;
}
#HRV {
background-position: -416px -160px;
}
#CUB {
background-position: 0 -96px;
}
#CYP, #CYP2 {
background-position: -96px -96px;
}
#CZE, #CZE2 {
background-position: -128px -96px;
}
#DNK, #DNK2 {
background-position: -224px -96px;
}
#DJI {
background-position: -192px -96px;
}
#DMA {
background-position: -256px -96px;
}
#DOM {
background-position: -288px -96px;
}
#TLS {
background-position: -160px -416px;
}
#ECU {
background-position: -352px -96px;
}
#EGY {
background-position: -416px -96px;
}
#SLV {
background-position: -352px -384px;
}
#GNQ {
background-position: -128px -160px;
}
#ERI {
background-position: -480px -96px;
}
#EST, #EST2 {
background-position: -384px -96px;
}
#ETH {
background-position: -32px -128px;
}
#FLK {
background-position: -160px -128px;
}
#FRO {
background-position: -224px -128px;
}
#FJI {
background-position: -128px -128px;
}
#FIN, #FIN2 {
background-position: -96px -128px;
}
#FRA, #FRA2, #REU, #GUF, #ATF, #GLP, #NCL, #MYT, #MAF {
background-position: -256px -128px;
}
#PYF {
background-position: -320px -320px;
}
#GAB {
background-position: -288px -128px;
}
#GMB {
background-position: -32px -160px;
}
#GEO {
background-position: -384px -128px;
}
#DEU, #DEU2 {
background-position: -160px -96px;
}
#GHA {
background-position: -448px -128px;
}
#GIB {
background-position: -480px -128px;
}
#GRC, #GRC2 {
background-position: -160px -160px;
}
#GRL {
background-position: 0 -160px;
}
#GRD {
background-position: -352px -128px;
}
#GUM {
background-position: -256px -160px;
}
#GTM {
background-position: -224px -160px;
}
#GIN {
background-position: -64px -160px;
}
#GNB {
background-position: -288px -160px;
}
#GUY {
background-position: -320px -160px;
}
#HTI {
background-position: -448px -160px;
}
#HND {
background-position: -384px -160px;
}
#HKG {
background-position: -352px -160px;
}
#HUN, #HUN2 {
background-position: -480px -160px;
}
#ISL, #ISL2 {
background-position: -256px -192px;
}
#IND, #IND2 {
background-position: -160px -192px;
}
#IDN, #IDN2 {
background-position: -32px -192px;
}
#IRN {
background-position: -224px -192px;
}
#IRQ {
background-position: -192px -192px;
}
#IRL, #IRL2 {
background-position: -64px -192px;
}
#ISR, #ISR2 {
background-position: -96px -192px;
}
#ITA, #ITA2 {
background-position: -288px -192px;
}
#JAM {
background-position: -352px -192px;
}
#JPN, #JPN2 {
background-position: -416px -192px;
}
#JOR {
background-position: -384px -192px;
}
#KAZ {
background-position: -256px -224px;
}
#KEN {
background-position: -448px -192px;
}
#KIR {
background-position: -32px -224px;
}
#PRK {
background-position: -128px -224px;
}
#KOR, #KOR2 {
background-position: -160px -224px;
}
#KWT {
background-position: -192px -224px;
}
#KGZ {
background-position: -480px -192px;
}
#LAO {
background-position: -288px -224px;
}
#LVA {
background-position: -64px -256px;
}
#LBN {
background-position: -320px -224px;
}
#LSO {
background-position: -480px -224px;
}
#LBR {
background-position: -448px -224px;
}
#LBY {
background-position: -96px -256px;
}
#LIE {
background-position: -384px -224px;
}
#LTU, #LTU2 {
background-position: 0 -256px;
}
#LUX, #LUX2 {
background-position: -32px -256px;
}
#MAC {
background-position: -480px -256px;
}
#MKD {
background-position: -352px -256px;
}
#MDG {
background-position: -288px -256px;
}
#MWI {
background-position: -224px -288px;
}
#MYS, #MYS2 {
background-position: -288px -288px;
}
#MDV {
background-position: -192px -288px;
}
#MLI {
background-position: -384px -256px;
}
#MLT {
background-position: -128px -288px;
}
#MHL {
background-position: -320px -256px;
}
#MTQ {
background-position: -32px -288px;
}
#MRT {
background-position: -64px -288px;
}
#MUS {
background-position: -160px -288px;
}
#MEX {
background-position: -256px -288px;
}
#FSM {
background-position: -192px -128px;
}
#MDA {
background-position: -192px -256px;
}
#MCO {
background-position: -160px -256px;
}
#MNG {
background-position: -448px -256px;
}
#MNE {
background-position: -224px -256px;
}
#MSR {
background-position: -96px -288px;
}
#MAR {
background-position: -128px -256px;
}
#MOZ {
background-position: -320px -288px;
}
#MMR {
background-position: -416px -256px;
}
#MMR2 {
background-position: -160px -156px;
}
#NAM {
background-position: -352px -288px;
}
#NRU {
background-position: -128px -320px;
}
#NPL {
background-position: -96px -320px;
}
#NLD, #NLD2, #ANT {
background-position: -256px 0;
}
#NZL {
background-position: -192px -320px;
}
#NIC {
background-position: 0 -320px;
}
#NER {
background-position: -416px -288px;
}
#NGA {
background-position: -480px -288px;
}
#NIU {
background-position: -160px -320px;
}
#MNP {
background-position: 0 -288px;
}
#NOR, #NOR2, #SJM, #BVT {
background-position: -64px -320px;
}
#OMN {
background-position: -224px -320px;
}
#PAK {
background-position: -416px -320px;
}
#PLW {
background-position: -96px -352px;
}
#PSE {
background-position: -32px -352px;
}
#PAN {
background-position: -256px -320px;
}
#PNG {
background-position: -352px -320px;
}
#PRY {
background-position: -128px -352px;
}
#PER {
background-position: -288px -320px;
}
#PHL {
background-position: -384px -320px;
}
#PCN {
background-position: -480px -320px;
}
#POL, #POL2 {
background-position: -448px -320px;
}
#PRT {
background-position: -64px -352px;
}
#PRI {
background-position: 0 -352px;
}
#QAT {
background-position: -160px -352px;
}
#ROU {
background-position: -224px -352px;
}
#RUS, #RUS2, #RUS3 {
background-position: -288px -352px;
}
#RWA {
background-position: -320px -352px;
}
#SHN {
background-position: -32px -384px;
}
#TDC {
background-position: -160px -192px;
}
#KNA {
background-position: -96px -224px;
}
#LCA {
background-position: -352px -224px;
}
#SPM {
background-position: -20px -204px;
}
#VCT {
background-position: -128px -448px;
}
#WSM {
background-position: -352px -448px;
}
#SMR {
background-position: -160px -384px;
}
#STP {
background-position: -320px -384px;
}
#SAU {
background-position: -352px -352px;
}
#SEN {
background-position: -192px -384px;
}
#SRB {
background-position: -256px -352px;
}
#SYC {
background-position: -416px -352px;
}
#SLE {
background-position: -128px -384px;
}
#SGP {
background-position: 0 -384px;
}
#SVK, #SVK2 {
background-position: -96px -384px;
}
#SVN, #SVN2 {
background-position: -64px -384px;
}
#SLB {
background-position: -384px -352px;
}
#SOM {
background-position: -224px -384px;
}
#ZAF {
background-position: -448px -448px;
}
#SSD {
background-position: -288px -384px;
}
#ESP, #ESP2 {
background-position: 0 -128px;
}
#LKA {
background-position: -416px -224px;
}
#SDN {
background-position: -448px -352px;
}
#SUR {
background-position: -256px -384px;
}
#SWZ {
background-position: -416px -384px;
}
#SWE, #SWE2 {
background-position: -480px -352px;
}
#CHE, #CHE2 {
background-position: -256px -64px;
}
#SYR {
background-position: -384px -384px;
}
#TWN {
background-position: -384px -416px;
}
#TJK {
background-position: -96px -416px;
}
#TZA {
background-position: -416px -416px;
}
#THA {
background-position: -64px -416px;
}
#TIBET {
background-position: -20px -240px;
}
#TLS {
background-position: -40px -240px;
}
#TLS2 {
background-position: -40px -240px;
}
#TGO {
background-position: -32px -416px;
}
#TKL {
background-position: -128px -416px;
}
#TON {
background-position: -256px -416px;
}
#TTO {
background-position: -320px -416px;
}
#TUN {
background-position: -224px -416px;
}
#TUR {
background-position: -288px -416px;
}
#TKM {
background-position: -192px -416px;
}
#TCA {
background-position: -448px -384px;
}
#TUV {
background-position: -352px -416px;
}
#UGA {
background-position: -480px -416px;
}
#UKR {
background-position: -448px -416px;
}
#ARE {
background-position: -64px 0;
}
#GBR, #GBR2, #GBR3, #GBR4, #GBR5, #ACI {
background-position: -320px -128px;
}
#USA, #USA2, #USA3, #USA4, #USA5, #USA6, #USA7, #USA8, #USA9, #USA10, #USA11, #USA12, #USA13, #USA14, #USA15, #USA16 {
background-position: 0 -448px;
}
#UMI {
background-position: -120px -252px;
}
#URY {
background-position: -32px -448px;
}
#UZB {
background-position: -64px -448px;
}
#VUT {
background-position: -288px -448px;
}
#VAT {
background-position: -96px -448px;
}
#VA {
background-position: 0px -264px;
}
#VEN {
background-position: -160px -448px;
}
#VNM {
background-position: -256px -448px;
}
#VIR {
background-position: -224px -448px;
}
#WLF {
background-position: -320px -448px;
}
#ESH {
background-position: -448px -96px;
}
#YEM {
background-position: -384px -448px;
}
#ZMB {
background-position: -480px -448px;
}
#ZWE {
background-position: 0 -480px;
}
#IOT {
background-position: -180px -264px;
}
#CXR {
background-position: 0px -276px;
}
#CCK {
background-position: -20px -276px;
}
#GGY {
background-position: -416px -128px;
}
#IMN {
background-position: -128px -192px;
}
#JEY {
background-position: -320px -192px;
}
#NFK {
background-position: -448px -288px;
}
#BLM {
background-position: -320px -32px;
}
#SGS {
background-position: -192px -160px;
}
#EUR {
background-position: -64px -128px;
}
#SEG {
background-position: 0px 0px;
}
No comments:
Post a Comment