Шрифт awesome не показывает значок

Я использую 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>

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

Цитируется с их сайта:

Префикс fa в версии 5 устарел. Новое значение по умолчанию - стиль fast 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.

Ответ 4

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

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

Но также

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

Затем он работает так, как ожидалось. Это решило мою проблему.

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

Для начала вы не должны иметь как font-awesome.css, так и font-awesome.min.css

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Я ожидал увидеть шрифт в зачеркнутом, если возникла проблема... Однако я действительно исчерпал все свои варианты, поэтому я проверил Computed Styles и ясно увидел, что шрифт 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>

Ответ 10

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

npm i --save @fortawesome/fontawesome-free

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

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

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

Возможно, вы использовали VCS (git или somesuch) для передачи файлов значков на сервер. 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.

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

Ответ 14

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

Demo

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

И папка шрифтов, как

Я надеюсь, что это сработает для вас.

Спасибо.

Ответ 15

В font-awesome-4.x добавление папки fonts папки вашего веб-приложения.

Ответ 16

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

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

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

Ответ 17

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

Ответ 18

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

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

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

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

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

Пример: link rel= "stylesheet" href= "css/css-fa/all.css"

Ответ 19

Для меня Tou Toua Yang ответ сделал свое дело:

Если вы используете "fontawesome.css" или "fontawesome.min.css", попробуйте вместо этого использовать "all.css".

Я связывался с CDF CloudFlare для "fontawesome.min.css" и ничего не получал на своей странице, кроме рамки с рамками - значки не появлялись. Я изменил свою ссылку CDN на "all.css", и теперь значки работают!

Я работаю над одностраничным локальным HTML файлом на моем ПК, нигде не размещаясь.

Ответ 20

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>

Ответ 21

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

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

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