Шрифт-awesome: на моем компьютере похож смайлик, чем на фактической веб-странице

Question

Я пытаюсь добавить на свою веб-страницу смайлик ResearchGate от academicons, который является расширением шрифта-удивительным. Вот что смайлик должен выглядеть следующим образом:

Он отлично работает, когда я открываю index.html на моем компьютере (user/name/path/to/index.html), но она не работает, когда я открываю свой сайт (www.blabla.bla.bl). Конечно, я действительно убедился, что копировал (scp) всю мою директорию (включая изображения, css и т. Д.) По серверу несколько раз. Я сделал это несколько раз и теперь ждал 10 часов, но дисплей по-прежнему неверен. Дисплей зависит от того, какой веб-браузер я использую для просмотра веб-страницы. Отображение Safari и GoogleChrome и Firefox отображает . Обратите внимание, что другие значки шрифтов отлично работают.

Вот код в index.html

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

Этот фрагмент кода заворачивают в ul и в div класса social-icons

и вот мой 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; 
} 

Я не совсем понимаю, как работают шрифты - удивительные и академические, но вот код в academons.css

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

У вас есть идеи, что может быть причиной такого поведения?

Редактировать

<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"> 

Ссылки на файлы шрифтов находятся на .css файлов.

На шрифта 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;} 

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

Answer 1

Наиболее вероятным сценарием является то, что ваш веб-сервер не настроен, чтобы служить типы MIME, используемые большинством современные веб-шрифты. Таким образом, и поскольку вы, вероятно, не можете перенастроить сервер, вам нужно будет добавить некоторые директивы сервера для каждого проекта.

Для IIS, используйте директивы this answer в вашем 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> 

Раздел staticContent будет найден в течение (или должны быть добавлены) раздел system.web.

Для Apache, добавьте these directives в свой файл .htaccess:

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