Недавно я занимался разработкой этого веб-сайта и пытаюсь разместить в нем классные иконки шрифтов, чтобы он был масштабируемым.
Дело в том, что они не появляются.
Посмотрите на 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
Луис Вальдес
источник
источник
Ответы:
По вашей ссылке у вас это:
Конкретно
href=
часть.Однако под вашим полным html это:
Вы пытались заменить его
src=
наhref=
в своем полном HTML, чтобы стать этим?У меня работает: http://codepen.io/TheNathanG/pen/xbyFg
источник
Для тех, кто ищет отсутствующие иконки с потрясающим шрифтом, я собрал несколько идей:
Убедитесь, что вы используете правильную ссылку на CDN, например:
Если ваша страница использует HTTPS, можете ли вы ссылаться на отличный шрифт CSS с помощью HTTPS (замените его
http://
наhttps://
в приведенной выше ссылке).Дважды убедитесь, что у вас не включены AdBlock Plus или uBlock. Возможно, они блокируют некоторые значки.
Сбросьте кеш браузера. (В Chrome сделайте длинный щелчок по кнопке перезагрузки и выберите Hard Cache Reset)
Убедитесь, что используемый вами элемент
<span>
или<i>
использует семействоFontAwesome
шрифтов. Например, это не должно быть простоно
Это не сработает, если в вашем CSS есть что-то вроде следующего:
Если вы используете IE8, используете ли вы прокладку HTML5?
Если это не сработает, на вики-странице Font Awesome Wiki есть дополнительные идеи по устранению неполадок .
источник
fa
сначала добавить сингл в качестве имени класса. Спасибо. Идеальный ответ для пошагового поиска проблемы.Сначала я не мог заставить это работать с Font Awesome 5 :
Вот почему я пришел сюда, не зная о font awesome. Поэтому, когда я посмотрел дальше, я заметил, что моя проблема была просто проблемой с версией.
В этом случае мне помогли w3schools .
Я уже заметил разные файлы в папке FontAwesome css, например:
И вот тогда я понял свою ошибку. Все, что мне нужно было сделать, это включить соответствующий css в html:
Затем укажите правильный элемент:
Эта установка работает для меня. Хотя не все предметы имеют эквиваленты в каждом типе. Это не будет работать:
В качестве примечания, если вы не хотите ссылаться на все отдельные файлы, этого будет достаточно:
источник
Мой не работал, потому что мне нужен был значок, который не был выпущен в версии FA, которую я использовал.
Это ответ на вопрос, почему одни значки отображаются, а другие - нет.
Довольно очевидно, но я думаю, что некоторые люди все же попадают в эту ловушку. Как я.
источник
Вы должны использовать https для maxcdn.bootstrapcdn.com. Только https на maxcdn поддерживает CORS
источник
Я решил эту проблему, поместив каталог Fonts на том же уровне, что и мои файлы CSS.
источник
Для того, чтобы тот , кто может проверить это в 2018. Я использую шрифт удивительного 4.7.0 , и я получил этот вопрос решается просто вынимая
s
вfas
как видно в коде<i class="fa fa-[icon-name]"></i>
. Это было изначально<i class="fas fa-[icon-name]"></i>
.Надеюсь это поможет.
источник
Ноты
Ответ на этот вопрос создается , когда последняя версия fontawesome является v5. * Но пряжа и НПМ версия указывает на v4. * (21.06.2019). Другими словами, версии, установленные через менеджеры пакетов, отстают от последней версии!
Если вы установили
font-awesome
через диспетчер пакетов ( yarn или npm ), пожалуйста, помните, какая версия была установлена. В качестве альтернативы, если вы уже установилиfont-awesome
давно, проверьте, какая версия была установлена.Установка font-awesome как новой зависимости:
Проверяем, какая версия font-awesome уже установлена:
проблема
После того, как вы установили
font-awesome
зависимость, вы включаете один из этих двух исходных файловfont-awesome.css
илиfont-awesome.min.css
(основанныйnode_modules/font-awesome/css/
) в заголовок своей веб-страницы, напримерЗатем вы посетите 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.источник
Просто добавив дополнительную информацию к приведенным выше ответам в отношении обновления fontawesome,
Если вы используете font awesome 5,
а. просто скопируйте и вставьте следующий HTML-код,
Примечание. Лучше включить все свои скрипты в
<body> {YOUR_SCRIPT_HERE}</body>
(YOUR_CLOSING_BODY) и непосредственно перед нимб. И например,
источник
добавление этого сработало для меня:
взглянуть
так полный пример:
источник
Если вы определяете собственный CSS, вы должны установить
font-weight: 900;
более новую библиотеку Font Awesome (начиная с версии 5). Если не установить этот шрифт, могут отображаться квадраты.источник
Для версии 5:
Если вы скачали бесплатный пакет с этого сайта:
https://fontawesome.com/download
Шрифты находятся в файлах all.css и all.min.css .
Итак, ваша ссылка будет выглядеть примерно так:
В файле fontawesome.css нет ссылки на шрифт.
источник
Если вы используете хостинг для блоггеров, используйте эту таблицу стилей URL-адресов css:
источник
Попробуйте оставить две ссылки ниже в теге заголовка.
Получение значков по ссылке ниже:
источник
Я использую:
и стиль после:
источник
ссылка CDN, которую вы разместили, я полагаю, поэтому она не показывалась правильно, вы можете использовать ее ниже, она отлично работает для меня.
источник
Мне удалось заставить работать Font Awesome с помощью файла all.min.css.
источник
Убедитесь, что вы включили rel и введите "rel =" stylesheet "type = 'text / css'" в ссылку на файл css awesomefont. Без них файл загружался некорректно.
источник
Вы можете добавить это в файл .htaccess в директорию классного шрифта.
источник
Я протестировал, и он работает.
Вместо этого
Используйте его с HTTPS
источник
Вам нужен импортер шрифтов. пытаться
источник
Я заставил свой работать, отредактировав основной файл font-awesome.css. У него есть URL-адреса для src (woff, eot и т.д.). Мне пришлось изменить их на абсолютный путь, например: http://mywebsite.com/font-awesome.woff. Тогда это сработало!
источник
Измените это:
К этому:
Я считаю, что вам нужен,
http:
иначе он не знает, какой протокол использовать (и,file:
например, в результате использует неправильный ).источник
href
, я думал о javascript. Но попробуйте новый код.//
браузер, выбирает протокол, который использует запрашивающий сайт. Когда ваш сайт использует https, он выбирает https. Если вы используете http, он использует http для запроса файла из CDN. Конечно, если вы откроете сайт локальноfile:///
, что не рекомендуется, браузер действительно попытается открыть cdn с помощьюfile
протокола.