2013-08-22 2 views
5

Я пытаюсь использовать шрифт Awesome, но вместо любых значков он просто отображает любые азиатские знаки. Для этого я загрузил шрифт awsome на веб-сервер. Я пробовал это в трех разных браузерах (firefox, opera и chromium), но это всегда одно и то же.Font awesome показывает азиатские знаки вместо значков

тестовую страницу можно увидеть здесь: http://2weitweitweg.de/test.html

А вот скриншот из него: http://postimg.org/image/9yh5p0p97/

ли показывать знаки в вашем браузере? Является ли проблема браузером или сервером? Как я могу это исправить?

свиданье

ответ

2

же, как и меня тоже, шрифты удивительных работает на моих браузерах PC [все они], но я позже тестируемого шрифт удивительного на мобильном Java оперу браузере [последнюю оперу браузер для мобильных Java телефонов (c2-03, если быть точным)] Я вижу только азиатские знаки/символы/символы, иногда я вижу коробки, а не шрифты удивительные символы. Надеюсь, это будет разрешено?

4

Скорее всего, файлы шрифтов не найдены. Если вы посмотрите в шрифте удивительном файла CSS вы, вероятно, увидеть что-то вроде:.

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot'); 
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
    [...etc] 

Это ожидает найти файлы шрифтов в папку с именем шрифта на том же уровне, что файл CSS находится в Например:

myproject/css 
       /font-awesome.css 
        [...etc] 
     /font 
       /fontawesome-webfont.eot 
        [...etc] 

Если файлы находятся в правильном месте, то возможно, что они не загружается из-за какими-то проблем с разрешениями или даже, что вы используете странный браузер, который должным образом не поддерживает @ шрифт лица. Конечно, вы можете исключить его, просмотрев файл font awesome examples page, чтобы узнать, правильно ли он отображает значки.

+0

если HTML-файл, который должен показать, что текст отсутствует в myproject, но в любой другой папке ... Должен ли путь к файлам шрифтов относиться к пути файла css как к «root» или к файлу html, который включает в себя файл css t он корень? – Jonas

8

У меня была эта проблема, и это было потому, что я использовал старый html с новой версией fontawesome.

Я установил ее, изменив:

<i class="fa-bitbucket"></i> 

к:

<i class="fa fa-bitbucket"></i> 

Т.е. Я просто должен был добавить класс fa к элементу.

В последней версии используется префикс fa, но для вас, скорее всего, это будет icon.

Надеется, что это помогает кто-то на каком-то этапе :-)

+0

помог мне, спасибо :) – whizcreed

0

Если вы используете 4.0 или более поздней версии, они изменили icon классы fa классов Так что ваш код должен сказать

<i class="fa fa-camera-retro fa-large"></i> 

вместо

<i class="icon icon-camera-retro icon-large"></i> 

Вы можете найти иконку, конкретные примеры кода, посетив http://fontawesome.io/icons/ и щелчки/нажав значок, который вам нужен.

У меня была такая же проблема при обновлении с 3.2 до 4.0.3

2

Надежда Я не слишком поздно, что-то на сервере не настроен должным образом, решение, чтобы позволить * .woff и * .tff быть запрошены как статические ресурсы так же, как вы делаете с * .css и * .js, это делается по-разному в зависимости от платформы:

enter image description here

Что я сделал, чтобы заставить его работать:

Заменено ваш таблица стилей с (поскольку мы не можем g и др к ресурсам):

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"> 

И заменить старые icon- * классы, например:

<i class="fa-umbrella fa text-error"></i> 

И теперь он работает:

enter image description here