Font awesome не показывает значок

Question 1

Я использую Font Awesome и не хочу добавлять CSS с HTTP. Я загрузил Font Awesome и включил его в свой код, но Font Awesome показывает квадратную рамку с рамкой вместо значка. Вот мой код:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Я хотел бы знать, как сделать так, чтобы вместо квадратного поля с рамкой отображался значок.

Question 2

В моем случае я сделал следующую ошибку в своем коде css.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Это переопределит все правила семейства шрифтов для всей страницы. Моим решением было переместить код в тело вот так.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: всякий раз, когда вы используете !importantфлаг в css, любое другое правило css, объявленное того же типа для того же элемента, будет отменено.

Question 3

Когда вы откроете, font-awesome.min.cssвы увидите следующий путь:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Это означает, что вам нужно создать каталог, Fontsа затем скопировать файлы fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) в эту папку. После этого все должно работать нормально.

Question 4

Имейте в виду, что в новой версии (5) font awesome используется префикс "fas"или "fab"вместо "fa".

Цитата с их веб-сайта:

Префикс fa устарел в версии 5. Новое значение по умолчанию - это стиль fas solid и стиль fab для брендов.

Вот почему мои шрифты отображали пустые квадраты. Теперь исправлено.

Пример кода:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

См. Https://fontawesome.com/icons/facebook-f?style=brands.

Question 5

Во-первых, убедитесь, что у вас есть class = "fa", а также класс значка. Так что не только

<i class="fa-pencil" title="Edit"></i>

Но также

<i class="fa fa-pencil" title="Edit"></i>

Тогда все работает как положено. Это решило мою проблему.

Question 6

Откройте код 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">

Question 7

Убедитесь, что путь к вашему CSSфайлу правильный. Скорее предпочитают абсолютные ссылки, их легче понять, поскольку мы знаем, откуда мы начинаем, и поисковые системы также предпочтут их относительным ссылкам. А чтобы уменьшить пропускную способность, используйте ссылку с серверов font-awesome:

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

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

Question 8

я имел дело с той же проблемой, тогда я понял, что мне нужно использовать новую версию (5 и выше)

используйте этот cdn, он будет работать.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Question 9

Для начала вам не следует иметь и то и другое.font-awesome.css font-awesome.min.css

Как правило, используйте font-awesome.cssво время разработки, а затем переключайтесь на, font-awesome.min.cssкогда сайт вас устраивает.

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

Если ваш html-файл находится в базовом каталоге, а CSS - в подпапке вне корня, вам потребуется: href="./css/font-awesome.css"(одна точка)

Question 10

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

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

Мне не удалось заставить работать v5, поэтому я вернулся к 4.7.0 с помощью сообщений выше, и это устранило мою проблему.

Question 11

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Развернуть фрагмент

Question 12

Я успешно установил Font Awesome, используя их CDN и javascript include (как описано на этой странице ). Затем я попытался скопировать HTML и CSS на некоторые устаревшие страницы и внезапно увидел пустые квадратные поля вместо значков.

Я видел ответ Дэниела (см. Выше), и, поскольку мой старый файл CSS был огромным (и многолетним), я подозревал, что это проблема. Однако когда я заглянул в Chrome DevTools, действительно было похоже, что Font Awesome загружен:

Я ожидал увидеть шрифт зачеркнутым, если возникнет проблема ... Однако я действительно исчерпал все свои возможности, поэтому я проверил вычисленные стили и ясно увидел, что шрифт Font Awesome определенно не используется. (См. Шрифт Rendered внизу)

Мой старый файл CSS был беспорядочным, и я предпочел не трогать его, поэтому я обманул, сделав это - пожалуйста, никому не говорите :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Также следует отметить, что когда я обновился с Font Awesome версии 4.7.0 до версии 5.4.1, эта проблема исчезла! Я использовал это руководство по установке и этот HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

Question 13

Для тех из вас, кто использует SCSS и пакет NPM, вот мое решение:

npm i --save @fortawesome/fontawesome-free

Затем в верхней части файла SCSS (в идеале - файла SCSS, импортированного в корень вашего приложения):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

Question 14

