Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Flag icons in sprite
JavaScript Ruby
Branch: add_readme
Pull request Compare This branch is 1 commit ahead, 2 commits behind artpolikarpov:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
extra
src
.DS_Store
.gitignore
README.md
config.rb
flags.css
flags.png
test.html

README.md

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

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

Слово Никите

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

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

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

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

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

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

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

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

Something went wrong with that request. Please try again.