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

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

Вот как я включаю файлы в голову:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

И вот пример того, как я пытаюсь использовать значок:

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

Но все это получается на большом квадрате. Кто-нибудь знает, что может происходить?

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Если вы используете 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;
}

Ответ 6

Откройте шрифт-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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Ответ 7

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

<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">

Ответ 8

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

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

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

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

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

Ответ 9

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

Ответ 10

В случае, если вы работаете с 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

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

Ответ 11

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

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

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

Ответ 12

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

* {
font-family: Arial !important;
}

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

Ответ 13

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

Ответ 14

По состоянию на декабрь 2018 года мне стало проще использовать стабильную версию 4.7.0, размещенную на bootstrapcdn, вместо font-awesome 5.xx cdn на их веб-сайте - поскольку каждый раз, когда они обновляют второстепенные версии, предыдущая версия будет ломаться.

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

Иконки одинаковые:

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

Ответ 15

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

Ответ 16

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

Ответ 17

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

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

Ответ 18

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

Ответ 19

font-weight: 900;

У меня была другая проблема с Font Awesome 5. Значение шрифта по умолчанию должно быть 900 для значков FontAwesome, но я перезаписал его до 400 для тегов span и i. Это просто сработало, когда я это исправил.

Вот ссылка на проблему на их странице Github, https://github.com/FortAwesome/Font-Awesome/issues/11946

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

Ответ 20

Я изменил с 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');

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

Ответ 21

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

@import "font-awesome-sprockets";

Пояснение:

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

Ответ 22

если вы используете 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

Ответ 23

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

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

Протестировано с Font Awesome 5.0

Ответ 24

Начиная с версии 5, если вы загрузили пакет с этого сайта:

https://fontawesome.com/download

Шрифты находятся в файлах all.css и all.min.css.

Вот как будет выглядеть ваша ссылка при использовании последней версии (замените ее на свою папку):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

Ответ 25

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

Ответ 26

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

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

Ответ 27

При работе на локальном сервере и загрузке 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

Ответ 28

Это не работало для меня, потому что у меня была директива 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/4.4.0/css/font-awesome.min.css">

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

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

Ответ 29

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

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

внутри

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

тег

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

Ответ 30

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