标志Emojis未呈现

我的标题上有一个下拉菜单,我用它来显示不同国家的电话号码,我需要在它的旁边放一个旗子,但没有显示旗子,只有旗子的字母表示(例如阿根廷旗子看起来像这样🇦🇷 但它显示了字母A和字母R)的表情符号,因为就我所知,标志表情符号是如何工作的,我如何才能避免这种情况(在第二个电话号码中显示一个汉堡包,只是为了表明表情符号确实在我的网站上工作)

<选择name=“Telefonos”id=“group”>
<选项值=“+543515296002”&gt&amp#x1F1E6&amp#x1F1F7+54351529600
<选项值=“+12398105440”>🍔 +12398105440
<选项值=“+12398105440”>🇺🇸 +12398105440
&lt/选择&gt

这就是我尝试过的,无论是使用代码还是复制表情符号都不起作用,即使我在编码时它确实显示出来了

这就是实际渲染的内容

根据平台(而不仅仅是浏览器和/或浏览器字体),无论您做什么,标志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>
<头>
<标题>旗帜演示&lt/标题>
<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“>
&lt/头>
<车身>
<h1>旗帜演示&lt/h1>
<div class=“选择sim”id=“选择颜色”>
<div class=“选项”>
<div class=“option”>
<输入type=“radio”name=“flag”value=“”id=“flag-”已选中/>
<=“flag-”的标签&gt&amp#x2690;选择一个国家&lt/标签>
&lt/部门>
<div class=“option”>
<输入type=“radio”name=“flag”value=“阿根廷”id=“flag阿根廷”/>
<=“阿根廷国旗”标签&gt&书信电报;img src=”https://stackoverflow.com/questions/54519758/img/argentina-flag-round-icon-16.png“alt=”“/>阿根廷&lt/标签>
&lt/部门>
<div class=“option”>
<输入type=“radio”name=“flag”value=“Brazil”id=“flag Brazil”/>
<“巴西国旗”标签&gt&书信电报;img src=”https://stackoverflow.com/questions/54519758/img/brazil-flag-round-icon-16.png“alt=”“/>巴西&lt/标签>
&lt/部门>
<div class=“option”>
<输入type=“radio”name=“flag”value=“Chile”id=“flag Chile”/>
<“智利国旗”标签&gt&书信电报;img src=”https://stackoverflow.com/questions/54519758/img/chile-flag-round-icon-16.png“alt=”“/>智利&lt/标签>
&lt/部门>
&lt/部门>
&lt/部门>
&lt/车身>
&lt/html>

.css文件(flagdemo.css)的内容与Alvaro Montoro在本文中提供的内容相同,因此请回答如何在选择列表中添加图像的问题

由于此方法仅使用标准HTML和CCS(无Javascript或JQuery),因此它应在任何平台上工作:

发表评论