0
0
mirror of https://github.com/lipis/flag-icons.git synced 2024-11-22 02:47:32 +01:00
flags/README.md

78 lines
2.2 KiB
Markdown
Raw Normal View History

2016-08-14 18:12:53 +02:00
# flag-icon-css
2015-10-07 14:27:09 +02:00
[![npm version](https://badge.fury.io/js/flag-icon-css.svg)](https://badge.fury.io/js/flag-icon-css)
[![Bower version](https://badge.fury.io/bo/flag-icon-css.svg)](https://badge.fury.io/bo/flag-icon-css)
2013-09-24 17:29:04 +02:00
2016-01-21 15:15:27 +01:00
A collection of all country flags in SVG — plus the CSS for easier integration.
See the [demo](http://lipis.github.io/flag-icon-css/).
2013-09-24 17:29:04 +02:00
2016-05-08 14:24:15 +02:00
Install
-------
You can either [download](https://github.com/lipis/flag-icon-css/archive/master.zip)
the whole project as is or install it via Bower or NPM:
```bash
$ bower install flag-icon-css
$ npm install flag-icon-css
```
2016-08-14 18:12:53 +02:00
## Usage
2013-09-24 17:29:04 +02:00
2015-11-15 17:42:59 +01:00
For using the flags inline with text add the classes `.flag-icon` and
2013-09-28 12:48:44 +02:00
`.flag-icon-xx` (where `xx` is the
2015-11-15 17:42:59 +01:00
[ISO 3166-1-alpha-2 code](http://www.iso.org/iso/country_names_and_code_elements)
2013-09-27 02:14:35 +02:00
of a country) to an empty `<span>`. If you want to have a squared version flag
then add the class `flag-icon-squared` as well. Example:
2013-09-27 00:40:54 +02:00
2015-11-15 17:42:59 +01:00
```html
<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:
2015-11-15 17:42:59 +01:00
```css
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
```
2013-09-27 00:40:54 +02:00
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
2015-11-15 17:42:59 +01:00
you will have to set manually the correct size of 4 by 3 ratio or if it's squared
2013-09-28 12:48:44 +02:00
add also the `flag-icon-squared` class.
2013-09-27 00:40:54 +02:00
2016-08-14 18:12:53 +02:00
## Development
2013-09-27 00:40:54 +02:00
Run the `npm install` to install the dependencies after cloning the project and
you'll be able to:
2014-02-04 17:15:15 +01:00
To watch for changes and live reload if served
2013-09-27 00:40:54 +02:00
2015-11-15 17:42:59 +01:00
```bash
$ grunt
```
2013-09-27 00:40:54 +02:00
To build `*.less` files
2015-11-15 17:42:59 +01:00
```bash
$ grunt build
```
2013-09-27 00:40:54 +02:00
To serve it on `localhost:8000`
2015-11-15 17:42:59 +01:00
```bash
$ grunt connect
```
2013-09-27 00:40:54 +02:00
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 02:44:14 +02:00
[`flag-icon-list.less`](https://github.com/lipis/flag-icon-css/blob/master/less/flag-icon-list.less)
2013-09-27 00:40:54 +02:00
file and build it again.
2015-11-15 17:42:59 +01:00
2016-08-14 18:12:53 +02:00
## Credits
2015-11-15 17:42:59 +01:00
This project wouldn't exist without the awesome and now deleted collection of
SVG flags by [koppi](https://github.com/koppi).