Search code examples
htmlcssiconsfont-facefont-awesome

Font awesome not working on ANY iE or Edge

I am having an issue with Font awesome icons and it's iE support.

It is working perfectly fine on all other browsers.

But for some reason on iE or Edge, the icon doesn't appear, There is a space of where it would go, yet there is no icon.

I noticed a difference in the styling when looking at the Dev tools in Chrome vs iE (iE10 to Edge).

The Internet options has download fonts enabled.

I have added the meta tag to the top of my <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

I included the entire font awesome zip (even though i dont need less or scss folders)

Included Font Awesome folders

I am using Font-awesome v4.6.3 and Bootstrap v3.3.7

please see image below to see differences in developer tools:

iE-DeveloperTools:

iE-Developer Tools

Chrome-DeveloperTools:

Chrome Developer tools

Other than that, I don't see any differences between the two.

Solution

  • Seems like it may be a Browserstack issue. I was using Broswerstack to test on different browsers and it seems to be having an issue with local Font awesome files, yet works with CDN.

    I checked the path multiple times and it works on all browsers i am able to test on through my Mac. Guess im buying a PC too.

    See comments above for details.