Per Søderlind

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 <a href="https://github.com/soderlind/css-flags/#example-1" rel="nofollow ugc">add code to your theme</a> using your own plugin or theme functions.php
You can <a href="https://soderlind.no/css-flags-plugin-for-wordpress/" rel="nofollow ugc">view the flags at my site</a>
Sample CSS:
<pre><code>.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%;
}
</code></pre>
<h4>Usage</h4>
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
<pre><code>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
});
</code></pre>
css_flags_regions: Load the flags for one or more regions. You can choose between europe, oceania, africa, asia, northamerica, southamerica and middleeast.
<pre><code>add_filter('css_flags_regions', function() {
 return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
});
</code></pre>
css_flags_exclude: Exclude some countries from the list. This filter must be used in combination with the <code>css_flags_countries</code> or <code>css_flags_regions</code> filters
<pre><code>add_filter('css_flags_exclude', function() {
 return array('eu');
});
</code></pre>
css_flags_cachetime: Change the cache time, default it’s 7200 (60x60x2 = 2 hours)
<pre><code>add_filter('css_flags_cachetime', function() {
 return 172800; // 2 days
});
</code></pre>
If you must (but you shouldn’t), you can load all the CSS flags using the following:
<pre><code>add_filter('css_flags_countries', function() {
 return array('all'); // load all country flags (don't it's 4MB)
});
</code></pre>
More information at <a href="https://github.com/soderlind/css-flags/" rel="nofollow ugc">GitHub</a>
<h4>Credits</h4>
The original CSS file is from http://www.phoca.cz/cssflags/. If you only need the CSS file, grab it there.

CSS Flags library

More than 250 vector based flags for WordPress

CSS Flags library vs WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager