CSS Flags library

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.