В моем случае: вам нужно скопировать всю папку font-awesome в папку css вашего проекта, а не только файл font-awesome.min.css .

Question 15

Таким образом, кажется, что добавление style='font-weight:normal;'или иное изменение шрифта непосредственно на элементе отменяет .fas{font-weight:900}определение в файле CSS Font Awesome. Я предполагаю, что шрифт имеет определенные определения в файле шрифта, с которым он работает. Кажется, что font-weightнеобходимо установить значение от 501 до 1000, иначе шрифт может выглядеть как квадратный блок.

Question 16

моя проблема была тем, у кого было большинство голосов

*{
font-family: xxxxx
}

изменение его на это решило проблему

body{
font-family: xxxx
}

Question 17

Возможно, вы использовали VCS (git или что-то подобное) для передачи файлов значков на сервер. git говорит:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Вероятно, вам придется исправить свои шрифты.

Question 18

Я думаю, у вас нет папки шрифтов в корневой папке, например, где находится папка css.

Демо

И папка css похожа на

И папка шрифтов вроде

Надеюсь, у вас это сработает.

Спасибо вам.

Question 19

На MacOS Mojave у меня была эта проблема в Safari. Прекрасные шрифты изображения работали в Chrome, но не в Safari, поэтому я был уверен, что это не сайт.

Я получил их для рендеринга, перейдя в «Настройки» в меню Safari и отключив / сняв флажок «Предотвратить межсайтовое отслеживание» на вкладке «Конфиденциальность».

Не уверен, почему это исправило, но это было.

Question 20

На основе версии 5.10.1.

Мое решение (локально):

Если вы используете «fontawesome.css» или «fontawesome.min.css», попробуйте вместо этого использовать «all.css» (находится в папке css).
Папка «css» и папка «webfonts» из загруженного пакета fontawesome должны находиться на одном уровне друг с другом.

В моем случае у меня уже была папка css, поэтому я просто переименовал папку fontawesome css в «css-fa».

С обоими "css-fa" и "webfonts" в моей папке css просто правильно свяжите их в текстовом редакторе, и он должен работать.

Пример: ссылка rel = "stylesheet" href = "css / css-fa / all.css"

Question 21

решено изменить целевой! importantized селектор семейства шрифтов с * { ... } на *:not(i) { ... }

(с препроцессором scss); надеюсь ты решил

Question 22

Код ниже - font-awesome 4.70.0. Чтобы перейти к font-awesome 5.11.2, щелкните здесь .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

Question 23

Я использую FontAwesome Pro, и решение для меня было встроить all.min.cssвместо fontawesome.min.css.

Question 24

Я следил за этим руководством, чтобы самостоятельно разместить Font Awesome Pro 5.13.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

По какой-то причине я не мог <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">загрузить, webfontsчто, в свою очередь, привело к отображению только квадратов. Но когда попробовал, <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>все заработало. Обе ссылки были добавлены в HTML <head>.

Question 25

Я пытался добавить fa 5.0.13 в drupal 8 с помощью scss. Стили не включены по умолчанию в основной fa.scss, пришлось добавлять их вручную.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

Question 26

вам нужно поместить файл font-awesome в папку css и изменить

href = "../ css / font-awesome.css" на href = "css / font-awesome.css"

Еще одна вещь: вы можете заменить этот Font-awesome css файл и попробовать этот

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Развернуть фрагмент

Question 27

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Развернуть фрагмент

Question 28

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

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

Question 29

Остерегайтесь Bootstrap! Bootstrap переопределит классы .fa. Если вы вводите оба пакета по отдельности, думая: «Я буду использовать Bootstrap для быстрой обработки блоков и Font-Awesome для значков», вам необходимо обратиться к классам .fa внутри Bootstrap, чтобы они не мешали работе Font-Awesome. только реализация.

например: семейство шрифтов FontAwesome в Bootstrap будет мешать семейству шрифтов Font Awesome 5 Free в Font-Awesome, и вы получите белое поле вместо нужного значка.

Могут быть более чистые способы справиться с этим, но если вы выполнили контрольный список, пытаясь исправить проблему с «белым ящиком», и все еще не можете понять это (как и я), это может быть ответ, который вы ищете. для.

