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

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

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

Посмотрите на 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/[email protected]" 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>

        <h1>The greatest way to contact those you love</h1>
        <h3>In a way you don't imagine</h3>

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

</body>

Ответы

Ответ 1

Под вашей ссылкой у вас есть следующее:

<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

Ответ 2

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

  • Убедитесь, что вы используете правильную ссылку на CDN, например:

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

  • Если ваша страница использует HTTPS, вы ссылаетесь на шрифт-awesome CSS с помощью HTTPS (замените http:// на https:// в ссылке выше).

  • Удостоверьтесь, что у вас нет AdBlock Plus или uBlock. Они могут блокировать некоторые из значков.

  • Reset кеш браузеров. (В Chrome сделайте looong, нажмите кнопку перезагрузки и выберите 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 Shim?

  • Если это не сработает, есть дополнительные Поиск и устранение неисправностей в Wiki-шрифте Awesome.

Ответ 3

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

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

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

w3schools помог мне в этом деле.

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

S в 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">

Ответ 4

Мина не работала, потому что мне нужен значок, который не был выпущен в версии FA, которую я использовал.

Это объясняет, почему некоторые значки показывают, но другие нет.

Довольно очевидно, но я думаю, что некоторые люди все еще падают за это. Как и я.

Ответ 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" />

Ответ 6

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

Надеюсь это поможет.

Ответ 7

добавление этого работало для меня:

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

Ответ 8

Я решил эту проблему, поместив каталог Fonts на тот же уровень, что и мои CSS файлы.

Ответ 9

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

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Ответ 10

Попробуйте следующие две ссылки в теге заголовка.

<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">

Ответ 11

Просто добавив немного информации к ответам, приведенным выше, в отношении обновлений на fontawesome,

Если вы используете шрифт 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>

Ответ 12

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

Ответ 13

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

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

Ответ 14

Мне удалось заставить Font Awesome работать, используя файл all.min.css.

Ответ 15

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

Ответ 16

Вы можете добавить это в файл .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>

Ответ 17

Я использую:

<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);
}

Ответ 18

я скопировал папку webfonts в свое решение и исправил проблему

Ответ 19

Я проверил, и это работает.

Вместо этого

<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">

Ответ 20

Заметки

Ответ на этот вопрос создается, когда последняя версия 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
└─ [email protected]
info All dependencies
└─ [email protected]
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.
└─ [email protected]
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.

Ответ 21

Для версии 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 не содержит ссылку на шрифт.

Ответ 22

Вам нужен импортер шрифтов. | попробуйте

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

Ответ 23

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

Ответ 24

Измените это:

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

Для этого:

<link href="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'; return false;" rel="stylesheet" type="text/css">

Я считаю, что вам нужен http:, иначе он не знает, какой протокол использовать (и, в результате, использует не тот, file:).