Шрифт Awesome не работает, значки отображаются в виде квадратов

У вас должно быть 2 класса, класс fa и класс, который идентифицирует нужный значок fa-twitter, fa-search и т.д. & hellip;

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

Используйте этот

<link href="/font-awesome.min.css" rel="stylesheet">

У меня была аналогичная проблема с Amazon Cloudfront CDN, но она была решена после того, как я начал загружать ее из maxcdn

Это может помочь, проверить, чтобы вы случайно не изменили семейство шрифтов на значке. Если вы изменили семейство шрифтов .fa, то из: FontAwesome значок не будет отображаться. Это всегда что-то глупое и маленькое.

Надеюсь, что это поможет кому-то.

Если вы используете LESS или SASS, откройте файл font-awesome.less/sass и отредактируйте переменную пути @fa-font-path: "../font";, которая указывает на фактические шрифты:

@fa-font-path: "../font";

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

То же самое с CSS, за исключением того, что вы редактируете путь в блоке объявления @font-face:

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

Откройте шрифт-awesome.css theres code like:

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

у вас должна быть папка типа:

font awesome -> css
             -> fonts

или самый простой способ:

<link rel="stylesheet" href="/font-awesome.min.css">

Я попытался решить ту же проблему с несколькими предыдущими решениями, но они не работали в моей ситуации. Наконец, я добавил эти 2 строки в HEAD, и это сработало:

<link rel="stylesheet" href="/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome//font-awesome.css">   

Я использую Font Awesome 4.3.0 только ссылку из maxcdn works, как упоминалось здесь,

но для размещения на вашем сервере установка шрифтов и css в одной папке для меня, например

то просто свяжите css:

<link href="/font-awesome.min.css" rel="stylesheet" />

Надежда помогает кому-то.

У меня была эта проблема. Проблема заключалась в том, что у меня был стиль CSS-шрифта для семейства шрифтов с важным изменением шрифта font-size.

В случае, если вы работаете с Maven и Apache Wicket, также проверьте следующее, чтобы попытаться решить проблему с помощью Font-Awesome и иконки, которые не загружаются:

Если вы разместили свои файлы, например, в следующей структуре файла

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Проверить 1) Правильно ли вы используете Guard Resource Resource, чтобы разрешить загрузку файлов шрифтов правильно?

Пример из вашего класса, который расширяет WebApplication:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Проверить 2). После того, как вы убедитесь, что все шрифты правильно перенесены в веб-браузер, проверьте, что было фактически перенесено в веб-браузер, т.е. целостность файлов шрифтов изменение? Сравните файлы в исходном каталоге и файлах, переданных в веб-браузер, используя, например, панель инструментов веб-разработчиков Firefox и DiffDog (для сравнения файлов).

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

Пример из вашего pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

В приведенном выше примере мы не фильтруем папку src/main/java, где содержатся файлы css и шрифтов.

Дополнительную информацию о фильтрации двоичных данных см. в документации:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

В частности, документация предупреждает: "Предупреждение: не фильтруйте файлы с помощью бинарный контент, как изображения! Это, скорее всего, приведет к повреждению. Если у вас есть как текстовые файлы, так и двоичные файлы в качестве ресурсов, вам необходимо объявить два взаимоисключающих набора ресурсов. Первый набор ресурсов определяет файлы для фильтрации, а другой набор ресурсов определяет файлы для копирования без изменений... "

Это должно быть намного проще в новой версии 3.0. Проще всего указывать на CDN Bootstrap: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

Вы должны вернуть заголовок Access-Control-Allow-Origin в * для ваших файлов шрифтов

Если ваш сервер является IIS, обязательно добавьте правильный MIME для обслуживания расширения .woff. Правильный MIME равен application/octet-stream

Используйте этот <i class="fa fa-camera-retro" ></i>, вы не определили классы fa

если вы используете sass и импортировали в свой main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

Ошибка может возникнуть из файла font-awesome.scss, который ищет файлы шрифтов в этом относительном пути.

Значит помнить, чтобы переопределить переменную $fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

так что нет необходимости добавлять cdn в ваш index.html

Я использую Официальный шрифт Awesome SASS Ruby Gem и исправил ошибку, добавив нижнюю строку к моему application.css.scss

@import "font-awesome-sprockets";

Пояснение:

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

Я изменил с 3.2.1 до 4.0.1, и папка была шрифтом и теперь называется шрифтами.

src: url ('../font/fontawesome-webfont.eot? v = 3.2.1');

src: url ('../fonts/fontawesome-webfont.eot? v = 4.0.1');

Я надеюсь, что это поможет кому-то.

Какая исправленная проблема для меня (на моей машине с Windows 7) расшифровывала мою директорию проекта. Это безумие, сколько изначально возникает из-за визуальных и функциональных сбоев при тестировании вашего сайта. Просто войдите в командную строку и запустите:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

... где% PROJECT_PATH% - это полный путь к каталогу, в котором хранится ваш код.

Моя проблема заключалась в том, что файлы шрифтов были размером 0kb, я не знаю, как это произошло, возможно, git issue

У меня был поврежденный файл шрифта, хотя он, похоже, был загружен и отображен правильно в источнике Chrome devtools Source, он не отображался правильно. Я снова загрузил его и разрешил.

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

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

Моя проблема заключалась в добавлении

<link rel="stylesheet" href="/font-awesome.min.css">

внутри

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

тег

Я исправил его, поставив его вне тега.

Это не работало для меня, потому что у меня была директива Allow from none для корневого каталога в моей конфигурации apache. Вот как я получил его на работу...

Моя структура каталогов:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

где мой index.html имеет:

<link rel="stylesheet" href="/font-awesome.min.css">

Я решил продолжать запрещать доступ к моему корню и вместо этого добавил другую запись в мою конфигурацию apache для root/font-awesome/

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>

При работе на локальном сервере и загрузке css убедитесь, что вы также загрузите файл шрифта.
Чтобы проверить, все ли в порядке (в firefox), щелкните правой кнопкой мыши на странице, проверьте элемент, консоль, CSS и проверьте что-нибудь вроде

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3): status=2147746065 source: http://localhost/156/admin/css/fonts/fontawesome-webfont.ttf?v=4.3.0

Я получал эту коробку в своем коде, пока не добавил эту ссылку между тегами на моем html. Надеюсь это поможет!

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

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

Относительный путь вызвал 404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

Абсолютный путь разрешил перекрестный браузер:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

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

Я нашел решение сегодня, которое было:

• Загрузите весь проект со своей страницы Github
• Затем следуйте остальным шагам на странице в разделе CSS по умолчанию о перемещении каталога в ваш проект и добавлении ссылки в Раздел HEAD файла .html

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