title: Font-awesome: An emoticon looks different on my computer than on the actual webpage
body: <p>I am trying to add on my webpage the ResearchGate emoticon from <a href="https://github.com/jpswalsh/academicons" rel="nofollow noreferrer">academicons</a> which is an extension to font-awesome. Here is what the emoticon should look like:  <img src="https://i.stack.imgur.com/qWQH1.png" alt="enter image description here"></p>
  
  <p>It works fine when I open my <code>index.html</code> on my computer (<code>user/name/path/to/index.html</code>) but it doesn't work when I open my webpage (<code>www.blabla.bla.bl</code>). Of course, I made really sure to copy (<code>scp</code>) my whole directory (including, images, css, etc..) over the server several times. I made it several times and have now waited 10 hours but the display is still incorrect. The display depends of what web browser I use to watch the webpage. Safari and GoogleChrome display <img src="https://i.stack.imgur.com/vqbgy.png" alt="enter image description here"> and Firefox displays <img src="https://i.stack.imgur.com/28wIq.png" alt="enter image description here">. Note that other font-awesome icons work fine.</p>
  
  <p>Here is the code in index.html</p>
  
  <pre><code>&lt;li&gt;
    &lt;a href="https://www.researchgate.net/profile/MyName"&gt;
       &lt;i class="ai ai-researchgate"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>This piece of code is wrapped in <code>ul</code> and in a <code>div</code> of class <code>social-icons</code></p>
  
  <p>and here is my <code>style.css</code></p>
  
  <pre><code>.social-icons {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      /*background: #202020;
      border-top: 1px solid #1A1A1A;*/
      background: #2b2b2b;
      width: 250px;
      z-index: 2;
      height: 45px;
  }
  
  .social-icons ul {
      padding: 0;
      margin: 0;
      list-style: none;
  }
  
  .social-icons li {
      float: left;
      width: 33%;
      padding: 10px;
      text-align: center;
  }
  </code></pre>
  
  <p>I don't quite understand how font-awesome and academicons work but here is the code in academicons.css</p>
  
  <pre><code>.ai-researchgate:before {
      content: "\e602";
  }
  </code></pre>
  
  <p>Do you have any idea of what might be causing this behaviour?</p>
  
  <p><strong>Edit</strong></p>
  
  <pre><code>    &lt;link rel="stylesheet" href="css/academicons.css"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="css/font-awesome.min.css"&gt;  
      &lt;link rel="stylesheet" href="css/perfect-scrollbar-0.4.5.min.css"&gt;
      &lt;link rel="stylesheet" href="css/magnific-popup.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link id="theme-style" rel="stylesheet" href="css/styles/default.css"&gt;
  </code></pre>
  
  <p>The links to the font files are on the .css files.</p>
  
  <p>On the font-awesome.css</p>
  
  <pre><code>@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=3.2.1');src:url('font/fontawesome-webfont.eot?#iefix&amp;v=3.2.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
  </code></pre>
  
  <p>on the academicons.css</p>
  
  <pre><code>@font-face {
      font-family: 'academicons';
      src:url('fonts/academicons.eot?j69par');
      src:url('fonts/academicons.eot?#iefixj69par') format('embedded-opentype'),
          url('fonts/academicons.woff?j69par') format('woff'),
          url('fonts/academicons.ttf?j69par') format('truetype'),
          url('fonts/academicons.svg?j69par#academicons') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>