Чудовий шрифт не відображається значок

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/…
— Zim
ось посилання на чудовий посібник із пошуку шрифтів у git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting
— Мехавел
будь ласка, оновіть запитання до структури вашої папки, в якій у вас є папка awesome, тому ми можемо зрозуміти, що "font-awesome.min.css" правильно отримує шлях ttf чи ні. Тільки css не буде працювати.
— Ajit Hogade
— Rishta

Відповіді:

84

У моєму випадку я зробив наступну помилку в своєму css-коді.

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

Це замінить усі правила сімейства шрифтів для всієї сторінки. Моє рішення було перенести код у тіло так.

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

Примітка. Кожного разу, коли ви використовуєте !importantпрапор у css, будь-яке інше правило css, оголошене того самого типу в тому самому елементі, буде замінено.

— Даніель Барде
джерело
4
Це було рішенням для мене. У мене було, *{font-family: Raleway}і я змінив його на*.not(i) {font-family: Raleway}
— fungusanthrax
У мене теж була ця проблема, але я не усвідомлював її протягом століть, оскільки в DevTools це справді здавалося, що використовується FontAwesome. Докладніше див. У моїй відповіді.
— Дагмар,
59

Коли ви відкриваєте, font-awesome.min.cssви бачите такий шлях:

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

Це означає, що вам потрібно створити каталог, Fontsа потім скопіювати файли fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) до цієї папки. Після цього все повинно працювати нормально.

— користувач2980426
джерело
Оскільки щонайменше 0.8.1 чудовий шрифт не є посиланням. Є три summernoteфайлу в папці шрифтів з розширеннями eot, ttfі woffякі повинні бути розподілені.
— ficuscr
2
Будьте обережні, у версії 4.6.3 (якщо не раніше) це fontsне Fontsстосується системи, що враховує регістр, і це спричиняє проблеми ...
— Джейсон,
1
чому шрифт awesome не пише цього на своєму веб-сайті? це насправді не є явним.
— Метт,
Дивовижно! Я думав, що шрифти повинні бути в тій же папці, що і css, вони повинні бути на один рівень вище.
— Джованні Веркаутерен,
Також переконайтесь, що ваша бібліотека оновлена. У мене були всі мої логотипи, крім логотипу Bandcamp. Як тільки я завантажив оновлений 4.7 і замінив файли, він спрацював.
— Райан Уолкер,
45

Майте на увазі, що нова версія (5) шрифтів чудово використовує "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
ЖИВИТИ ЕКОНОМІК! зміна на "fa fa-bars" зірвана
— неприємно
Дякую, для мене деякі піктограми працюють з fas, а інші з fab, наприклад fab fa-twitter - це добре, але fas fa - twitter показує білий квадрат, іди малюй!
— user1620090
Тож якщо нова версія fas, то чому мені потрібно міняти свої класи з 'fas' на 'fa'
— Сем
22

Спочатку перевірте, чи є у вас клас = "fa", а також будь-який клас піктограми. Отже, не просто

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

Але також

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

Тоді це працює, як очікувалося. Це вирішило моє питання.

— Ще одне питання
джерело
1
Це працювало для мене. Для мене fa-fa-envelop не працював, але тоді fa fa-envelop працював. Дуже дивно, але моя проблема вирішена.
— Jordan Schuetz
@JordanSchuetz "fab" характерний для значків брендів, таких як "fab fa-facebook-f". У новіших версіях ви знайдете "fas" для "твердої" варіації, тому ваша буде зафіксована на "fas fa-envelope" у нових версіях або "fa fa-envelope" у старій.
— Тесса
20

Відкрийте свій код 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">
— Ерга Кандлі
джерело
11

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

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

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

— Валентин Мерсьє
джерело
10
Я зробив те саме і досі маю лише квадратну коробку
— Віпул Хадія
5

я мав справу з тією ж проблемою, тоді я зрозумів, що я повинен використовувати нову версію (5 і більше)

використовуйте цей cdn, він буде працювати.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
— Галид
джерело
4

Для початку у вас не повинно бути обох font-awesome.css і font-awesome.min.css

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

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

Якщо ваш файл html знаходиться в базовій директорії, а css у підпапці біля кореневої системи, вам знадобиться: href="./css/font-awesome.css"(одинарний період)

— paul
джерело
4

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

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

Мені не вдалося змусити v5 працювати, тому я повернувся до версії 4.7.0 за допомогою публікацій вище, і це вирішило мою проблему.

— Міккерс
джерело
1
У мене були проблеми з тим, як працювати v5 + з FontAwesome. Змінив папку "веб-шрифти" на "шрифти" в css і розмістив її так само, і вона не працювала належним чином. Замінено файли на v4.7.0, і це працює як шарм. Хв.
— Ліза Черіллі
1
У версії 5 сімейство шрифтів для піктограм більше не є "FontAwesome". У безкоштовній версії це тепер "Професійний шрифт 5 безкоштовно" та "Шрифт Awesome 5 Pro" у професійній версії. У мене виникла ця проблема, коли я кілька разів використовував коди символів вручну, і вони перестали працювати через те, що не було встановлено сімейство шрифтів.
— Тесса,
4