Question 30

В моем случае проблема была вызвана использованием некоторых обычных стилей ( far), которые не включены в бесплатный набор. Меняется на fasисправленный.

Answer 1

99

Я использую Font Awesome и не хочу добавлять CSS с HTTP. Я загрузил Font Awesome и включил его в свой код, но Font Awesome показывает квадратную рамку с рамкой вместо значка. Вот мой код:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Я хотел бы знать, как сделать так, чтобы вместо квадратного поля с рамкой отображался значок.

html css font-awesome Ганеш Х
источник

5

Об этом уже много раз спрашивали. Убедитесь, что вы также включаете файлы шрифтов .. не только CSS stackoverflow.com/questions/14366158/…

Зим

вот ссылка на font-awesome гид по устранению препятствий в git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Mehavel

пожалуйста, обновите вопрос, указав структуру папок, в которой есть папка font-awesome, чтобы мы могли определить, правильно ли получает "font-awesome.min.css" путь ttf или нет. Только css не будет работать.

Аджит Хогаде

stackoverflow.com/a/42355738/397872

ришта,

Answer 2

5

Об этом уже много раз спрашивали. Убедитесь, что вы также включаете файлы шрифтов .. не только CSS stackoverflow.com/questions/14366158/…

Зим

Answer 3

вот ссылка на font-awesome гид по устранению препятствий в git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Mehavel

Answer 4

пожалуйста, обновите вопрос, указав структуру папок, в которой есть папка font-awesome, чтобы мы могли определить, правильно ли получает "font-awesome.min.css" путь ttf или нет. Только css не будет работать.

Аджит Хогаде

Answer 5

stackoverflow.com/a/42355738/397872

ришта,

Answer 6

84

В моем случае я сделал следующую ошибку в своем коде css.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Это переопределит все правила семейства шрифтов для всей страницы. Моим решением было переместить код в тело вот так.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: всякий раз, когда вы используете !importantфлаг в css, любое другое правило css, объявленное того же типа для того же элемента, будет отменено.

Даниэль Барде
источник

4

Это было для меня решением. У меня было, *{font-family: Raleway}и я поменял его на*.not(i) {font-family: Raleway}

грибок сантракс

У меня тоже была эта проблема, но я не осознавал этого целую вечность, потому что в DevTools действительно было похоже, что используется FontAwesome. Подробнее см. Мой ответ.

Дагмар

Answer 7

4

Это было для меня решением. У меня было, *{font-family: Raleway}и я поменял его на*.not(i) {font-family: Raleway}

грибок сантракс

Answer 8

У меня тоже была эта проблема, но я не осознавал этого целую вечность, потому что в DevTools действительно было похоже, что используется FontAwesome. Подробнее см. Мой ответ.

Дагмар

Answer 9

59

Когда вы откроете, font-awesome.min.cssвы увидите следующий путь:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Это означает, что вам нужно создать каталог, Fontsа затем скопировать файлы fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) в эту папку. После этого все должно работать нормально.

user2980426
источник

Поскольку по крайней мере 0.8.1 font-awesome не упоминается. Есть три summernoteфайла в папке шрифтов с расширениями eot, ttfи woffкоторые должны быть распределены.

ficuscr

2

Будьте осторожны, в 4.6.3 (если не раньше) это fontsне так, Fontsи в системе, чувствительной к регистру, возникают проблемы ...

Джейсон

1

почему на сайте font awesome не написано? это действительно не ясно.

Мэтт

Потрясающие! Я думал, что шрифты должны быть в той же папке, что и css, они должны быть на один уровень выше.

Джовани Веркаутерен

Также убедитесь, что ваша библиотека обновлена. У меня были все мои логотипы, кроме логотипа bandcamp. Как только я загрузил обновленную версию 4.7 и заменил файлы, все заработало.

Райан Уокер

Answer 10

Поскольку по крайней мере 0.8.1 font-awesome не упоминается. Есть три summernoteфайла в папке шрифтов с расширениями eot, ttfи woffкоторые должны быть распределены.

ficuscr

Answer 11

2

Будьте осторожны, в 4.6.3 (если не раньше) это fontsне так, Fontsи в системе, чувствительной к регистру, возникают проблемы ...

