2013-09-27 01:06:39 +02:00
|
|
|
flag-icon-css
|
|
|
|
|
=============
|
2013-09-24 17:29:04 +02:00
|
|
|
|
2013-09-27 01:06:39 +02:00
|
|
|
CSS for vector based country flags. See the
|
|
|
|
|
[demo](http://lipis.github.io/flag-icon-css/).
|
2013-09-24 17:29:04 +02:00
|
|
|
|
|
|
|
|
CSS classes
|
|
|
|
|
-----------
|
|
|
|
|
|
|
|
|
|
|
2013-09-27 00:40:54 +02:00
|
|
|
`.flag-icon` sets the correct proportions for the flag icon when used inline
|
|
|
|
|
with text.
|
2013-09-24 17:29:04 +02:00
|
|
|
|
2013-09-27 00:40:54 +02:00
|
|
|
`.flag-icon-xx` sets the `background-image` with the correct flag, where `xx` is the
|
|
|
|
|
[ISO 3166-1-alpha-2 code](http://www.iso.org/iso/country_names_and_code_elements).
|
2013-09-24 17:29:04 +02:00
|
|
|
|
2013-09-25 22:00:00 +02:00
|
|
|
`.flag-icon-squared` for the squared version of the flag.
|
2013-09-24 17:29:04 +02:00
|
|
|
|
2013-09-27 00:40:54 +02:00
|
|
|
`.flag-icon-background` sets the the background to `position: 50%`,
|
|
|
|
|
`repeat:no-repeat` and `size:contain`.
|
2013-09-24 17:29:04 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
Usage
|
|
|
|
|
-----
|
|
|
|
|
|
2013-09-27 00:40:54 +02:00
|
|
|
For using the flags inline with text add the classes `.flag-icon` and `.flag-icon-xx`
|
2013-09-27 01:06:39 +02:00
|
|
|
to an empty `<span>`. If you want the flag to have the squared version then also add
|
2013-09-27 00:40:54 +02:00
|
|
|
the clas `flag-icon-squared`. Example:
|
|
|
|
|
|
2013-09-24 17:29:04 +02:00
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
|
<span class="flag-icon flag-icon-gr flag-icon-squared"></span>
|
2013-09-25 22:33:29 +02:00
|
|
|
|
2013-09-27 01:06:39 +02:00
|
|
|
You could also apply this to any element, but in that case you'll have to use the
|
|
|
|
|
`flag-icon-background` instead of `flag-icon` and you're set. This will add the
|
2013-09-27 00:40:54 +02:00
|
|
|
correct background with the following CSS properties:
|
|
|
|
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-position: 50%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
2013-09-27 01:06:39 +02:00
|
|
|
Which means that the flag is just going to appear in the middle of an element, so
|
2013-09-27 00:40:54 +02:00
|
|
|
you will have to set manually the correct size of 3x4 ratio or if it's squared add also the `flag-icon-squared` class.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Development
|
|
|
|
|
-----------
|
|
|
|
|
|
|
|
|
|
Run the `npm install` to install the dependencies after cloning the project and
|
|
|
|
|
you'll be able to:
|
|
|
|
|
|
|
|
|
|
To watch for changes and live reloed if served
|
|
|
|
|
|
|
|
|
|
$ grunt
|
|
|
|
|
|
|
|
|
|
To build `*.less` files
|
|
|
|
|
|
|
|
|
|
$ grunt build
|
|
|
|
|
|
|
|
|
|
To serve it on `localhost:8000`
|
|
|
|
|
|
|
|
|
|
$ grunt connect
|
|
|
|
|
|
2013-09-27 01:06:39 +02:00
|
|
|
To have only specific countries in the css file, remove the ones that you don't
|
2013-09-27 00:40:54 +02:00
|
|
|
need from the
|
2013-09-27 01:06:39 +02:00
|
|
|
[`flag-icon-list.less`](https://github.com/lipis/flag-icon-css/blob/master/less/flag-icon-css-list.less)
|
2013-09-27 00:40:54 +02:00
|
|
|
file and build it again.
|
|
|
|
|
|
2013-09-25 22:33:29 +02:00
|
|
|
Credits
|
|
|
|
|
-------
|
|
|
|
|
|
2013-09-27 00:40:54 +02:00
|
|
|
This project wouldn't exist without the awesome collection of svg flags:
|
2013-09-25 22:33:29 +02:00
|
|
|
[koppi/iso-country-flags-svg-collection](https://github.com/koppi/iso-country-flags-svg-collection)
|
