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исправленный.