CSS Sprites- a method to optimize page loads by combining a large number of small country flag images into one. The method of extremely relevant with the active use of country flags - with all the flags on one page, then load it, the browser will need to make only two server requests instead of 247.
This service allows you to easily create CSS Sprites for any desired set of flags. Select the flags from the list and get the image in PNG format and the corresponding CSS code, ready to use on your website.
Insert a transparent 1x1 pixel image and assign a class flag and flag-<country code>. The country code is in the format ISO 3166-1 alpha-2. For example, the flag of the Czech Republic:
<div class="flag flag-us"></div>
Other interesting CSS flag sprite sets for your website with ready to use examples.
Few examples using our css flag library with Bootstrap framework.
Bootstrap language dropdown with flags example in navbar using our flag css sprites library.
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://flag-sprites.com" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag flag-us"> </span> English</a>
<div class="dropdown-menu" aria-labelledby="dropdown09">
<a class="dropdown-item" href="#fr"><span class="flag flag-us"> </span> French</a>
<a class="dropdown-item" href="#it"><span class="flag flag-es"> </span> Italian</a>
<a class="dropdown-item" href="#ru"><span class="flag flag-fr"> </span> Russian</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
Bootstrap menu list with flag icons, great css menu for travel website or just to select language.
<ul class="list-group">
<li class="list-group-item"><span class="flag flag-es"></span> <a href="#">Spain</a></li>
<li class="list-group-item"><span class="flag flag-fr"></span> <a href="#">France</a></li>
<li class="list-group-item"><span class="flag flag-us"></span> <a href="#">United States</a></li>
<li class="list-group-item"><span class="flag flag-ph"></span> <a href="#">Philippines</a></li>
<li class="list-group-item"><span class="flag flag-cz"></span> <a href="#">Czech Republic</a></li>
</ul>
Please, set a link to https://flag-sprites.com/ on the homepage where you use our content
SPONSORS If you want to be a sponsor, write a mail to themysticaweb@gmail.com