Джейсон

Answer 12

1

почему на сайте font awesome не написано? это действительно не ясно.

Мэтт

Answer 13

Потрясающие! Я думал, что шрифты должны быть в той же папке, что и css, они должны быть на один уровень выше.

Джовани Веркаутерен

Answer 14

Также убедитесь, что ваша библиотека обновлена. У меня были все мои логотипы, кроме логотипа bandcamp. Как только я загрузил обновленную версию 4.7 и заменил файлы, все заработало.

Райан Уокер

Answer 15

45

Имейте в виду, что в новой версии (5) font awesome используется префикс "fas"или "fab"вместо "fa".

Цитата с их веб-сайта:

Префикс fa устарел в версии 5. Новое значение по умолчанию - это стиль fas solid и стиль fab для брендов.

Вот почему мои шрифты отображали пустые квадраты. Теперь исправлено.

Пример кода:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

См. Https://fontawesome.com/icons/facebook-f?style=brands.

Кристонен
источник

Это сделало это для меня! Странно, что он не обновлялся в документации

GroomedGorilla

Это было единственное, что сработало. Если вы используете современную версию, используйте это.

samurdhilbk

LIVE SAVER! изменение на "фа фа-барс" сорвалось

противно

Спасибо, для меня некоторые значки wirk с fas, а другие с fab, например fab fa-twitter подойдут, но fas fa-twitter показывает белый квадрат, поймите!

user1620090 06

Так что, если новая версия fas, то зачем мне менять классы с

Сэм

Answer 16

Это сделало это для меня! Странно, что он не обновлялся в документации

GroomedGorilla

Answer 17

Это было единственное, что сработало. Если вы используете современную версию, используйте это.

samurdhilbk

Answer 18

LIVE SAVER! изменение на "фа фа-барс" сорвалось

противно

Answer 19

Спасибо, для меня некоторые значки wirk с fas, а другие с fab, например fab fa-twitter подойдут, но fas fa-twitter показывает белый квадрат, поймите!

user1620090 06

Answer 20

Так что, если новая версия fas, то зачем мне менять классы с

Сэм

Answer 21

23

Во-первых, убедитесь, что у вас есть class = "fa", а также класс значка. Так что не только

<i class="fa-pencil" title="Edit"></i>

Но также

<i class="fa fa-pencil" title="Edit"></i>

Тогда все работает как положено. Это решило мою проблему.

Еще один вопрос
источник

1

Это сработало для меня. Для меня fab fa-envelop не работал, но тогда работал fa fa-envelop. Очень странно, но моя проблема решена.

Jordan

@JordanSchuetz «fab» относится к значкам брендов, например «fab fa-facebook-f». В более новых версиях вы найдете «fas» для «твердого» варианта, так что ваш будет фиксироваться на «fas fa-envelope» в новых версиях или «fa fa-envelope» в более старых.

Тесса

Answer 22

1

Это сработало для меня. Для меня fab fa-envelop не работал, но тогда работал fa fa-envelop. Очень странно, но моя проблема решена.

Jordan

Answer 23

@JordanSchuetz «fab» относится к значкам брендов, например «fab fa-facebook-f». В более новых версиях вы найдете «fas» для «твердого» варианта, так что ваш будет фиксироваться на «fas fa-envelope» в новых версиях или «fa fa-envelope» в более старых.

Тесса

Answer 24

Откройте код 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">

Answer 25

Убедитесь, что путь к вашему CSSфайлу правильный. Скорее предпочитают абсолютные ссылки, их легче понять, поскольку мы знаем, откуда мы начинаем, и поисковые системы также предпочтут их относительным ссылкам. А чтобы уменьшить пропускную способность, используйте ссылку с серверов font-awesome:

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

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

Answer 26

10

Я сделал то же самое, и у меня остался только квадратный ящик

Випул Хадия

Answer 27

я имел дело с той же проблемой, тогда я понял, что мне нужно использовать новую версию (5 и выше)

используйте этот cdn, он будет работать.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Answer 28

Для начала вам не следует иметь и то и другое.font-awesome.css font-awesome.min.css

