Значки FontAwesome не отображаются. Зачем?

124

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

Дело в том, что они не появляются.

Посмотрите на 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
У меня отлично работает: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli 郝海东 冠状 病 六四 事件
1
Пожалуйста, попробуйте другую версию font-awesome. Например, некоторые значки не отображались для меня в версии 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 и шрифтов в той же папке, проверьте это , надеюсь, кому-то поможет.
— Шайджут
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, используете ли вы прокладку HTML5?

  • Если это не сработает, на вики-странице Font Awesome Wiki есть дополнительные идеи по устранению неполадок .

— MXRO
источник
3
Я добавлю: убедитесь, что ваш .htaccess не блокирует расширения ttf, svg, eot или woff
— BassMHL, 07
шрифт переопределяет! Не многие ответы упоминают об этом. Я проверил, проверил, проверил и, наконец, понял это. Я тоже сталкивался с этой проблемой в прошлом и не знал почему, но теперь я знаю.
— adrianmc
1
Я пропустил faсначала добавить сингл в качестве имени класса. Спасибо. Идеальный ответ для пошагового поиска проблемы.
— Kai Noack
Для меня это было что-то другое, устанавливающее семейство шрифтов
— levininja
Для меня у меня был шрифт font-weight: 500 (чтобы он соответствовал теме, которую я использовал). Мне пришлось установить его на «font-weight: bold»
— Bowlerae
24

Сначала я не мог заставить это работать с Font Awesome 5 :

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

Вот почему я пришел сюда, не зная о font awesome. Поэтому, когда я посмотрел дальше, я заметил, что моя проблема была просто проблемой с версией.

В этом случае мне помогли w3schools .

Новым в Font Awesome 5 является fasпрефикс, который использует Font Awesome 4 fa.

Символ s in fasозначает сплошной , а некоторые значки также имеют обычный режим, определяемый с помощью префикса far.

Я уже заметил разные файлы в папке FontAwesome css, например:

  • all.min.css
  • brands.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 01
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.
— Goodluck Leo
Новым в Font Awesome 5 является префикс fas, в Font Awesome 4 используется fa. От w3schools
— Руард ван Элбург 08
3

Ноты

Ответ на этот вопрос создается , когда последняя версия fontawesome является v5. * Но пряжа и НПМ версия указывает на v4. * (21.06.2019). Другими словами, версии, установленные через менеджеры пакетов, отстают от последней версии!

Если вы установили font-awesomeчерез диспетчер пакетов ( yarn или npm ), пожалуйста, помните, какая версия была установлена. В качестве альтернативы, если вы уже установили font-awesomeдавно, проверьте, какая версия была установлена.

Установка 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.

Проверяем, какая версия font-awesome уже установлена:

$ 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.

— Лукаш Дыновски
источник
Они выпустили новый пакет здесь , который имеет самую последнюю версию. Он также совместим с less и sass \ o /
— DerpyNerd
2

Просто добавив дополнительную информацию к приведенным выше ответам в отношении обновления fontawesome,

Если вы используете font awesome 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>
— Сундар Гсв
источник
Как насчет обслуживания css локально вместо ссылки на веб-сайт fa?
— Ghilteras 05
это был мой случай ... у меня не было файла 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>
Развернуть фрагмент

— edgarmtze
источник
2

Если вы определяете собственный CSS, вы должны установить font-weight: 900;более новую библиотеку Font Awesome (начиная с версии 5). Если не установить этот шрифт, могут отображаться квадраты.

— Юрьев
источник
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

Если вы используете хостинг для блоггеров, используйте эту таблицу стилей URL-адресов css:

<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. Тогда это сработало!

— crystallove18
источник
2
Я бы не рекомендовал это, поскольку вы редактируете внешний файл. Вам (или вашей команде) нужно будет помнить об этом каждый раз, когда им потребуется обновить fontawesome.
— 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. Но попробуйте новый код.
— Shahar
@ user3870894 о_о Публикуйте полный HTML или хотя бы основные части. Что говорит консоль? Вы пытались осмотреть элемент?
— Shahar
2
@Shahar Используя //браузер, выбирает протокол, который использует запрашивающий сайт. Когда ваш сайт использует https, он выбирает https. Если вы используете http, он использует http для запроса файла из CDN. Конечно, если вы откроете сайт локально file:///, что не рекомендуется, браузер действительно попытается открыть cdn с помощью fileпротокола.
— Робин ван Баален
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.