я стикався з тією ж проблемою .. так що замість того, щоб завантажувати чудовий шрифт, я додав посилання в свій 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>
Розгорніть фрагмент

— Рітік верма
джерело
Щиро дякую, я витрачаю 24 години на виправлення цієї фантастики
— Метью Маганте
2

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

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

Знімок екрана CSS для Awesome Icon Font

Я очікував побачити шрифт у закресленні, якщо там буде проблема ... Однак я дійсно вичерпав усі свої можливості, тому перевірив обчислювані стилі і чітко переконався, що шрифт Font Awesome точно не використовується. (Див. Візуалізований шрифт унизу)

Шрифт Awesome не використовується

У моєму застарілому файлі 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>
— Дагмар
джерело
2

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

npm i --save @fortawesome/fontawesome-free

Потім у верхній частині файлу SCSS (в ідеалі - файлу SCSS, імпортованому в кореневій частині вашої програми):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
— Джефф Дідерікс
джерело
Цікаве додавання @fortawesome/fontawesome-free/css/all.cssце виправило
— Енді Брем
1

У моєму випадку: вам потрібно скопіювати цілу папку з чудовими шрифтами у папку css вашого проекту, а не лише файл font-awesome.min.css .

— sst
джерело
1

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

— Джеймс Вілкінс
джерело
1

моє питання було те, що набрало більшість голосів

*{
font-family: xxxxx
}

змінивши його на це вирішило проблему

body{
font-family: xxxx
}
— Джамшір
джерело
0

Можливо, ви використовували 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.

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

— рішта
джерело
0

Я думаю, у вас немає папки шрифтів у вашій кореневій папці, наприклад, де папка css.

Демо

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

І папка css схожа

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

І папка шрифтів на зразок

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

Сподіваюся, це спрацює у вас.

Дякую тобі.

— Обайдул Хаке
джерело
0

У MacOS Mojave у мене була проблема в Safari. Чудові шрифтові зображення працювали в Chrome, але не в Safari, тому я був впевнений, що це не сайт.

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

Не знаю, чому це виправлено, але це вдалося.

— Майкл Шульман
джерело
0

На основі версії 5.10.1.

Моє рішення (локально):

  1. Якщо ви використовуєте "fontawesome.css" або "fontawesome.min.css", спробуйте використовувати замість цього "all.css" (знаходиться в папці css).

  2. Папка "css" та "webfonts" із завантаженого вами пакета fontawesome мають бути на одному рівні.

У моєму випадку у мене вже була папка css, тому я просто перейменував fontawesome css папку на "css-fa".

І з "css-fa", і з "веб-шрифтами" в моїй папці css, просто зв'яжіть його правильно у своєму текстовому редакторі, і він повинен працювати.

Наприклад: посилання rel = "таблиця стилів" href = "css / css-fa / all.css"

— Тоу Туа Ян
джерело
0

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

(з препроцесором scss); сподіваюся, вирішено

— backciro
джерело
0

Наведений нижче код - чудовий шрифт 4.70.0. Щоб перейти до чудового шрифту 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>
— PythonMaster202
джерело
0

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

— Бруно Левек
джерело
0

Я дотримувався цього підручника, щоб розмістити 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>.

— Огглас
джерело
проблема цього js полягає в тому, що файл важко завантажується
— exequielc
0

Я намагався додати 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";
— Бонкісама
джерело
0

вам потрібно помістити чудовий шрифт у папку css і змінити

href = "../ css / font-awesome.css" до href = "css / font-awesome.css"

Ще одна річ: Ви можете замінити цей чудовий шрифт 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>
Розгорніть фрагмент

— сані
джерело
-1 
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>
— Рональд Намванза
джерело
-1

Слідкуйте за Bootstrap! Bootstrap замінить класи .fa. Якщо ви вводите обидва пакети окремо, думаючи: "Я буду використовувати Bootstrap для реагування на блоки, а Font-Awesome для піктограм", вам потрібно звернутися до класів .fa всередині Bootstrap, щоб вони не заважали роботі Font-Awesome. самостійне впровадження.

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

Можливо, існують чистіші способи вирішення цієї проблеми, але якщо ви пішли вниз по контрольному списку, намагаючись виправити проблему «білого ящика», але все ще не можете зрозуміти (як я це зробив), це може бути відповідь, яку ви шукаєте для.

— jtubre
джерело
Чому голосування проти? Це крайній випадок, але причину, яку нелегко знайти в іншому місці.
— jtubre
-1

У моєму випадку проблема була спричинена використанням деяких звичайних стилів ( far), які не входять до вільного набору. Зміна на fasвиправлене.

— Інгве Хойсет
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.