Troubles with bootstrap glyphicons on the ipad

Question

I am trying to display a datetimepicker with the calendar glyphicon. This is the 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>

When viewing this on an iPad in Safari, the calendar icon shows up as an emoji monkey. I am baffled because I can change the icon to a different glyphicon (tried it with the star) and it shows up fine. Also this works fine on the iPad by itself:

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

I am not sure how that is at all different than what I have - it's the same markup. Very confused.

Any ideas?

Answer 1

Had the same problem. I downloaded the latest bootstrap version and replaced the "glyphicons-halflings-regular.*" files. It solved my "monkey emoji" problem.