Font-Awesome не показывает шрифт?

Я пытаюсь использовать F-A v4.7 для отображения некоторых значков. Я не могу использовать CDN, потому что создаю сайт в интрасети, к которому нет доступа за пределами сети. Я скопировал файлы .css в папку «Содержимое», а шрифты — в каталог в корне сайта.

Я добавил .css в пакет в своем проекте MVC. Теперь я получаю интеллект для различных значков F-A. Однако, когда я просматриваю сайт, мой образец значка не отображается.

Я посмотрел страницу с инструментами разработчика, и у меня нет никаких ошибок. Я отредактировал файл .css и заменил URL-адрес шрифтов, чтобы использовать «~» вместо «..», но это не сработало.

@font-face {
  font-family: 'FontAwesome';
  src: url('~/fonts/fontawesome-webfont.eot?v=4.7.0');

Я сделал это, потому что мой файл .css находится в папке root\Content\font-awesome.css, а шрифты находятся в папке root\fonts\. Использование тильды должно убедиться, что он использует корень, а затем каталог \fonts\.

Тем не менее, ни ошибок, ни черного квадрата там, где должна быть иконка. Просто значок не отображается. В инструментах разработчика я вижу правильный синтаксис. <i class="fa fa-print"> FA font</i>

У кого-нибудь есть предложения?


person Caverman    schedule 02.11.2016    source источник
comment
Эм, вы используете только файл .eot?   -  person Mr Lister    schedule 02.11.2016
comment
Вы следуете этому методу только потому, что используете его в интранете? Если это так, пожалуйста, ответьте.   -  person Kishore Chandra    schedule 02.11.2016
comment
Да, я не использую метод CDN из-за внутренней сети. Я не уверен, какие файлы шрифтов он использует, я просто поместил все шрифты из загрузки в папку шрифтов.   -  person Caverman    schedule 02.11.2016
comment
Вы действительно должны реализовать все типы шрифтов, а не только .eot - затем я бы проверил, сообщает ли ваша консоль о каких-либо ошибках. Если каждый шрифт загружается нормально, значок также должен появиться.   -  person funkysoul    schedule 02.11.2016


Ответы (3)


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

Вот ссылка для скачивания: http://fontawesome.io/assets/font-awesome-4.7.0.zip

нет необходимости создавать его вручную

Ваш <i class="fa fa-print"> FA font</i> будет работать нормально

person Kishore Chandra    schedule 02.11.2016
comment
Это то, что я сделал. Я скачал и разархивировал файлы. Я скопировал файл font-awesome.css в папку \Content\ и все шрифты в папку \fonts\. - person Caverman; 02.11.2016
comment
вы не должны изменять содержимое внутри папки. просто сохраните папку в своем проекте и используйте ее .. вы можете изменить имя папки с потрясающим шрифтом. Такую лучше использовать. - person Kishore Chandra; 02.11.2016
comment
просто сохраните папку в своем проекте и используйте ее - что это значит? что за папка? что такое просто использовать его, т.е. как вы его направляете? - person Derek; 12.07.2017

Лично я бы не стал использовать @font-face, просто связался бы напрямую с вашим файлом шрифта awesome в заголовке вашей страницы, прежде чем включать файл css следующим образом:

<link href="/css/font-awesome.min.css" rel="stylesheet">
person Action Coding    schedule 02.11.2016
comment
@font-face находится в файле font-awesome.css. Я создаю это в проекте MVC, и он использует пакет для одновременной загрузки всех файлов CSS. Это также помещает их в «голову», куда нужно. Итак, в конечном итоге он ставит ссылку, как у вас. - person Caverman; 02.11.2016

У меня такая же проблема.

Когда я проверил вкладку сети в Chrome, я увидел, что файл .woff2 был загружен. Некоторые веб-серверы не имеют mime-типа для .woff2, но статус http был 200, так что это не проблема.

По наитию я решил удалить часть, которая заставляет браузер загружать файл .woff2 в font-awesome.css, и... внезапно появились все значки!

Так что, видимо, что-то не так с файлом .woff2 или с браузером (у меня Google Chrome 56).

Но в качестве временного обходного пути вы можете удалить эту часть из font-awesome.css:

url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
person Sander_P    schedule 09.02.2017