Font-awesome: An Emoticon Looks Different On My Computer Than On The Actual Webpage

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: It works fine when

Solution 1:

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><removefileExtension=".woff" /><removefileExtension=".eot" /><removefileExtension=".ttf" /><removefileExtension=".svg" /><mimeMapfileExtension=".eot"mimeType="application/vnd.ms-fontobject" /><mimeMapfileExtension=".ttf"mimeType="application/font-sfnt" /><mimeMapfileExtension=".svg"mimeType="image/svg+xml" /><mimeMapfileExtension=".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