Флаг Emojis может не отображаться независимо от того, что вы делаете, в зависимости от платформы (а не только от браузера и / или шрифта браузера).Чтобы выяснить это, перейдите на https://emojipedia.org/search/?q=emoji+flags и посмотрите, как отображается флаг смайликов для Джибути, слева от текста " Flag: Djibouti ".
Если вы видите изображение флага, все хорошо, но если вы видите только DJ , флаги emoji могут не поддерживаться.Я посетил эту страницу на iPad, Linux Mint 18.2 и Windows 10, и вот что я нашел:
- Флаг Джибути, смоделированный на iPad.
- Флаг Джибути былотображается как DJ в Linux Mint 18.2 с использованием Firefox.
- Флаг Джибути отображается как DJ в Windows 10 с использованием Firefox, хотя это ожидалось с " Microsoft не поддерживает какие-либо флаги стран в Windows , вместо этого показывая двухбуквенные коды стран ".
Так что если вы хотите отображать флаги эмодзи только вбраузер на платформах Apple, у вас должно быть все в порядке, и если вы хотите отобразить флаги эмодзи в браузере в Windows, вместо этого будет отображаться двухзначный код страны.Я не уверен насчет ситуации в Linux, так как, хотя она не работала для меня в моей среде, я не смог найти ничего, явно заявляющего, что она должна или не должна работать.
Альтернатива использованию UnicodeФлаг Emoji, если вам нужно, чтобы это работало на всех платформах, это загрузить бесплатные Emojis, которые на самом деле представляют собой просто маленькие png изображения.Вот несколько образцов аргентинского флага .
Обновление:
В отсутствие истинного решения, как описано выше, вотальтернативный подход, который не использует Unicode Emojis, но вместо этого использует загруженные .png изображения:
<!DOCTYPE html>
<html>
<head>
<title>Flag demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!–– Credit to Alvaro Montoro for this approach - see https://stackoverflow.com/a/41189982/2985643 ––>
<link rel="StyleSheet" href="css/flagdemo.css">
</head>
<body>
<h1>Flag demo</h1>
<div class="select-sim" id="select-color">
<div class="options">
<div class="option">
<input type="radio" name="flag" value="" id="flag-" checked />
<label for="flag-">⚐ Pick a country</label>
</div>
<div class="option">
<input type="radio" name="flag" value="Argentina" id="flag-argentina" />
<label for="flag-argentina"><img src="img/argentina-flag-round-icon-16.png" alt="" /> Argentina</label>
</div>
<div class="option">
<input type="radio" name="flag" value="Brazil" id="flag-brazil" />
<label for="flag-brazil"><img src="img/brazil-flag-round-icon-16.png" alt="" /> Brazil</label>
</div>
<div class="option">
<input type="radio" name="flag" value="Chile" id="flag-chile" />
<label for="flag-chile"><img src="img/chile-flag-round-icon-16.png" alt="" /> Chile</label>
</div>
</div>
</div>
</body>
</html>
Содержимое файла .css (flagdemo.css) идентичен предоставленному Альваро Монторо в этом SO-ответе на вопрос Как добавить изображения в список выбора? .
Поскольку этот подход использует только стандартный HTMLи CCS (без Javascript или JQuery) он должен работать на любой платформе:
