iPad上使用Bootstrap字体图标出现问题

Question

我正在尝试使用日历glyphicon显示日期时间选择器。以下是HTML代码：

  <div class='input-group date' id='fuel-start-datetimepicker'>
          <input type='text' class="form-control" id="fuel-start-input" />
          <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
          </span>
   </div>

当在Safari的iPad上查看时，日历图标会显示为一个表情猴子。我感到困惑，因为我可以将图标更改为不同的glyphicon（尝试过星号），它会正常显示。此外，在iPad上单独使用也没有问题：

  <span class="glyphicon glyphicon-calendar"></span>

我不确定这与我拥有的内容有什么区别 - 这是相同的标记。非常困惑。

你有任何想法吗？

- eddie_cat

---

你说的“这在iPad上单独使用很好用”是什么意思？可能HTML字符：e109被Emoji键盘用作猴子表情并被覆盖了。尝试使用不同的glyphicons。前往getbootstrap页面，查看iPad上的字形图标是否正常或也被覆盖了。 - Anthony Broadbent

我的意思是，我将它放在一个js fiddle中，只有那个带有span的一行代码，在iPad上日历按预期显示。 - eddie_cat

尝试使用这个技巧：https://litmus.com/community/code/758-stop-ios-converting-html-entity-unicode-to-emoji，但你需要使用`\e109`字符而不是示例中的字符。 - Anthony Broadbent

你并不孤单。我在搜索按钮中使用放大镜图标，但它显示为“亲吻”表情符号.. 正在尝试找出发生了什么.. - hktang

我在iPad本地应用程序上也有这个问题。在浏览器中，我看到“+”。 - jedi

Answer 1

我曾经遇到过同样的问题。我下载了最新版本的bootstrap并替换了“glyphicons-halflings-regular.*”文件，这解决了我的“猴子表情符号”问题。

- Ricardo Tominaga

---

你下载的哪个版本的文件解决了你的问题？ - Kevin Quiring

Answer 2

在glyphicons.css中

@font-face { font-family: 'Glyphicons Halflings';

src: url('./assets/glyphicons-halflings-regular.eot'); src: url('./assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('./assets/glyphicons-halflings-regular.woff2') format('woff2'), url('./assets/glyphicons-halflings-regular.woff') format('woff'), url('./assets/glyphicons-halflings-regular.ttf') format('truetype'), url('./assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }

更改为./assets/ => 这对我有用

- Pieter

Answer 3

今天我的联合创始人向开发团队的其他成员报告，她在我们的生产Web应用程序上看到了一个猴子表情符号。当时已经很晚了，我们都因为推送iOS应用程序更新而感到非常疲惫（更不用说几周内没有人接触过Web应用程序代码），所以我们都非常倾向于相信她完全失去了理智。

尽管如此，我们花了40分钟的时间试图在她和我们的iPhone上重现它。我们在私人浏览模式下打开页面，打开/关闭WiFi，在我们的页面之前访问了她之前访问过的页面，以防止标签页之间泄漏某种记忆。但是什么也没有发现。显然，这一切都是无稽之谈。

但是这件事一直在困扰着我。所以我决定尝试最后一件事。作为我们iOS应用程序更新的一部分，我们一直在使用Network Link Conditioner在非常差的网络条件下使用我们的应用程序。她的手机是我们使用过的测试设备之一，所以我检查了她的设置，并发现有人忘记关闭它。我决定尝试将速度从3G降至Edge。我重新加载了页面，然后它就出现了。

在我们的glyphicon-calendar曾经存在的地方。

正盯着我。

- monstermac77