Как правило, используйте font-awesome.cssво время разработки, а затем переключайтесь на, font-awesome.min.cssкогда сайт вас устраивает.

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

Если ваш html-файл находится в базовом каталоге, а CSS - в подпапке вне корня, вам потребуется: href="./css/font-awesome.css"(одна точка)

Answer 29

4

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

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

Мне не удалось заставить работать v5, поэтому я вернулся к 4.7.0 с помощью сообщений выше, и это устранило мою проблему.

Микерс
источник

1

У меня также были проблемы с работой FontAwesome версии 5+. Изменили свою папку «веб-шрифты» на «шрифты» в CSS и разместили ее таким же образом, и она не работала должным образом. Заменил файлы на v4.7.0 и работает как шарм. Грм.

Лиза Серилли 02

1

В версии 5 семейство шрифтов для иконок больше не «FontAwesome». В бесплатной версии это теперь «Font Awesome 5 Free» и «Font Awesome 5 Pro» в профессиональной версии. У меня возникла эта проблема, когда я вручную использовал коды символов в нескольких местах, и они перестали работать из-за того, что семейство шрифтов не было установлено.

Tessa

Answer 30

1

У меня также были проблемы с работой FontAwesome версии 5+. Изменили свою папку «веб-шрифты» на «шрифты» в CSS и разместили ее таким же образом, и она не работала должным образом. Заменил файлы на v4.7.0 и работает как шарм. Грм.

Лиза Серилли 02

Answer 31

1

В версии 5 семейство шрифтов для иконок больше не «FontAwesome». В бесплатной версии это теперь «Font Awesome 5 Free» и «Font Awesome 5 Pro» в профессиональной версии. У меня возникла эта проблема, когда я вручную использовал коды символов в нескольких местах, и они перестали работать из-за того, что семейство шрифтов не было установлено.

Tessa

Answer 32

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Развернуть фрагмент

Answer 33

Большое спасибо, я потратил 24 часа на то, чтобы исправить этот потрясающий шрифт

Мэтью Маганте,

Answer 34

Я успешно установил Font Awesome, используя их CDN и javascript include (как описано на этой странице ). Затем я попытался скопировать HTML и CSS на некоторые устаревшие страницы и внезапно увидел пустые квадратные поля вместо значков.

Я видел ответ Дэниела (см. Выше), и, поскольку мой старый файл CSS был огромным (и многолетним), я подозревал, что это проблема. Однако когда я заглянул в Chrome DevTools, действительно было похоже, что Font Awesome загружен:

Я ожидал увидеть шрифт зачеркнутым, если возникнет проблема ... Однако я действительно исчерпал все свои возможности, поэтому я проверил вычисленные стили и ясно увидел, что шрифт Font Awesome определенно не используется. (См. Шрифт Rendered внизу)

Мой старый файл CSS был беспорядочным, и я предпочел не трогать его, поэтому я обманул, сделав это - пожалуйста, никому не говорите :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Также следует отметить, что когда я обновился с Font Awesome версии 4.7.0 до версии 5.4.1, эта проблема исчезла! Я использовал это руководство по установке и этот HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

Answer 35

Для тех из вас, кто использует SCSS и пакет NPM, вот мое решение:

npm i --save @fortawesome/fontawesome-free

Затем в верхней части файла SCSS (в идеале - файла SCSS, импортированного в корень вашего приложения):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

Answer 36

@fortawesome/fontawesome-free/css/all.cssИсправлено интересное добавление

Энди Брэм

Answer 37

В моем случае: вам нужно скопировать всю папку font-awesome в папку css вашего проекта, а не только файл font-awesome.min.css .

Answer 38

Таким образом, кажется, что добавление style='font-weight:normal;'или иное изменение шрифта непосредственно на элементе отменяет .fas{font-weight:900}определение в файле CSS Font Awesome. Я предполагаю, что шрифт имеет определенные определения в файле шрифта, с которым он работает. Кажется, что font-weightнеобходимо установить значение от 501 до 1000, иначе шрифт может выглядеть как квадратный блок.

Answer 39

моя проблема была тем, у кого было большинство голосов

*{
font-family: xxxxx
}

изменение его на это решило проблему

