1

So I have Font Awesome working in my project. Currently that's being served by Grunt in development. The problem is that when I try to run the site from the file system or from IIS, the icons aren't working. They're unrecognizable symbols. Grunt and IIS are both serving from the same folder, so things should be identical.

This is happening across Chrome and IE. I verified that there aren't any 404's (I get boxes if the files aren't found).

I'm using Font Awesome 4.3.0.

Here's as served from Grunt:

Font Awesome icons working when served from Grunt

Here's as served from the filesystem and IIS:

Font Awesome icons not working when served from the file system or IIS

Here's what the HTML looks like:

<li>
  <a href="#">
    <i class="fa fa-clock-o"></i>Operations
    <span class="fa arrow"></span>
  </a>
</li>
Luke
  • 558
  • 1
  • 5
  • 24
  • Is there any error in the console? also take a look this post http://stackoverflow.com/questions/23007250/fontawesome-does-not-work-when-served-by-iis – Stickers Mar 30 '15 at 16:48
  • Nope. Nothing. It's almost like the file is corrupted, but all the servers are sharing the same file. – Luke Mar 30 '15 at 16:51

2 Answers2

1

Finally got it!

I am using the SASS library for Font Awesome. Well in my main SASS file, I had:

@import 'variables';
@import '../../vendor/font-awesome/scss/font-awesome';
@import 'bootstrap';
@import 'layout';

What I needed do was put Bootstrap in front of Font Awesome. So it looks like this now:

@import 'variables';
@import 'bootstrap';
@import '../../vendor/font-awesome/scss/font-awesome';
@import 'layout';

Apparently Bootstrap's styles were interfering with the Font Awesome styles. I still can't figure out why it worked when it was served by Grunt and not by IIS/File System. But make note that Font Awesome should be included after any library has have their own implementation of Font Awesome.

Luke
  • 558
  • 1
  • 5
  • 24
0

So the previous SASS import ordering turned out to not fix my issue.

I finally stumbled upon this issue in the SASS repo: https://github.com/sass/sass/issues/1395.

Reading through the issue comments, it seems that when SASS does the compression it's change the Font Awesome characters from an escaped ASCII sequence to unicode. So we need to be explicit so that the browser knows how to interpret it.

In the end, what fixed this for me (hopefully for sure this time) was to add

<meta charset="utf-8" />

to my head.

Fingers crossed that this is finally fixed.

Luke
  • 558
  • 1
  • 5
  • 24