Font-awesome: An emoticon looks different on my computer than on the actual webpage

Question

I am trying to add on my webpage the ResearchGate emoticon from academicons which is an extension to font-awesome. Here is what the emoticon should look like: enter image description here

It works fine when I open my index.html on my computer (user/name/path/to/index.html) but it doesn't work when I open my webpage (www.blabla.bla.bl). Of course, I made really sure to copy (scp) 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 enter image description here and Firefox displays . Note that other font-awesome icons work fine.

Here is the code in index.html

<li>
  <a href="https://www.researchgate.net/profile/MyName">
     <i class="ai ai-researchgate"></i>
  </a>
</li>

This piece of code is wrapped in ul and in a div of class social-icons

and here is my style.css

.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;
}

I don't quite understand how font-awesome and academicons work but here is the code in academicons.css

.ai-researchgate:before {
    content: "\e602";
}

Do you have any idea of what might be causing this behaviour?

Edit

    <link rel="stylesheet" href="css/academicons.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">  
    <link rel="stylesheet" href="css/perfect-scrollbar-0.4.5.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/style.css">
    <link id="theme-style" rel="stylesheet" href="css/styles/default.css">

The links to the font files are on the .css files.

On the font-awesome.css

@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=3.2.1');src:url('font/fontawesome-webfont.eot?#iefix&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;}

on the academicons.css

@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;
}

Let me know if adding a link to my webpage would help. I didn't want to make an unnecessary commercial. Thank you — Remi.b, May 17 '15 at 18:01
If it works locally but not online then you've either forgotten to upload the font file(s) or your web server needs to be configured with the relevant mime type(s). — Shaggy, May 17 '15 at 18:12
I uploaded my font (font-awesome) and my `fonts` (academicons) again and it still doesn't work. I don't know what `your web server needs to be configured with the relevant mime type(s)` means. Can I check that by myself? Can I make this configuration myself (probably not)? FYI, I am hosted by my university website (University of British Columbia). — Remi.b, May 17 '15 at 18:25
IIS is Internet Information Services, and runs on Windows. Apache can run on just about any OS, and is the most likely instance if your school uses any UNIX/Linux OS for the web server. — Tieson T., May 17 '15 at 18:40
Can you include the ... section of your code? It helps to see where you've put the font-awesome files, etc. — Jason, May 17 '15 at 19:56
Yes, other font-awesome icon work. (I added this info in my post). Thnks — Remi.b, May 17 '15 at 21:50
Where are the font files in relation to the font stylesheet, and what path is the font's stylesheet using to reference the font files? — Tieson T., May 17 '15 at 22:38
@TiesonT. See edit. Thanks. Does it answer your question? Note, you can have a look directly on the website [here](http://www.zoology.ubc.ca/~matthey/). — Remi.b, May 17 '15 at 22:44
If you look at the developer console in your browser, you'll see that the .woff files are returning a HTTP 403 error, which means that it's either a permissions issue, or that the server is not configured properly (i.e. it's missing the directives I mentioned in my answer). — Tieson T., May 17 '15 at 23:42
I am not familiar with those concepts. I clicked on `show developper tools` (safari). I see that I indeed have two `.woff` `font-awesome.woff` and `academicons.woff` in the directories `font` and `fonts` respectively. I tried to vizualize this file directly with the web browser, all I get is the display of the list of my files and I can download them if I click on them. I can't get much information out of the developer tools. I just see some HTML code stuff. I don't see any HTTP 403 but I might not look at the right place. Btw, looking at this window, I am now sure the server is on Apache. — Remi.b, May 18 '15 at 04:02

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

The most likely scenario is that your web server is not configured to serve the MIME types used by most modern web fonts. As such, and since you likely cannot reconfigure the server itself, you'll need to add some server directives per project.

For IIS, use the directives from this answer in your web.config:

<staticContent>
   <remove fileExtension=".woff" />
   <remove fileExtension=".eot" />
   <remove fileExtension=".ttf" />
   <remove fileExtension=".svg" />
   <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
   <mimeMap fileExtension=".ttf" mimeType="application/font-sfnt" />
   <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
   <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>

The staticContent section will be found within (or need to be added to) the system.web section.

For Apache, add these directives to your .htaccess file:

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

edited May 23 '17 at 12:23

Community

1
1

answered May 17 '15 at 18:38

Tieson T.

20,774
6
77
92

So, if we assume the server is using Apache, I would just need to copy-paste your code put it in a file called `whatever.htaccess` and put this file next to the `index.html`? – Remi.b May 17 '15 at 19:53
No, .htaccess **is** the file name: http://en.wikipedia.org/wiki/.htaccess, and the file is normally at the root of the site (although you can use per-directory .htaccess files for things like directory permissions). – Tieson T. May 17 '15 at 19:55
@Remi.b if you don't already have one, create a .htaccess file with the above MIME directives and then drop it into the site root. It should work after that. – Tieson T. May 17 '15 at 23:47
I added a .htaccess (I didn't have one before) in my root directory (next to index.html) and copy-pasted all the `AddType` but it didn't solve the issue. Afterward, I also added the `` thing to my `.html` but it didn't solve the issue either. Thnks – Remi.b May 18 '15 at 03:46
The staticContent section isn't relevant to you, as your school seem to be using Apache. That section is for a web.config file for IIS web servers. Since the .htaccess settings didn't seem to help, the only other suggestion I can make it to check the file permissions on the font files that aren't working. – Tieson T. May 18 '15 at 03:57
Yes it is indeed on Apache and the staticContent is indeed irrelevant. I now realize that when I go one `www.mywebsite.ca/css` with my webbrowser, the `fonts` (the one for academicons) is missing. The directory is present though as I see it through bash. When I try to go on `www.mywebsite.ca/css/fonts` I get the message: `You don't have permission to access /~matthey/css/fonts on this server.` – Remi.b May 18 '15 at 04:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78066/discussion-between-tieson-t-and-remi-b). – Tieson T. May 18 '15 at 08:01

Font-awesome: An emoticon looks different on my computer than on the actual webpage

1 Answers1

Linked