我的标题上有一个下拉菜单,我用它来显示不同国家的电话号码,我需要在它的旁边放一个旗子,但没有显示旗子,只有旗子的字母表示(例如阿根廷旗子看起来像这样🇦🇷 但它显示了字母A和字母R)的表情符号,因为就我所知,标志表情符号是如何工作的,我如何才能避免这种情况(在第二个电话号码中显示一个汉堡包,只是为了表明表情符号确实在我的网站上工作)
<;选择name=“Telefonos”id=“group”>;
<;选项值=“+543515296002”>&#x1F1E6&#x1F1F7+54351529600
<;选项值=“+12398105440”>;🍔 +12398105440
<;选项值=“+12398105440”>;🇺🇸 +12398105440
</选择>
这就是我尝试过的,无论是使用代码还是复制表情符号都不起作用,即使我在编码时它确实显示出来了
这就是实际渲染的内容
根据平台(而不仅仅是浏览器和/或浏览器字体),无论您做什么,标志emojis都可能不会呈现。要了解详情,请访问https://emojipedia.org/search/?q=emoji+标记并查看文本“标记:吉布提”左侧吉布提表情符号标记的呈现
如果您看到一个标志的图像,一切正常,但如果您只看到DJ,则可能不支持表情符号。我在iPad、Linux Mint 18.2和Windows 10上访问了该页面,我发现:
- iPad上呈现的吉布提国旗表情符号
- 吉布提标志在Linux Mint 18.2上使用Firefox呈现为DJ
- 吉布提国旗在使用Firefox的Windows 10上显示为DJ,尽管这是意料之中的,因为“Microsoft不支持Windows上的任何国家国旗,而是显示两个字母的国家代码”
因此,如果您只想在Apple平台上的浏览器中呈现表情符号,您应该可以,如果您想在Windows平台上的浏览器中呈现表情符号,它将呈现两个字符的国家代码。我不确定Linux上的情况,因为尽管它在我的环境中对我不起作用,但我找不到任何明确说明它应该或不应该起作用的东西
如果您需要在所有平台上使用Unicode表情符号,可以选择下载免费的表情符号,这些表情符号实际上只是很小的png图像。这里有一些阿根廷国旗的样品
更新:
在缺乏上述真正解决方案的情况下,这里有一种替代方法,它不使用Unicode emojis,而是使用下载的.png图像:
<;!DOCTYPE html>;
<;html>;
<;头>;
<;标题>;旗帜演示</标题>;
<;meta charset=“UTF-8”大于;
<;meta name=“viewport”content=“宽度=设备宽度,初始比例=1.0”>;
<;!–这种方法归功于阿尔瓦罗·蒙托罗(Alvaro Montoro)——参见https://stackoverflow.com/a/41189982/2985643 ––gt;
<;link rel=“样式表”href=”https://stackoverflow.com/questions/54519758/css/flagdemo.css“>;
</头>;
<;车身>;
<;h1>;旗帜演示</h1>;
<;div class=“选择sim”id=“选择颜色”>;
<;div class=“选项”>;
<;div class=“option”>;
<;输入type=“radio”name=“flag”value=“”id=“flag-”已选中/>;
<;=“flag-”的标签>&#x2690;选择一个国家</标签>;
</部门>;
<;div class=“option”>;
<;输入type=“radio”name=“flag”value=“阿根廷”id=“flag阿根廷”/>;
<;=“阿根廷国旗”标签>&书信电报;img src=”https://stackoverflow.com/questions/54519758/img/argentina-flag-round-icon-16.png“alt=”“/>;阿根廷</标签>;
</部门>;
<;div class=“option”>;
<;输入type=“radio”name=“flag”value=“Brazil”id=“flag Brazil”/>;
<;“巴西国旗”标签>&书信电报;img src=”https://stackoverflow.com/questions/54519758/img/brazil-flag-round-icon-16.png“alt=”“/>;巴西</标签>;
</部门>;
<;div class=“option”>;
<;输入type=“radio”name=“flag”value=“Chile”id=“flag Chile”/>;
<;“智利国旗”标签>&书信电报;img src=”https://stackoverflow.com/questions/54519758/img/chile-flag-round-icon-16.png“alt=”“/>;智利</标签>;
</部门>;
</部门>;
</部门>;
</车身>;
</html>;
.css文件(flagdemo.css)的内容与Alvaro Montoro在本文中提供的内容相同,因此请回答如何在选择列表中添加图像的问题
由于此方法仅使用标准HTML和CCS(无Javascript或JQuery),因此它应在任何平台上工作: