Шрифт 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
Можливо, ви забули папку копіювання веб-шрифту?
— дано право

Відповіді:

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')
— Braulio
1
Просто для майбутніх читачів ASP.NET MVC з тією ж проблемою: Якщо у вас всі папки в потрібному місці, перевірте, чи додали ви тип MIME у файл web.config, як вказано тут: stackoverflow.com/questions/4015816/…
— jpgrassi
1
Якщо ви використовуєте схему URI даних з базовою версією шрифту base64 (може легко конвертувати в Інтернеті), вам не доведеться турбуватися про правильний шлях до файлів та розміщення ресурсів.
— Відродження"
Примітка : якщо ви не хочете змінювати 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. Новим за замовчуванням є стиль твердої фабрики та стиль файлу для брендів."
— Terje Solem
1
Це зафіксувало це для мене! Я використовую Angular (5 я думаю) разом з primeng, і здається, що шрифт-приголомшливий вже працював, наприклад, для MenuItem-визначень всередині xx.component.ts (піктограми надані правильно). Однак: додаючи щось до xx.component.html (наприклад, кнопка p із значком), потрібно додати fa class та fa- <будь-яку піктограму>!
— Ігор
1
@TerjeSolem інформація, яку ви надали, дуже важлива. Це вирішило мою проблему. як я використовував старішу версію, але використовував "fas" спасибі
— MindRoasterMir
🤦‍♂️ Дякую велике! Я отримав те ж саме з відкритими іконками oi oi -... втратив перший oi.
— Олександр
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-приголомшливий шрифт. Для комерційного виробничого середовища я б цього не робив.
— Джей Едвардс
48

Це може допомогти, переконайтеся, що ви ненавмисно не змінили сімейство шрифтів на піктограмі. Якщо ви змінили сімейство шрифтів .fa елемента з: FontAwesome, значок не відображатиметься. Це завжди щось дурне і маленьке.

Сподіваюся, що хтось допомагає.

— Bren1818
джерело
11
БІНГО! Дуже дякую. Metro-UI переосмислив сімейство шрифтів. Мені довелося додати: .fa {font-family: 'FontAwesome'! Важливо; } тоді це спрацювало.
— Деббі А
1
Так. Дурний і малий. Це - зміна шрифту на щось інше і зачіпання чудових іконок - зі мною траплялося стільки разів, що стає дурним.
— Едд
2
Так - цей рядок був винен (щоб бути більш конкретним, важливе правило): * {font-family: 'Source Sans Pro'! Важливо}
— Світ,
1
Це найважливіша і корисна порада щодо використання шрифту Awesome, щоб уникнути втрати часу на пошук неприємностей.
— Дез
22

Якщо ви використовуєте Менше або SASS, відкрийте файл font-awesome.less / sass та відредагуйте змінну шляху, @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 до кількох значків.
— користувач805981
@fa-font-path: "../fonts";працював на мене. (Зауважте, що пропущено sдодано)
— prograhammer
18

Відкрийте свій шрифт-awesome.css theres-код типу:

@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

Я намагався вирішити ту саму проблему кількома попередніми рішеннями, але вони не спрацювали в моїй ситуації. Нарешті, я додав ці два рядки в 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" />

надія комусь допомагає.

— шайют
джерело
8

У вас повинні бути 2 класи, клас класу і клас класу, можливо, це спрацює:

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

// Correct
<i class="fa fa-search"></i>
— Ізраїль
джерело
3
Не усвідомлювали цього - від v5 їм зараз потрібен клас fabчи fasклас замість faкласу.
— Ехілон
7

У мене було це питання. Проблема полягала в тому, що у мене був CSS-стиль у сімействі шрифтів!

— Джонні Уайт
джерело
У мене був такий самий випуск із * {family-font: 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) Чи правильно ви використовуєте захист ресурсів пакета, щоб дозволити правильно завантажувати файли шрифтів?

Приклад з вашого класу, який розширює WebApplication:

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

}

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

