title: Font Awesome Icons not displaying in Chrome or IE but are in Firefox
body: <p>I've spent way too much time trying figure out why on earth my font awesome icons are not showing up in Chrome. This is a django project but that shouldn't matter.. The css files are loading just fine but the elements for the font awesome icons are not displaying in chrome or IE however they are in Firefox. If anyone has any idea what I could be doing wrong... Here are my snippets. My files are in the correct locations so that isn't the issue either. </p>
  
  <pre><code>     {% load staticfiles %}
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"&gt;
          &lt;link rel="stylesheet" href="{% static 'font-awesome/css/font-awesome.css' %}"&gt;
          &lt;link rel="stylesheet" href="{% static 'css/blog.css' %}"&gt;
          &lt;link href="//fonts.googleapis.com/css?family=Lobster&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css"&gt;
          &lt;title&gt;Naomi's blog&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="page-header"&gt;
              {% if user.is_authenticated %}
                  &lt;a href="{% url 'post_new' %}" class="top-menu"&gt;&lt;span class="fa fa-plus fa-fw"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;a href="{% url 'post_draft_list' %}" class="top-menu"&gt;&lt;span class="fa fa-edit fa-fw"&gt;&lt;/span&gt;&lt;/a&gt;
              {% endif %}    
              &lt;h1&gt;&lt;a href="/"&gt;Naomi's Blog&lt;/a&gt;&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="content container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-8"&gt;
                  {% block content %}
                  {% endblock %}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;        
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Font-awesome.css bit:</p>
  
  <pre><code>@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&amp;v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  </code></pre>
  
  <p>My CSS file:</p>
  
  <pre><code>.page-header {
      background-color: #20B2AA;
      margin-top: 0;
      padding: 20px 20px 20px 40px;
  }
  
  .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
      color: #ffffff;
      font-size: 36pt;
      text-decoration: none;
  }
  
  .content {
      margin-left: 40px;
  }
  
  h1, h2, h3, h4 {
      font-family: 'Lobster', cursive;
  }
  
  .date {
      color: #828282;
  }
  
  .save {
      float: right;
  }
  
  .post-form textarea, .post-form input {
      width: 100%;
  }
  
  .top-menu, .top-menu:hover, .top-menu:visited {
      color: #ffffff;
      float: right;
      font-size: 26pt;
      margin-right: 20px;
  }
  
  .post {
      margin-bottom: 70px;
  }
  
  .post h1 a, .post h1 a:visited {
      color: #000000;
  }
  </code></pre>