body{
font-family: xxxx
}

Answer 40

Возможно, вы использовали VCS (git или что-то подобное) для передачи файлов значков на сервер. git говорит:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Вероятно, вам придется исправить свои шрифты.

Answer 41

Я думаю, у вас нет папки шрифтов в корневой папке, например, где находится папка css.

Демо

И папка css похожа на

И папка шрифтов вроде

Надеюсь, у вас это сработает.

Спасибо вам.

Answer 42

На MacOS Mojave у меня была эта проблема в Safari. Прекрасные шрифты изображения работали в Chrome, но не в Safari, поэтому я был уверен, что это не сайт.

Я получил их для рендеринга, перейдя в «Настройки» в меню Safari и отключив / сняв флажок «Предотвратить межсайтовое отслеживание» на вкладке «Конфиденциальность».

Не уверен, почему это исправило, но это было.

Answer 43

На основе версии 5.10.1.

Мое решение (локально):

Если вы используете «fontawesome.css» или «fontawesome.min.css», попробуйте вместо этого использовать «all.css» (находится в папке css).
Папка «css» и папка «webfonts» из загруженного пакета fontawesome должны находиться на одном уровне друг с другом.

В моем случае у меня уже была папка css, поэтому я просто переименовал папку fontawesome css в «css-fa».

С обоими "css-fa" и "webfonts" в моей папке css просто правильно свяжите их в текстовом редакторе, и он должен работать.

Пример: ссылка rel = "stylesheet" href = "css / css-fa / all.css"

Answer 44

решено изменить целевой! importantized селектор семейства шрифтов с * { ... } на *:not(i) { ... }

(с препроцессором scss); надеюсь ты решил

Answer 45

Код ниже - font-awesome 4.70.0. Чтобы перейти к font-awesome 5.11.2, щелкните здесь .

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

Answer 46

0

Я использую FontAwesome Pro, и решение для меня было встроить all.min.cssвместо fontawesome.min.css.

Бруно Левек
источник

Answer 47

Я следил за этим руководством, чтобы самостоятельно разместить Font Awesome Pro 5.13.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

По какой-то причине я не мог <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">загрузить, webfontsчто, в свою очередь, привело к отображению только квадратов. Но когда попробовал, <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>все заработало. Обе ссылки были добавлены в HTML <head>.

Answer 48

проблема с этим js в том, что файл

слишком

Answer 49

Я пытался добавить fa 5.0.13 в drupal 8 с помощью scss. Стили не включены по умолчанию в основной fa.scss, пришлось добавлять их вручную.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

Answer 50

вам нужно поместить файл font-awesome в папку css и изменить

href = "../ css / font-awesome.css" на href = "css / font-awesome.css"

Еще одна вещь: вы можете заменить этот Font-awesome css файл и попробовать этот

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Развернуть фрагмент

Answer 51

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Развернуть фрагмент

Де Зин Хтанг
источник

Работает очень хорошо с этим

Де Зин Хтанг

Answer 52

Работает очень хорошо с этим

Де Зин Хтанг

Answer 53

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

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

Answer 54

Остерегайтесь Bootstrap! Bootstrap переопределит классы .fa. Если вы вводите оба пакета по отдельности, думая: «Я буду использовать Bootstrap для быстрой обработки блоков и Font-Awesome для значков», вам необходимо обратиться к классам .fa внутри Bootstrap, чтобы они не мешали работе Font-Awesome. только реализация.

например: семейство шрифтов FontAwesome в Bootstrap будет мешать семейству шрифтов Font Awesome 5 Free в Font-Awesome, и вы получите белое поле вместо нужного значка.

Могут быть более чистые способы справиться с этим, но если вы выполнили контрольный список, пытаясь исправить проблему с «белым ящиком», и все еще не можете понять это (как и я), это может быть ответ, который вы ищете. для.

Answer 55

Почему голосование против? Это крайний случай, но эту причину нелегко найти в другом месте.

jtubre

Answer 56

В моем случае проблема была вызвана использованием некоторых обычных стилей ( far), которые не включены в бесплатный набор. Меняется на fasисправленный.

Font awesome не показывает значок

Ответы: