1

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.

Community
  • 1
  • 1
Zlerp
  • 467
  • 7
  • 16
  • Did you include the whole font awesome folder? You have to link to the CSS, but you must have the whole folder within. – leofontes Sep 08 '16 at 22:18
  • yes, the entire folder, including the less and scss even though im not using them – Zlerp Sep 08 '16 at 22:22
  • have you had a look through [the Font Awesome Troubleshooting pages](https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting), with special regards to the IE related bits...? – benomatis Sep 08 '16 at 22:23
  • yes, it brought me to here: [stackoverflow answer](https://stackoverflow.com/questions/27913012/font-awesome-4-2-0-not-rendering-in-ie11-with-compatibility-mode-turned-on/28490514#28490514) I have included the meta tag in the top of my `` – Zlerp Sep 08 '16 at 22:26
  • Is it an ASP.NET Application where you are using this font? – Dalorzo Sep 08 '16 at 22:30
  • @Dalorzo, no sir. – Zlerp Sep 08 '16 at 22:31
  • I looked into compatibility but that's not it.. I don't have IE installed, but if it has (like Chrome) a tab for Computed Styles, check and see who is overwriting the class, maybe go into font awesome and give it an !important just to see what happens.. – leofontes Sep 09 '16 at 02:18
  • @leofontes So Ive been testing some things. So I dont have IE either but im using [browserstack](https://www.browserstack.com) to test it. So it doesnt work with local files, but works with the CDN. I redownloaded all the files, and checked the structure nothing. I also compared the developer styles between when I was using the CDN vs local font-awesome files. No difference. Then I started changing broswers on Broswerstack. The local files dont seem to work on any of the Browserstack browser options. So it seems like its a browserstack issue. Because it works fine on my local Chrome, FF, etc.. – Zlerp Sep 09 '16 at 14:47
  • what is your Hosting Server technology? – Dalorzo Sep 09 '16 at 17:06
  • @Dalorzo currently im running a static local page. im using browserstack to test it, so i guess im tunneling it to browserstack from my machine. but i tested it on a windows computer via a sinatra and [ngrok](https://ngrok.com/) (if you havent used it its great to get a local host file out on public web) tunnel and it works fine on all browsers. it was a browserstack issue. – Zlerp Sep 09 '16 at 17:53

1 Answers1

0

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.

Zlerp
  • 467
  • 7
  • 16