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

Question

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)

The following related questions have all been consulted:

Issue on FA GitHub Repo - Can't use the X:before { content: '' } in the project. some of the components being used are using before content already
Using a <meta> tag to fix it - Tried it, no results.
Issues others were having with the CSS file pointing to the wrong place - The issue here is that the icons actually render, it is just the issue with the elipses

Here is a working example: https://jsfiddle.net/ywkg5yLx/ works great in IE11. What exactly is the problem? — Dekel, Aug 09 '17 at 22:16
@VidiyaPrasanth [Here is a plunk that replicates the issue on my end](https://plnkr.co/edit/OnxGkdYKXSSv0wUOBckx?p=preview), Using angular 1.x and bootstrap in the project — GAUNSD, Aug 10 '17 at 13:11

score 1 · Accepted Answer · answered Aug 10 '17 at 17:30

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>

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

1 Answers1