FontAwesome не отображается в Firefox

Связанный с этим вопрос здесь.

Ответ Бориса на вышеупомянутый вопрос, похоже, имеет смысл, но я установил файлы Font Awesome на свой сервер, и проблема остается:

Я заглянул в библиотеку и обнаружил, что файлы шрифтов включены в установку, поэтому аргумент о межсерверном доступе к шрифтам кажется недействительным. Я не возражаю против использования BootstrapCDN, но, похоже, предложение Бориса применимо, и я не знаю, как отправить правильные заголовки CORS. (Я попробовал, но он тоже не работает.) Подумайте, как я могу это исправить, используя "Bootstrap CDN" или "CSS по умолчанию"? (см. также эти инструкции.)

PS: IE10 показывает глиф правильно.

Ответы

Ответ 1

Вы пробовали Bootstrap CDN?

Просто включите <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> в раздел <head>. Файлы шрифтов будут автоматически загружаться из CDN.

Проверено это на Firefox и работает отлично.

@Boris говорит:

Firefox разрешает междоменное связывание шрифтов, если сервер, на котором установлен шрифт, отправляет правильные заголовки CORS.

Итак, ясно, что CDNs duty установить правильные заголовки, не ваши. И они, похоже, делают это правильно, потому что Firefox не жалуется.

Если вы размещаете шрифты на своем собственном сервере, имейте в виду, что правило междоменного домена может все еще применяться, например. файлы шрифтов в разделе domain.com могут быть недоступны из www.domain.com, если www.domain.com не отправляет правильные заголовки.

Прочитайте этот ответ, чтобы узнать, как обходить ограничения между поддоменами - это может помочь в вашем случае.

Ответ 2

Если вы являетесь владельцем собственного сервера, вы можете добавить заголовок http, чтобы справиться с этой проблемой. Проблема, основанная на междоменных политиках.

foo.com/font-awesome.woff

boo.com/index.htm

в этом случае вы должны добавить этот заголовок в foo.com

Access-Control-Allow-Origin = "http://boo.com"

или

Access-Control-Allow-Origin = "*"

который сделает ваш файл шрифта доступным с других сайтов или определенного сайта.

Ответ 3

У меня такая же проблема, мы используем шрифты на плате маршрутизатора с помощью micro httpd. я добавил заголовок Access-Control-Allow-Origin: *, но не работал у меня.

Я нашел в firebug, что файл woff не сохраняет ничего в тексте ответа. то же самое, если я использую URL-адрес CDN, все работает нормально. поэтому локальному серверу micro-httpd нужен какой-то обязательный заголовок для настройки. скажите, пожалуйста, также точные типы mime для всех шрифтов.

.ttf "," application/x-font-ttf "
.eot "," application/vnd.ms-fontobject "
.woff "," application/font-woff "
.svg "," image/svg + xml "

Ответ 4

чтобы заставить fontovesome css работать локально, включить файлы в папку Fonts в тот же каталог .html файлов (страниц).

например: структура файла на данный момент, когда fontawesome не работает

    prototype\pages\.html files
    prototype\styles\font-awesome\css\font-awesome.min.css
    prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

Проблема здесь в том, что для страницы, загруженной из файла://URI, только файлы в (или ниже) одного и того же каталога файловой системы считаются "одинаковыми", поэтому помещаем шрифт в другое поддерево (../font/) означает, что оно будет заблокировано ограничениями политики безопасности. Поскольку Firefox отключает междоменные шрифты "по умолчанию". Вместо этого измените структуру файла, как показано ниже:

      prototype\pages\.html files
      prototype\styles\font-awesome\css\font-awesome.min.css
     prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

поместите папку шрифтов в каталог с папками, которая исправляет проблему. Надеюсь, что это поможет.

Ответ 5

Убедитесь, что ваши пути верны. Используйте класс fa и класс значков, например:

fa fa-envelope

и будет отлично работать.

Привет.