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

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

• убедитесь, что вы используете правильную ссылку на 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 (replace http:// С https:// в ссылке выше).

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

• сброс кэша браузеров. (На Chrome сделать looong нажмите на кнопку перезагрузки и выберите жесткий сброс кэша)

• уверяю, что <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?

• если это не сработает, есть еще Идеи По Устранению Неполадок на шрифте Awesome Wiki.

вы должны использовать 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" />

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

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

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

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

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

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

попробуйте ниже две ссылки держать в заголовке тега.

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

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

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

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

вы можете добавить это в .htaccess файл в директории awesome font

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>

Я использую:

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

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

Если вы используете шрифт awesome 5,

a. просто скопируйте и вставьте нижеприведенный 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>

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

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

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

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

<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: например, в результате).