Пиктограммы государственных флагов в спрайте

Я взял флажки Никиты Иванова и собрал их в одном спрайте для более удобного и оптимального использования на сайтах. Мне кажется, то, что получилось, может пригодиться и вам в своей работе.

Слово Никите:

;-)

Однажды мне понадобились маленькие пиктограммы всех государственных флагов на свете. Причём, в них не должно было быть игрушечной веб-два-нольной глянцевости и «весёленьких» искажённых цветов. Как ни странно, мне не удалось найти ничего подходящего — поэтому я взялся за эту работу самостоятельно.

Значок российского флага стал маленькой и чёткой копией нашего триколора. Такими же аккуратными получились флаги, например, Ямайки или Греции . А над флагами Австралии и Британии пришлось чуть-чуть попотеть.

Оригинальный архив с пиктограммами можно скачать на сайте Никиты Иванова, 255 ПНГ-файлов из архива весят всего 67 килобайт. Если вам нужны флажки в графическом редакторе, отдельные файлы — ваш выбор.

На вебе же лучше использовать спрайт, так как он ещё легче — 31 КБ, и за два запроса к серверу (ЦССПНГ) вы получаете все флаги разом.

Как использовать

Сохраните flags.css и flags.png из архива на своём сервере в любой удобной папке, в моём примере эти файлы якобы в одном месте с ХТМЛ.

ЦСС подключается обычным способом, а спрайт упоминается там, где нужна пиктограмма:

Эти летом я был:
в Гондурасе
Лихтенштейне,
и Швеции.

Значок флага нужной страны получить очень просто, вставьте её код в названии класса любого пустого элемента, вот так: <i class="flag-RU"></i> — российский триколор, <i class="flag-FR"></i> — французский.

Все 255 флагов

По-русски На английском Только коды

ISO_3166-2?

В большинстве случаев коды пиктограмм совпадают с официальными кодами стандарта ISO_3166-2, в исключениях некоторые непризнанные государства и несуверенные регионы:

  • Абхазия ABKHAZIA,
  • Сеута ES-CE,
  • Мелилья ES-ML,
  • Канарские острова IC,
  • Косово KOSOVO,
  • Нагорно-Карабахская Республика NKR,
  • Южная Осетия SOUTH-OSSETIA.

Cлучайная пиктограммка

Массивы

Кстати, в архиве кроме спрайта есть массивы кодов и наименований стран в разных форматах (JS, JSON, SQL) для удобного перебора флагов в этом спрайте. Они могут пригодится, например, если вы задумаете при автодополнении страны тут же подгружать флажок.

Здесь с помощью такого массива я показываю все флаги, по-разному сортирую их, вывожу случайную пиктограмму.

Думаю, тот, кому понадобятся массивы, разберётся без меня, как ими пользоваться.

Флаги, бесплатно, скачать без СМС :-)

flags.zip
Спрайт, ЦСС к нему и тестовая страница.
В папке extra лежат файлы с массивами названий стран на двух языках и их кодов — flags.js, flags.json, flags_mapping.json и даже flags.sql.

Заглянуть внутрь исходников, .psd и .sass, можно на Гитхабе.

Набор распостраняется на условиях лицензии CC-BY-SA, то есть, вы можете делать с ним практически всё, что угодно: свободно использовать и модернизировать.

Tweet