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