The CSS Flags plugin / library for WordPress loads a dynamicaly created CSS with responsive flags.
Note: CSS Flags is not a standalone plugin/library, To display the flags you will have to add code to your theme using your own plugin or theme functions.php
You can view the flags at my site
Sample CSS:
.css-flag.sami {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAyMCIgaGVpZ2h0PSIxNTAwIj48cmVjdCB3aWR0aD0iNjQ1IiBoZWlnaHQ9IjE1MDAiIGZpbGw9IiNkODFlMDUiLz48cmVjdCB4PSI2NDUiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTUwMCIgZmlsbD0iIzAwN2EzZCIvPjxyZWN0IHg9Ijc4NSIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNTAwIiBmaWxsPSIjZmNkMTE2Ii8+PHJlY3QgeD0iOTI1IiB3aWR0aD0iMTA5NSIgaGVpZ2h0PSIxNTAwIiBmaWxsPSIjMDAzOGE4Ii8+PHBhdGggZD0iTSA3ODUsMzEwIGEgNDQwIDQ0MCAwIDAgMCAwLDg4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAzOGE4IiBzdHJva2Utd2lkdGg9IjgwIi8+PHBhdGggZD0iTSA3ODUsMzEwIGEgNDQwIDQ0MCAwIDAgMSAwLDg4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDgxZTA1IiBzdHJva2Utd2lkdGg9IjgwIi8+PC9zdmc+');
height: 100%;
width: 134.666666667%;
background-size: 100% 100%;
}
.css-flag.sami-landscape {
height: 100%;
width: 134.666666667%;
}
.css-flag.sami-portrait {
height: 74.2574257426%;
width: 100%;
}
Usage
The total CSS file size is 4 MB, and you don’t want to send all that data back to the users, so you must use one of the following filters in your plugin or theme.
css_flags_countries: Load flags for one or more countries
add_filter('css_flags_countries', function() {
return array('no'); // Array with ISO_3166-1_alpha-2 country codes: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
});
css_flags_regions: Load the flags for one or more regions. You can choose between europe, oceania, africa, asia, northamerica, southamerica and middleeast.
add_filter('css_flags_regions', function() {
return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
});
css_flags_exclude: Exclude some countries from the list. This filter must be used in combination with the css_flags_countries or css_flags_regions filters
add_filter('css_flags_exclude', function() {
return array('eu');
});
css_flags_cachetime: Change the cache time, default it’s 7200 (60x60x2 = 2 hours)
add_filter('css_flags_cachetime', function() {
return 172800; // 2 days
});
If you must (but you shouldn’t), you can load all the CSS flags using the following:
add_filter('css_flags_countries', function() {
return array('all'); // load all country flags (don't it's 4MB)
});
More information at GitHub
Credits
The original CSS file is from http://www.phoca.cz/cssflags/. If you only need the CSS file, grab it there.