Demo - Glyphs

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div class="container">

  <h1>
    Glyphs Patch for Wijmo Build 5.20173.403</h1>
  <p>
    Build 403 introduced a breaking change for 4 glyphs (calendar, clock, minus and plus). In Mac/Safari they don't display properly.</p>
  <p>
    Reference the CSS in this fiddle to apply a temporary patch until the next release. The CSS in this fiddle overrides the glyphs in the wijmo.css file. </p>
  <p>
    Make sure this CSS is added AFTER the wijmo.css file in your page.</p>

  
  <p>
    The table below shows the broken glyphs:</p>

  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Name</th>
        <th>Glyph</th>
        <th>Markup</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

</div>

CSS

.wj-glyph-calendar {
    top: .2em;
    width: 1em;
    height: 1em;
    border: .1em solid;
    border-top: .3em solid;
  }
  
  .wj-glyph-calendar:after {
    position: absolute;
    font-size: 50%;
    left: .5em;
    content: '1';
  }
  
  .wj-glyph-clock {
    width: 1em;
    height: 1em;
    border: .13em solid;
    border-radius: 50%;
  }
  
  .wj-glyph-clock:after {
    position: absolute;
    border-left: .1em solid;
    border-bottom: .1em solid;
    width: .3em;
    height: .4em;
    top: .05em;
    left: .32em;
    content: "";
    font-weight: inherit;
  }
  
  .wj-glyph-plus,
  .wj-glyph-minus {
    border-top: .25em solid;
    width: .9em;
    top: -.2em;
  }
  
  .wj-glyph-plus:after {
    position: absolute;
    box-sizing: border-box;
    border-left: .25em solid;
    width: .25em;
    height: .85em;
    left: .32em;
    top: -.55em;
    content: "";
    font-weight: inherit;
  }
  
  .wj-glyph-minus:after {
    content: "";
    font-weight: inherit
  }

JavaScript

onload = function() {

  var glyphs = 'calendar,clock,minus,plus';

  var rowTemplate = '<tr>' +
    '<td>{glyph}</td>' +
    '<td style="font-size:125%;"><span class="wj-glyph-{glyph}"></span></td>' +
    '<td><code>&lt;span class="wj-glyph-{glyph}"&gt;&lt;/span&gt;</code></td>' +
    '</tr>';

  var tbody = '';
  glyphs.split(',').forEach(function(item, index) {
    tbody += rowTemplate.replace(/\{glyph\}/g, item);
  });
  document.querySelector('tbody').innerHTML = tbody;

}