Шрифт awesome не работает в Firefox

Я использую bootstrap, и я добавил шрифт awesome через Less, переопределяя Glyphicons. Значки отображают OK в chrome, но в Firefox я просто вижу коробки.

Вот как выглядит мой каталог

-- Project
  -- js
  -- css
  -- less
  -- font-awesome
    -- css
    -- font
    -- less

Все, что я изменил в файле Project > less > boostrap.less, было:

@import "sprites.less";

//for this line

@import "../font-awesome/less/font-awesome.less";

Как я уже говорил, Chrome работает нормально, но по какой-то причине Firefox показывает только те коробки.

Ответ 1

Пользовательские веб-шрифты через CDN (или любой запрос междоменного шрифта) не работают в Firefox или Internet Explorer (правильно, по спецификации), хотя они работают (неправильно) в браузерах на основе Webkit.

Вы можете исправить это, добавив заголовки на свою страницу.

Apache

    <FilesMatch ".(eot|ttf|otf|woff)">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>

Nginx

    if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
        add_header Access-Control-Allow-Origin *;
    }

Кредит: http://davidwalsh.name/cdn-fonts

Ответ 2

Если вам нужен быстрый и простой способ сделать Font-awesome work, попробуйте использовать CDNJS. Он бесплатный и работает от CloudFlare. CORS поддерживается из коробки.

Попробуйте что-то вроде этого:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

Ответ 3

Если вы размещаете шрифт на S3, вы должны включить CORS в ведро. Через AWS Management Console отредактируйте свойства для ведра и в разделе "Разрешения" нажмите "Добавить конфигурацию CORS". В моем случае, если я оставил конфигурацию по умолчанию, он все равно не работал, поэтому я изменил его на:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

Ответ 4

У меня возникла проблема с оператором if, потому что у меня не было переменной $filename.

Но у меня были аналогичные результаты, используя:

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }

Ответ 5

Использование CDN в качестве premjg, предложенного, является наименее инвазивным методом, помимо того, что вы принимаете его самостоятельно. Последняя версия fontawesome предлагает bootstrapcdn, например,

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

В качестве второстепенного примечания noscript молча блокирует запросы к CDN, если не включен белый список, и он не будет запрашивать вам белый список CDN, если ваша страница также не запрашивает JS файлы из того же домена.

Ответ 6

Если вы похожи на меня, изменение файла web.config - это то, что вам не разрешено касаться.

Попробуйте сохранить все файлы шрифтов (.eot,.ttf и т.д.) в своей локальной папке и привязать их к ним локально, а не к CDN FontAwesome. Сбрасывал его в IE и FF для меня каждый раз.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }

Ответ 7

Я поставил код в .htacces

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Теперь он работает нормально. Благодарю. Цените свою помощь

Ответ 8

Если вы используете wordpress, и, по-вашему, вы все пробовали, посмотрите и посмотрите, если вы когда-либо устанавливали плагин Font Awesome. Отключите плагин и обновите его в Firefox.

Это было для меня решением - более старая версия font-awesome плагина перекрывала файлы, которые я пытался обновить вручную.

Ответ 9

В папке шрифтов загрузите следующие файлы

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Важные файлы глификонов ----------------
glyphicons-полурослики-regular.eot
glyphicons-полурослики-regular.svg
glyphicons-полурослики-regular.ttf
glyphicons-полурослики-regular.woff

Загрузите следующие файлы, и после этого вы связали свой шрифт-awesome.min.css в своем файле заголовка.

Вот ссылка с соответствующими файлами: http://goo.gl/WICQAf