GAUNSD GAUNSD - 26 days ago 7
Less Question

Internet Explorer 11+ Not Rendering Text-Overflow: Elipses Properly With Font Awesome

I'm currently having an issue with rendering text-overflow: elipses on IE: 11+. The project is using Font Awesome 4.7.
Rendering of the elipses works perfect in Chrome/Firefox, but IE is the one with the issue.

The interesting thing is, if I inspect the element in the image below, it seems that the

font-family
value is what appears to fix it for that element

The
<div>
in the image inherits:

font-family: "FontAwesome", Verdana, sans-serif


If I change it to:

font-family: Verdana, sans-serif


it fixes it, but at the expense of losing the icons (which is obviously not wanted)

enter image description here

The following related questions have all been consulted:


Answer Source

Found the issue. It seems I was using Font Awesome Incorrecly. In my CSS I was setting

body {
  font-family: "FontAweomse", Verdana, sans-serif;
}

Removing "FontAwesome" and then using the correct syntax of including the fa in the class name like this:

<span class="fa icon-delete"></span>

corrects the issue.Before this all uses of font awesome we're like

<span class="icon-delete"></span>