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

224

Поэтому я пытаюсь создать прототип маркетинговой страницы и использую 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>

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

css html twitter-bootstrap font-awesome Коннор Блэк
источник
1
Вы импортируете шрифт?
Mayhewr
1
Возможно нет. Я думал, что вам нужно только включить .cssфайл.
Коннор Блэк
2
Название подразумевает, что проблема специфична для Chrome. Это загружается в других браузерах, или файл шрифта, на который ссылаются, поднимается 404?
cimmanon
1
Не удалось найти шаг 3 по вышеуказанной ссылке на август 2016 года ... Какие-либо перенаправления ??
Саураб Тивари
1
Возможно, вы забыли скопировать папку webfont?
Entithat

Ответы:

149

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

mayhewr
источник
5
Отличный ответ, просто чтобы дать некоторую дополнительную информацию, вы также можете поместить шрифты в путь по умолчанию, предоставленный CSS, просто откройте Font-awesome.css, и вы найдете следующую запись: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Браулио
1
Только для будущих читателей ASP.NET MVC с той же проблемой: если у вас все папки в правильном месте, проверьте, добавили ли вы тип MIME в ваш файл web.config, как указано здесь: stackoverflow.com/questions/4015816/…
— jpgrassi
1
Если вы используете схему URI данных с версией шрифта base64 (легко конвертировать онлайн), вам не нужно беспокоиться о правильном пути к файлу и размещении ресурсов.
— RenaissanceProgrammer
Примечание : если вы не хотите изменять css, просто поместите css и шрифты в одну папку, отметьте это
— shaijut
7
@tutuca: Не каждый может использовать CDN.
— Гонки легкости на орбите
188

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

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

<!-- Correct -->
<i class="fa fa-search"></i>
— Набиль Кадими
источник
4
Это должен быть главный ответ, CSS предоставил правильное расположение для файлов шрифтов, если вы не перемещаете их - это
— привело
5
Примечание: «Префикс fa устарел в версии 5. Новое значение по умолчанию - стиль fast solid и стиль fab для брендов».
— Terje Solem
1
Это исправило это для меня! Я использую Angular (5, я думаю) вместе с primeng, и кажется, что font-awesome уже работал, например, для MenuItem-определений внутри xx.component.ts (значки отображаются правильно). Однако: при добавлении чего-либо в xx.component.html (например, p-кнопка со значком) необходимо добавить класс fa и fa- <любой значок>!
— Игорь
1
@TerjeSolem информация, которую вы дали, очень важна. Это решило мою проблему. как я использовал более старую версию, но использовал "fas" спасибо
— MindRoasterMir
🤦‍♂️ Большое спасибо! Я получил то же самое с открытыми значками ой ой -... потерял первый ой.
— Александр
54

Использовать это 

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

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

— Кумар Дипам
источник
6
это предполагает, что вы хотите использовать CDN font-awesome. Для коммерческой производственной среды я бы не стал этого делать.
— Джей Эдвардс,
48

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

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

— Bren1818
источник
11
BINGO! Огромное спасибо. Metro-UI переопределял семейство font-awesome. Я должен был добавить это: .fa {font-family: 'FontAwesome'! Важный; } тогда это сработало.
Дебби А
1
Ага. Глупый и маленький. Это - изменение шрифта для чего-то другого и влияние на потрясающие иконки - случалось со мной так много раз, что это становилось глупым.
Эдд
2
Да, виновата была эта строка (точнее, правило! Important): * {font-family: 'Source Sans Pro'! Важный}
Свет
1
Это самый важный и полезный совет по использованию Font Awesome, чтобы не тратить время на поиск проблемы.
Дез
22

Если вы используете LESS или SASS, откройте файл font-awesome.less / sass и отредактируйте переменную 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;
}
jonschlinkert
источник
Есть ли способ импортировать только определенные значки вместо всех? Я только хотел бы скомпилировать мой файл CSS в несколько значков.
user805981
@fa-font-path: "../fonts";работал на меня. (Обратите внимание на пропущенное sдобавленное)
prograhammer
18

Откройте свой код font-awesome.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">
Эрга Кандли
источник
13

