search

uloga / worldflags

:flags:World Flags - CSS Module : Sprite sizes from 16 to 64. Styles: flat and glossy:earth_asia:
MIT License
18 stars 3 forks source link

readme

WorldFlags

Styles: flat & glossy.

Sizes from 16 to 64

You can find examples at: WorldFlags Examples

Getting Started:

Paste the following code into the <head> section of your site's HTML.

<link rel="stylesheet" href="https://uloga.github.io/worldflags/css/flags.css">

After you get up and running, you can place WorldFlags just about anywhere with the <i> tag as shown in example below:

<!-- Extra Small f16 -->

<i class="f16_netherlands"></i>

<!-- Small f24 -->

<i class="f24_germany"></i>

<!-- Medium f32 -->

<i class="f32_england"></i>

<!-- Large f48 -->

<i class="f48_united_states"></i>

<!-- Extra Large f64 -->

<i class="f64_russia"></i>

Flag Styles

WorldFlags default style is set to flat, you can change it to glossy by copying and pasting following codes below into your main css file.

f16

[class^="f16_"], [class*=" f16_"] {
    background-image: url("https://uloga.github.io/worldflags/flags/f16-glossy.png");
}

f24

[class^="f24_"], [class*=" f24_"] {
    background-image: url("https://uloga.github.io/worldflags/flags/f24-glossy.png");
}

f32

[class^="f32_"], [class*=" f32_"] {
    background-image: url("https://uloga.github.io/worldflags/flags/f32-glossy.png");
}

f48

[class^="f48_"], [class*=" f48_"] {
    background-image: url("https://uloga.github.io/worldflags/flags/f48-glossy.png");
}

f64

[class^="f64_"], [class*=" f64_"] {
    background-image: url("https://uloga.github.io/worldflags/flags/f64-glossy.png");
}