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

вы должны иметь 2 классов,fa класс и класс, который определяет нужные значок fa-twitter,fa-search, etc...

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

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

использовать

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

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

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

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

Если вы используете меньше или SASS, откройте шрифт-awesome.less / SASS file и отредактируйте переменную path @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;
}

откройте шрифт-удивительный.стиль CSS есть код :

@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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

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

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

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

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

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

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

надеюсь кому-нибудь поможет.

В случае, если вы работаете с Maven и Apache Калитка также проверьте следующее, чтобы попытаться решить проблему с 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) правильно ли вы используете защиту ресурсов пакета, чтобы правильно загружать файлы шрифтов?

пример из вашего класса, который расширяет веб-приложение:

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

}

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

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

пример из вашего пом.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

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

У меня была эта проблема. Проблема была в том, что у меня был стиль CSS семейства шрифтов !важно переопределение шрифта fontawesome.

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

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

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

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

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

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

У вас должно быть 2 класса, класс fas и класс fa, возможно, это будет работать:

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

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

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

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

src: url ('../шрифты/fontawesome-webfont.эот?v=4.0.1');

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

Я использую официальный шрифт Awesome Sass Ruby Gem и исправлена ошибка, добавив строку ниже в мое приложение.стиль CSS.СКС

@import "font-awesome-sprockets";

объяснение:

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

Если вы используете Sass и импортировали в основном.СКС @import '../vendor/font-awesome/scss/font-awesome.scss';

ошибка может исходить от шрифта-awesome.scss-файл, который ищет файлы шрифтов в его относительном пути.

Так помните для переопределения переменной $fa-font-path: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

таким образом, нет необходимости добавлять cdn в свой индекс.HTML-код

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

* {
font-family: Arial !important;
}

глупая ошибка, но это может оповестить кого-то в будущем!

использование абсолютных вместо относительных путей решило это для меня. Я использовал относительные пути (см. Первый пример) и это не сработало. Я проверил через консоль и обнаружил, что сервер возвращает 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");
}

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

это не работало для меня, потому что у меня было 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

где мой индекс.язык HTML:

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

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

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

моя проблема была с добавлением

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

внутри

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

tag

я исправил это, поместив его вне тега.

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

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

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

дважды проверьте fontawesome-все.css файл-в самом низу будет путь к папке webfonts. У меня было"../ webfonts" формат в нем, что означало, что файл css будет искать 1 уровень вверх от того, где он находится. Поскольку все мои файлы css были в папке css, и я добавил шрифты в ту же папку, это не работало.

просто переместите папку шрифтов на уровень выше, и все должно быть хорошо:)

протестировано с помощью шрифта Awesome 5.0

теперь в fontawesome 5 Вы можете доставить кэшированную версию JS по Https.

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

дополнительная информация о https://fontawesome.com/get-started/svg-with-js

использовать с высшим классом

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

Я попробовал ряд предложений выше без успеха.

Я использую пакеты NuGeT. Они (почему-то) несколько именованных версии (шрифт-удивительный, fontawesome, шрифт.удивительный и т. д.)

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

Я предполагаю, что в других именованных версиях отсутствует ряд вещей.

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

1. загрузите весь проект с их Github страница
2. затем выполните остальные шаги на их страница в разделе CSS по умолчанию о перемещении каталога в ваш проект и добавлении ссылки в головной раздел an .html файл

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