链街Dcat后台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

70 lines
2.0 KiB

6 years ago
  1. flag-icon-css
  2. =============
  3. [![npm version](https://badge.fury.io/js/flag-icon-css.svg)](https://badge.fury.io/js/flag-icon-css)
  4. [![Bower version](https://badge.fury.io/bo/flag-icon-css.svg)](https://badge.fury.io/bo/flag-icon-css)
  5. A collection of all country flags in SVG — plus the CSS for easier integration.
  6. See the [demo](http://lipis.github.io/flag-icon-css/).
  7. Usage
  8. -----
  9. For using the flags inline with text add the classes `.flag-icon` and
  10. `.flag-icon-xx` (where `xx` is the
  11. [ISO 3166-1-alpha-2 code](http://www.iso.org/iso/country_names_and_code_elements)
  12. of a country) to an empty `<span>`. If you want to have a squared version flag
  13. then add the class `flag-icon-squared` as well. Example:
  14. ```html
  15. <span class="flag-icon flag-icon-gr"></span>
  16. <span class="flag-icon flag-icon-gr flag-icon-squared"></span>
  17. ```
  18. You could also apply this to any element, but in that case you'll have to use the
  19. `flag-icon-background` instead of `flag-icon` and you're set. This will add the
  20. correct background with the following CSS properties:
  21. ```css
  22. background-size: contain;
  23. background-position: 50%;
  24. background-repeat: no-repeat;
  25. ```
  26. Which means that the flag is just going to appear in the middle of an element, so
  27. you will have to set manually the correct size of 4 by 3 ratio or if it's squared
  28. add also the `flag-icon-squared` class.
  29. Development
  30. -----------
  31. Run the `npm install` to install the dependencies after cloning the project and
  32. you'll be able to:
  33. To watch for changes and live reload if served
  34. ```bash
  35. $ grunt
  36. ```
  37. To build `*.less` files
  38. ```bash
  39. $ grunt build
  40. ```
  41. To serve it on `localhost:8000`
  42. ```bash
  43. $ grunt connect
  44. ```
  45. To have only specific countries in the css file, remove the ones that you don't
  46. need from the
  47. [`flag-icon-list.less`](https://github.com/lipis/flag-icon-css/blob/master/less/flag-icon-list.less)
  48. file and build it again.
  49. Credits
  50. -------
  51. This project wouldn't exist without the awesome and now deleted collection of
  52. SVG flags by [koppi](https://github.com/koppi).