Значки FontAwesome не відображаються. Чому?

123

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

Річ у тім, що вони не з’являються.

Подивіться на HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

або

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

Я поклав посилання на таблицю стилів в голову.

Я не знаю, чому вони не з’являються.

Ось посилання:

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

Добре, ось повний html:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— Луїс Вальдес
джерело
1
— Шахар
— Чіро Сантіллі郝海东冠状病六四事件法轮功
1
Спробуйте іншу версію шрифту. Наприклад, деякі піктограми не відображалися для мене у версії 4.3.0, але вони з'явилися на 4.7.0.
— Алмір Кампос
Перевірте stackoverflow.com/a/55977898/4874281 . Сподіваюся , що це допоможе кому - то
— Manian

Відповіді:

105

Під вашим посиланням у вас є таке:

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

Зокрема, href=частина.

Однак під вашим повним html є наступне:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Чи намагалися ви замінити src=з href=вашої повної HTML , щоб стати цим?

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

Для мене працює: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
джерело
10
Примітка . Деколи ви можете побачити порожні поля, а потім двічі перевірте, чи є файл css та шрифтів у одній папці, перевірте це , сподіваюся, хтось допоможе.
— shaijut
104

Для тих, хто шукає відсутніх значків шрифтів, я зібрав кілька ідей:

  • Переконайтеся, що ви використовуєте правильне посилання на CDN, наприклад:

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • Якщо сторінка використовує HTTPS, ви посилання на шрифт-страхітливий CSS з допомогою HTTPS (замініть http://з https://у зазначеній вище посиланням).

  • Перевірте, чи не ввімкнено AdBlock Plus або uBlock. Вони можуть блокувати деякі значки.

  • Скиньте кеш браузера. (У Chrome зробіть цикл натискання кнопки перезавантаження та оберіть Hard Cache Reset)

  • Переконайтеся, що <span>або <i>елемент, який ви використовуєте, використовує FontAwesomeсімейство шрифтів. Наприклад, це має бути не просто

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

    але

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

    Він не працюватиме, якщо у вашому CSS є щось таке:

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

  • Якщо ви використовуєте IE8, чи використовуєте ви Shim HTML5?

  • Якщо це не працює, на Шрифті Awesome Wiki є інші ідеї усунення неполадок .

— mxro
джерело
3
Додам: Перевірте, чи ваш .htaccess не блокує розширення ttf, svg, eot або woff
— BassMHL
зміни шрифту! Не багато відповідей згадують цю. Я перевірив і перевірив, і, нарешті, зрозумів це. Я і раніше стикався з цією проблемою, і не знав чому, але тепер я знаю.
— adrianmc
1
Я пропустив спочатку додати сингл faяк назву класу. Дякую. Ідеальна відповідь для пошуку проблеми поетапно.
— Кай Ноак
Для мене це було щось інше, що встановлювало сімейство шрифтів
— levininja
Для мене я мав "шрифт-вага: 500" (щоб він відповідав темі, яку я використовував). Мені довелося встановити його на "font-weight: bold"
— bowlerae
24

Спочатку я не міг змусити це працювати з Font Awesome 5 :

<i class="fa fa-sort-down"></i>

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

w3schools допомогли мені в цьому випадку.

Нове у шрифті Awesome 5 - це fasпрефікс, який використовує Font Awesome 4 fa.

S в fasстендах для твердого тіла , а деякі піктограми також мають звичайний режим, визначений за допомогою префікса far.

Я вже помітив різні файли у папці css FontAwesome, як-от:

  • all.min.css
  • марки.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

І ось тоді я зрозумів свою помилку. Все, що мені потрібно було зробити, це включити відповідний css до html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

А потім посилайтеся на правильний пункт:

<i class="fas fa-sort-down"></i>

Ця установка працює для мене. Хоча не всі предмети мають еквіваленти в кожному типі. Це не вийде:

<i class="far fa-sort-down"></i>

Як бічна примітка, коли ви не хочете посилатися на всі окремі файли, цього буде достатньо:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— Руард ван Ельбург
джерело
Крім того, в шаблоні відображаються елементи, доступні для кожного типу значків.
— Руард ван
12

Шахта не працювала, тому що я хотів, щоб значок, який не був випущений у версії FA, яку я використовував.

Це дає відповідь, чому деякі значки показують, а інші ні.

Досить очевидно, але я здогадуюсь, деякі люди все ще пасують за це. Як я.

— Тайгуара Андраде
джерело
4
Так, це дає відповідь на запитання.
— Бобборт
2
Або ви намагаєтесь використовувати старіший шрифт, який більше не існує у використаній вами версії. Наприклад, ця назва називається times-circle, а не times-circle-o, що є старою назвою: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
Дякую!! Це змушує мене весь день тягнути волосся
— 24x7
5

Потрібно використовувати https для maxcdn.bootstrapcdn.com. Тільки https на maxcdn підтримує CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— Чатчаван Вонсіріпрасерт
джерело
4

Я вирішив цю проблему, поставивши каталог Fonts на той самий рівень, що і мої файли CSS.

— лоло
джерело
3

Для того, щоб той , хто може перевірити це в 2018. Я використовую шрифт дивного 4.7.0 , і я отримав це питання вирішується просто виймаючи sв fasяк видно в коді <i class="fa fa-[icon-name]"></i>. Це було спочатку <i class="fas fa-[icon-name]"></i>.

Сподіваюся, це допомагає.

— Гудлук Лео
джерело
Плюс я запускаю сервер node.js.
— Гудлук Лев
Нове у шрифті Awesome 5 - префікс fas, шрифт Awesome 4 використовує fa. From w3schools
— Ruard van Elburg
2

Просто додавши додаткову інформацію до вищезазначених відповідей стосовно оновлень про джерело,

Якщо ви використовуєте шрифт дивним 5,

а. просто скопіюйте для вставки нижче HTML,

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Примітка. Краще включити всі свої сценарії в межах <body> {YOUR_SCRIPT_HERE}</body>та безпосередньо перед вами (YOUR_CLOSING_BODY)

б. І, наприклад,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
джерело
Як щодо обслуговування css локально, а не посилання на веб-сайт fa?
— Гілтерас
це був мій випадок ... у мене не було файлу js, зараз він працює!
— Крістіан Сепульведа
2

додавши це працював для мене:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

Поглянь

таким повним прикладом є:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
Розгорніть фрагмент

— едгармце
джерело
2

Якщо ви визначаєте спеціальний CSS, ви повинні встановити font-weight: 900;новішу бібліотеку шрифтів Awesome (з версії 5). Якщо не встановити цей шрифт, він може відображати квадрати.

— jurev
джерело
2

Примітки

Ця відповідь створюється, коли остання версія fontawesome становить v5. *, Але версія пряжі та npm вказує на v4. * (21.06.2019). Іншими словами, версії, встановлені через менеджери пакунків, стоять за останнім випуском!

Якщо ви встановили font-awesomeза допомогою менеджера пакунків ( пряжа або npm ), будь ласка, врахуйте, яка версія була встановлена. Якщо ви вже встановили font-awesomeдавно, перевірте, яку версію встановлено.

Встановлення шрифтового файлу як нової залежності:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Перевірка, яка версія шрифтового файлу вже встановлена:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Проблема

Після встановлення font-awesomeзалежності ви включаєте один із цих двох вихідних файлів font-awesome.cssабо font-awesome.min.css(заснований у node_modules/font-awesome/css/) у заголовку веб-сторінки, наприклад

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

Далі ви відвідуєте https://fontawesome.com/ . Ви вибираєте безкоштовні значки та шукаєте піктограму для входу (як приклад). Ви копіюєте піктограму, наприклад <i class="fas fa-sign-in-alt"></i>, вставляєте її у свій html та, значок не відображається, або відображається у вигляді квадрата чи прямокутника!

Рішення

По суті, версії, встановлені через менеджери пакунків, стоять за версією, яка відображається на веб- сайті https://fontawesome.com/ . Як бачимо, ми встановили, font-awesome v4.7.0але веб-сайт показує документацію на font-awesome v5.*. Рішення, відвідайте веб-сайт, який документує піктограми для v4.7.0 https://fontawesome.com/v4.7.0 , скопіюйте відповідний значок, наприклад, <i class="fa fa-sign-in" aria-hidden="true"></i>і включіть його у свій HTML.

— Лукаш Диновський
джерело
Вони випустили новий пакет тут , який має останню версію. Він також сумісний з меншими та sass \ o /
— DerpyNerd
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">

Файл fontawesome.css не містить посилання на шрифт.

— живе-кохання
джерело
1

Якщо ви використовуєте хостинг для блогерів, використовуйте цей css таблицю стилів URL:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Нурдін БМ.
джерело
1

Спробуйте наведені нижче два посилання зберегти у тезі заголовка.

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

Отримання значків за посиланням нижче:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— Вишня
джерело
1

Я використовую:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

та стиль після:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
— Тран Ань Хіен
джерело
1

посилання CDN, яке ви опублікували, я вважаю, чому воно не відображається правильно, ви можете використовувати це нижче, воно прекрасно працює для мене.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Розгорніть фрагмент

— Джон Кеш Махугу
джерело
0

Переконайтеся, що ви включили rel та введіть як у "rel =" stylesheet "type = 'text / css'" у посиланні на файл css awesomefont. Без цього файл не завантажувався правильно для мене.

— Елліот Роберт
джерело
0

Ви можете додати це у файл .htaccess у каталог дивовижного шрифту

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— Уелід Хакім
джерело
0

Я протестував і це працює.

Замість цього

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

Використовуйте його з HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— Атіф Тарік
джерело
-1

Вам потрібен імпортер шрифту спробуйте

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
джерело
-2

Я почав працювати, редагуючи головний файл font-awesome.css. Він має URL-адреси до src (woff, eot тощо). Я повинен був змінити їх на абсолютний шлях, наприклад: http://mywebsite.com/font-awesome.woff Тоді він працював!

— кристал18
джерело
2
Я б краще не рекомендував цього, оскільки ви редагуєте зовнішній файл. Вам (або вашій команді) потрібно буде пам’ятати про це кожен раз, коли вони потребуватимуть оновлення джерела.
— J Cordero
-6

Змініть це:

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

До цього:

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

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

— Шахар
джерело
@ user3870894 Насправді це href, я думав про JavaScript. Але спробуйте новий код.
— Шахар
@ user3870894 o_o Опублікуйте повний HTML або принаймні основні частини. Що говорить консоль? Ви спробували оглянути елемент?
— Шахар
2
@Shahar За допомогою //браузера вибирає протокол, який використовує запитуючий сайт. Коли ваш сайт використовує https, він вибирає https. Якщо ви використовуєте http, він використовує http для запиту файлу з CDN. Звичайно, якщо ви відкриєте сайт на локальному рівні file:///, що не рекомендується, браузер дійсно спробує відкрити cdn з fileпротоколом.
— Робін ван Бален
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.