Зокрема, якщо ви використовуєте Maven, будьте в курсі фільтрації ресурсів. Не фільтруйте папку, де містяться ваші / шрифтові файли - інакше вони будуть пошкоджені.

Приклад з вашого 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

Зокрема, документація попереджає: " Попередження: не фільтруйте файли з бінарним вмістом, як-от зображення! Це, швидше за все, призведе до пошкодження виводу. Якщо у вас є як текстові, так і двійкові файли як ресурси, вам потрібно оголосити два взаємовиключні набори ресурсів. Перший набір ресурсів визначає файли, які слід відфільтрувати, а другий набір ресурсів визначає файли для копіювання без змін ... "

— Філіп
джерело
6

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

* {
font-family: Arial !important;
}

Нерозумна помилка, але це може кинути когось у майбутньому!

— J Doe
джерело
4

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

— тронічний
джерело
2
Саме так! Використання сторонніх постачальників для обслуговування дивовижних файлів шрифту не вирішує вашу проблему, ви просто передаєте її іншим, щоб їх вирішити.
— Симанас
4

Станом на грудень 2018 року, мені стає простіше використовувати стабільну версію 4.7.0, розміщену на bootstrapcdn, а не шрифтовий динамічний 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>
— ехацином
джерело
3

font-weight: 900;

У мене була інша проблема із шрифтом Awesome 5. Вага шрифту за замовчуванням повинна бути 900 для піктограм FontAwesome, але я перезаписав його на 400 для тегів span та i. Це просто спрацювало, коли я його виправив.

Ось посилання на проблему на їхній сторінці Github, https://github.com/FortAwesome/Font-Awesome/isissue/11946

Сподіваюся, це комусь допоможе.

— манійський
джерело
1
дякую, що це було і моїм питанням. Я встановив сімейство шрифтів на "Шрифт Awesome 5 Free", але мені знадобилося значення шрифту на 900!
— Ганс Вонн
3

Якщо ви використовуєте версію 5. * або новішу, вам доведеться використовувати

all.css або all.min.css

Включаючи fontawesome.css не працює, оскільки він не має посилання на папку webfonts і немає посилання на @ font-face або font-family

Ви можете перевірити це за допомогою пошуку коду для властивості сімейства шрифтів у fontawesome.css або fontawesome.min.css

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

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

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
— СантошК
джерело
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 та веб-шрифтів введіть тут опис зображення

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

Ці назви обов'язкові. Тепер скопіюйте вміст css та веб-шрифтів із zip у відповідні папки вашого проекту. І це все!

Остерігайтеся приємних! Дивовижність робить речі простими для користувача!

— BabaNew
джерело
1

Я змінив з 3.2.1 на 4.0.1 і папка була шрифтом і тепер називається шрифтами.

src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1');

src: url ('../ шрифти / fontawesome-webfont.eot? v = 4.0.1');

Я сподіваюся, що це комусь допоможе.

— Андре Дуарте
джерело
1

Я використовую Офіційний шрифт Awesome SASS Ruby Gem і виправив помилку, додавши нижній рядок до мого application.css.scss

@import "font-awesome-sprockets";

Пояснення:

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

— Марклар
джерело
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, і я додав шрифти до тієї ж папки, це не працювало.

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

Тестували за допомогою шрифту Awesome 5.0

— Росс
джерело
Це має бути кращою відповіддю, оскільки він відповідає безпосередньо на питання, не посилаючись на застарілу документацію. Kudos
— Чемпіон Кайлу
1

У мене була така ж проблема з шрифтом дивовижному 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 містить стилі основної програми та всі стилі значків, які знадобляться під час використання шрифту Awesome. Папка / webfonts містить усі файли шрифту, на які посилаються вищезазначені CSS та залежать від них.

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

Додайте посилання на скопійований файл /css/all.css у кожен шаблон або сторінку, на якій ви хочете використовувати шрифт 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>
— користувач3325776
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.