Per Søderlind

<p>The CSS Flags plugin / library for WordPress loads a dynamicaly created CSS with responsive flags.</p>
<p><strong>Note:</strong> 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</p>
<p>You can <a href="https://soderlind.no/css-flags-plugin-for-wordpress/" rel="nofollow ugc">view the flags at my site</a></p>
<p>Sample CSS:</p>
<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>
<p>The total CSS file size is 4 MB, and you don’t want to send all that data back to the users, so you <strong>must</strong> use one of the following filters in your plugin or theme.</p>
<p><strong>css_flags_countries</strong>: Load flags for one or more countries</p>
<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>
<p><strong>css_flags_regions</strong>: Load the flags for one or more regions. You can choose between europe, oceania, africa, asia, northamerica, southamerica and middleeast.</p>
<pre><code>add_filter('css_flags_regions', function() {
    return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
});
</code></pre>
<p><strong>css_flags_exclude</strong>: 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</p>
<pre><code>add_filter('css_flags_exclude', function() {
    return array('eu');
});
</code></pre>
<p><strong>css_flags_cachetime</strong>: Change the cache time, default it’s 7200 (60x60x2 = 2 hours)</p>
<pre><code>add_filter('css_flags_cachetime', function() {
    return 172800; // 2 days
});
</code></pre>
<p>If you must (but you shouldn’t), you can load all the  CSS flags using the following:</p>
<pre><code>add_filter('css_flags_countries', function() {
    return array('all'); // load all country flags (don't it's 4MB)
});
</code></pre>
<p>More information at <a href="https://github.com/soderlind/css-flags/" rel="nofollow ugc">GitHub</a></p>
<h4>Credits</h4>
<p>The original CSS file is from http://www.phoca.cz/cssflags/. If you only need the CSS file, grab it there.</p>


CSS Flags library

More than 250 vector based flags for WordPress

merkulove

podolianochka

phoenix

viktorialev01

Vlad

<p><a href="https://myselection.io/lite" rel="nofollow ugc">Selection Lite</a> Elementor bundle is already included widgets, each of which was carefully designed as a separate item and loved by our users. Is it worth talking about the benefits of such a set of Elementor widgets? Obviously, this is a godsend when developing your site as it contains many useful, frequently used elements and relieves the need to choose between one or another. At the same time, this will help to achieve the desired effect regardless of your skills and save your time and costs.</p>
<p>Visit <a href="https://myselection.io/lite" rel="nofollow ugc">Live Demo</a></p>
<p>Each widget of the Elementor widgets pack is responsive and looks good on different devices. They are tested and fully compatible with all modern browsers. Each of the items has great potential for creating unique elements thanks to flexible style and content settings. If you do not plan to use all the widgets on your site, you can disable some through the Selection plugin settings to exclude their loading in the Elementor editor and on the site.</p>
<p>For tutorials visit our <a href="https://docs.merkulov.design/selection" rel="nofollow ugc">Online Documentation</a>.</p>
<h4>Key Features of Selection Lite</h4>
<ul>
<li>Includes 15+ Elementor widgets</li>
<li>Includes popular widgets</li>
<li>Only visual editor without any coding knowledge</li>
<li>Modern Convenient User Interface</li>
<li>Customizable fonts, colors, borders, backgrounds, etc.</li>
<li>Responsiveness settings</li>
<li>Works well with all WordPress themes built on Elementor</li>
<li>Totally SEO Friendly</li>
<li>Included pot file for quick translation on any language</li>
<li>Perfect for RTL direction</li>
<li>Fast and smooth installing</li>
<li>Tested and compatible up to WordPress 6+</li>
<li>All major browsers supported Chrome, Firefox, Safari, Opera, and Edge</li>
<li>Easy to use and customize with modern User Interface</li>
<li>Installation Guide and detailed Users Manual</li>
</ul>
<h4>Flexible Design Settings</h4>
<p>You don’t have to look for inspiration to create an awesome page block from scratch. Just import the required template, manage it and get the result in a few moments. Any coding knowledge is not required.</p>
<h4>Ready to work in any environment</h4>
<p>We continuously monitor the latest innovations and trends in the development universe. And they prepared a plugin to work with the newest version of PHP. However, you can use the plugin on older versions as well. The Selection Lite is compatible with the PHP version starting from 5.6 and up to most recent stable versions.</p>
<h4>Reliability and Compatibility</h4>
<p>Selection Lite is fully cross-browser. It does not matter which browser users view your site. Chrome, Firefox, Opera, Safari, Edge, or even the outdated versions of Internet Explorer – in all browsers, visitors will get an incredible experience. Moreover, this is especially important if your site has many long pages, such as a Blog, Portfolio, Corporate Website, eCommerce Project, Creative Agency, Real Estate Listing, Personal CV, a Restaurant or Retail Company.<br />
Selection Lite tested and compatible with All Major WP Plugins: Yoast SEO, Contact Form 7, W3 Total Cache, NextGen Gallery, Slider Revolution, WooCommerce, etc. It also works perfectly and improves the user experience with popular Website Page Builders, like Elementor, Visual Composer, Gutenberg, Beaver Builder, Divi, Themify Builder, WP Bakery Page Builder, Layers WP, and many others. The plugin works perfectly with all significant WordPress frameworks: Genesis, Divi, Themify, Warp 7, Ultimatum, Beans, Unyson, Gantry, and others.</p>
<h4>Feel the Power of Selection PRO</h4>
<p>Selection Light includes only the basic functions. Go <a href="https://1.envato.market/selection" rel="nofollow ugc">Selection PRO</a> to get more awesome features. Buy a license and gain access to all hidden features.</p>
<ul>
<li>No prohibitions or restrictions</li>
<li>No limitation in widget settings</li>
<li>Elementor Header & Footer</li>
<li>50+ awesome Elementor widgets</li>
<li>200+ Elementor Templates</li>
<li>Premium Customer Support</li>
</ul>
<p>Go <a href="https://1.envato.market/selection" rel="nofollow ugc">PRO</a>.</p>


Selection Lite

The Selection Lite Elementor widgets pack of items! This is just the initial version of a huge product we're excited to bring to the world.

CSS Flags library vs Selection Lite