title: Bootstrap glyphicon not rendering properly in safari
body: <p>I am using bootstrap glyphicon for username and password. It is rendered properly on all browsers except on safari. I have attached the snapshot below. I am not able to figure out what is the issue. I have tried making the font size small<code>(style="font-size:x-small")</code> and using the <code>&lt;small&gt;&lt;/small&gt;</code> tag, but I am still not getting the result. 
  Here is the code:</p>
  
  <pre><code>&lt;div class="input-group input-group-lg"&gt;
  
  &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user red"&gt;&lt;/i&gt;&lt;/span&gt;
  @Html.TextBoxFor(m =&gt; m.UserName, new { @class = "form-control", @placeholder = "Email", @autofocus = "autofocus" })
  @Html.ValidationMessageFor(m =&gt; m.UserName)
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/emOWi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/emOWi.png" alt="login via safari"></a></p>