You can find examples at: WorldFlags Examples
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>
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.
[class^="f16_"], [class*=" f16_"] {
background-image: url("https://uloga.github.io/worldflags/flags/f16-glossy.png");
}
[class^="f24_"], [class*=" f24_"] {
background-image: url("https://uloga.github.io/worldflags/flags/f24-glossy.png");
}
[class^="f32_"], [class*=" f32_"] {
background-image: url("https://uloga.github.io/worldflags/flags/f32-glossy.png");
}
[class^="f48_"], [class*=" f48_"] {
background-image: url("https://uloga.github.io/worldflags/flags/f48-glossy.png");
}
[class^="f64_"], [class*=" f64_"] {
background-image: url("https://uloga.github.io/worldflags/flags/f64-glossy.png");
}