CSS Sprites - a method to optimize page loads by combining a large number of small 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.
- Install bower (if not already)
npm install -g bower- Get the package and persist it to your
bower.json
bower install flag-sprites --save- Include the stylesheet
<link href="components/flag-sprites/dist/css/flag-sprites.min.css" rel="stylesheet" type="text/css"/>- Use anywhere on your page
<i class="flag flag-ca"></i>Flag icons come from FamFamFam, and callable following the ISO 3166-1 alpha-2 country codes.
FamFamFam flag icons are "available for free use for any purpose with no requirement for attribution".
Based on the concept of flag-sprites, repackaged for bower and LESS usage to optimize integration.