Почему мои значки появляются в виде пустых квадратов?

Я создал новый (простой) сайт в IIS8. Я создал простой Index.html и поставил jQuery, Bootstrap3 и Font-Awesome 4.0.0, чтобы начать играть.Почему мои значки появляются в виде пустых квадратов?

Однако мой шрифт-Высокий иконки отображаются как ничего (квадраты):

Demo image

Моя структура папок

/ 
    - Index.html 
    - bootstrap.css 
    - bootstrap.js 
    - jquery-2.0.3.js 
    /css 
    - font-awesome.css 
    /fonts 
    - FontAwesome.otf 
    - fontawesome-webfont.eot 
    - fontawesome-webfont.svg 
    - fontawesome-webfont.ttf 
    - fontawesome-webfont.woff

Мой HTML код:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Simple Site</title> 

    <link rel="stylesheet" type="text/css" href="bootstrap.css" /> 
    <link rel="stylesheet" type="text/css" href="slate.css" /> 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css" /> 
</head> 

<body> 
    <div class="container"> 
     <h1>This is a test</h1> 
     <h1>User Icon: <span class="fa-user"></span></h1> 
    </div> 

    <script type="text/javascript" src="jquery-2.0.3.js"></script> 
    <script type="text/javascript" src="bootstrap.js"></script> 
</body> 

</html>

Font-Удивительный @ шрифта лицо:

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?v=4.0.0'); 
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

Chrome показывает, что ни один .woff файл (или что-нибудь) не даже скачал (не 404 либо)

Chrome network

Я пробовал

IE 11, Firefox, Chrome
Собираем сайт на реальном сервере
Изменение MIME тип .woff для
- font/x-woff
- application/x-font-woff
- application/font-woff
- font/woff
Полные разрешения на чтение App Бассейн
Изменение URL() от @ шрифта лицо от ../fonts/ к fonts/
Удаление всех других ненужных CSS и JS файлы
Полное обновление страниц, очистка кэша

источник

2013-10-26 Rowan Freeman

Я проводил часы на этом (слишком многие признают).

Проблема этот код:

<span class="fa-user"></span>

Отсутствующие другой fa в классе. Это должно быть:

<span class="fa fa-user"></span>

источник

2013-10-26 16:46:58

Я применил этот способ, но все еще есть проблема. :/ – tolga

еще не работает! –

вам нужно импортировать это, а также '@import url (« https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css »);' –

Просто у меня была проблема с пустым квадратом, но это не проблема с моей разметкой. Я использую wordpress с плагином социальных комментариев, который использовал тот же идентификатор, что и мои иконки fa, и плагин css перезаписывал семейство шрифтов. Итак, если ваш класс правильный, убедитесь, что ни один другой класс не имеет права на использование вашего семейства шрифтов.

источник

2014-02-12 23:34:26 Mike

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

импортировать это на свой шрифт удивительный CSS.

источник

2014-11-18 22:27:40

Почему мои значки появляются в виде пустых квадратов?

ответ

Смежные вопросы