Я пытался решить ту же проблему с несколькими предыдущими решениями, но они не работали в моей ситуации. Наконец, я добавил эти 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">
Войкан Цвиянович
источник
12

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

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

введите описание изображения здесь

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

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

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

shaijut
источник
8

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

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

// Correct
<i class="fa fa-search"></i>
Израиль
источник
3
Не осознавал этого - с v5 теперь им нужен класс fabили fasвместо faкласса.
Эчилон
7

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

Джонни Уайт
источник
У меня была такая же проблема с * {font-family: Helvetica, sans-serif! Важный; }
Даббо
6

В случае, если вы работаете с 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) Правильно ли вы используете Package Resource Guard, чтобы позволить правильно загружать файлы шрифтов?

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

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

}

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

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

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

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

Philipp
источник
6

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

* {
font-family: Arial !important;
}

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

Дж Доу
источник
4

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

троник
источник
2
Именно! Использование сторонних провайдеров для обслуживания ваших удивительных файлов шрифтов не решит вашу проблему, вы просто передадите его другим, чтобы решить.
Симанас
4

По состоянию на декабрь 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>
ehacinom
источник
3

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

Дарио Бриньоне
источник
Если вы используете IIS 7, вы можете выполнить процедуру здесь: technet.microsoft.com/en-us/library/cc725608(v=ws.10).aspx
dresh
3

font-weight: 900;

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

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

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

Manian
источник
1
спасибо, что это была моя проблема. Я установил Font-Family на «Font Awesome 5 Free», но мне нужно было также установить шрифт-вес на 900!
Ганс Вонн
3

Если вы используете версию 5. * или выше, то вы должны использовать

all.css или all.min.css

Включение файла fontawesome.css не работает, поскольку в нем нет ссылки на папку webfonts и нет ссылки на @ font-face или font-family

Вы можете проверить это, выполнив поиск кода для свойства font-family в fontawesome.css или fontawesome.min.css.

the_haystacker
источник
это было идеальным решением для меня - очень жаль, что ответ так далеко внизу, я не видел его и должен был понять это сам
Cold_Class
2

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

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
SantoshK
источник
2

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

Джитендра Варшней
источник
2

Начиная с версии 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">
живи любя
источник
2

После попытки найти решение и НЕ найти официальную документацию полезной, я решил эту проблему:

  1. Загрузите Fontawesome.zip. Я использую версию 5.10.2, и я получил ее отсюда https://fontawesome.com/download

  2. Внутри zip-файла есть несколько папок. Вам нужны только папки css и webfonts введите описание изображения здесь

    1. Создайте 2 папки в своих веб-проектах и ​​назовите их css и webfonts. введите описание изображения здесь

Эти имена являются обязательными. Теперь скопируйте содержимое css и веб-шрифтов из zip-файла в соответствующие папки вашего проекта. И это все!

Осторожно, потрясающе! Awesomeness упрощает работу для пользователя!

BabaNew
источник
1

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

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

Андре Дуарте
источник
1

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

@import "font-awesome-sprockets";

Объяснение:

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

Marklar
источник
1

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

vilsbole
источник
1

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

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

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

Росс
источник
Это должен быть предпочтительный ответ, поскольку он отвечает на вопрос напрямую, без ссылок на устаревшую документацию. Слава
Кайл Чемпион
1

У меня была та же проблема со шрифтом awesome 5, скачанным с пряжей, я сделал добавил файл min.css ВМЕСТЕ с файлом all.js.

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

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
Энрике Мартинес
источник
1

Файл /css/all.css содержит основной стиль и все стили значков, которые вам понадобятся при использовании Font Awesome. Папка / webfonts содержит все файлы гарнитуры, на которые ссылается вышеупомянутый CSS, и зависит от них.

Скопируйте всю папку / webfonts и /css/all.css в каталог статических ресурсов вашего проекта (или там, где вы предпочитаете хранить внешние ресурсы или вещи поставщиков).

Добавьте ссылку на скопированный файл /css/all.css в каждый шаблон или страницу, на которой вы хотите использовать Font Awesome.

Просто посетите - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Вы получите ответ.

Дипеш Чаухан
источник
0

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

Тим
источник
0

Это не работает для меня, потому что я имел 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>
user3325776
источник