Question

我正在创建一个简单的网站。在联系信息部分，我正在为电话添加此html条目☎（在电话号码前面），并为电子邮件地址添加此html条目✉（在电子邮件地址之前）。我的想法是将这两个字符显示为纯黑色字符（如果我选择更改CSS中的字体颜色，则显示任何颜色）。

无论如何，我最终得到的是这两个代码所代表的表情符号字符。我不想要这个。我不希望显示表情符号表示。我想看到html表示，如以下两个链接所示：

http://www.fileformat.info/info/unicode/char/260e/index.htm

http://www.fileformat.info/info/unicode/char/2709/index.htm

（在上面的两个链接中，注意页面顶部的'手机'和'envolope'，这就是我想要的。）

我使用的字体是'Lucida Console'，它是在WordPress中开发主题的一部分。

我该怎么做？

更新

这似乎是WordPress的一个问题。我的HTML是WordPress主题的一部分。当我尝试使用独立网页的解决方案时，它可以工作。但是，当我在一个主题文件集中尝试时，只显示表情符号。

所以问题现在变成了，我如何确保它在WordPress中正常工作？

更新2

建议此问题与Inconsistent Unicode Emoji Glyphs/Symbols

重复

这不是一个重复的问题。仅仅因为他们都处理表情符号，并不会使它们都重复。我的问题涉及使用WordPress主题时在网页中显示的表情符号，另一个问题涉及移动设备中不一致的表情符号字符。

Answer 1

您应该包含一个支持您要使用的字符的webfont。

要在CSS中包含图标字体，请使用以下代码：

<span class="icon">&#9742;</span>
<span class="icon">&#9993;</span>

然后，您可以包含以下符号：

//Mobile First Responsive View full width Stacked Buttons
.button-holder .btn{margin-right:0;width:100%;display:block;} 

@media screen and (min-width: 480px){
  //Tablet/Desktop View left aligned buttons
  .button-holder .btn{width:auto;margin-right:20px;display:inline-block;}   
}

如果您不了解支持角色的网页，您可以使用Icomoon App轻松创建一个。另请参阅我的开源Emoji icon font，了解我使用Icomoon App创建的支持表情符号字符的Icon字体示例。

更多信息：

Create webfont with Unicode Supplementary Multilingual Plane symbols

Answer 2

如果我没错，这就是你想要的

＆＃13;

#phone{
    font-family:Lucida Console;
    font-size:32px;
    color:red;
}
#email{
    font-family:Lucida Console;
    color:#e3e3e3;
    font-size:30px;
    
}

＆＃13;

<div id="phone">PHONE &#9742;</div>
<div id="email">EMAIL &#9993;</div>

＆＃13;

Answer 3

要强制字体渲染器使用非表情符号版本，您可以尝试使用变体选择器。

<div>PHONE EMOJI &#9742;&#65039;</div>
<div>EMAIL EMOJI &#9993;&#65039;</div>

<div>PHONE TEXT &#9742;&#65038;</div>
<div>EMAIL TEXT &#9993;&#65038;</div>

查看更多：http://unicode.org/Public/8.0.0/ucd/StandardizedVariants.html

带有WordPress的表情符号和浏览器

更新

更新2

3 个答案: