Почему некоторые иконки font-awesome не отображаются
Я использую font-awesome с Angular 5 для своего пользовательского интерфейса. Поскольку я использую sass, я добавил следующую строку в .angular-cli.json после установки font-awesome
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/bootstrap/scss/bootstrap.scss",
"styles.scss"
],
Некоторые значки работают, например
<i class = "fa fa-money blue-text"></i>
<i class = "fa fa-code blue-text"></i>
Однако многое другое - нет. Например, я хотел использовать этот значок гистограммы с fas fa-chart-bar, но он ничего не показывает. Такие вещи, как fas fa-camera-retro, отображаются только как странный квадрат вместо фактического значка.
Почему не работают некоторые значки? Есть ли способ проверить, существуют ли эти классы css в установленном мной пакете font-awesome?
РЕДАКТИРОВАТЬ
Просто просмотрел таблицу bar в node_modules\font-awesome\css\font-awesome.css, и существует только fa-bar-chart, а не fa-chart-bar. У меня была последняя версия font-awesome, когда она была установлена (4.7.0). Почему на их сайте написано fa-chart-bar. Только что заставил работать с fa fa-bar-chart. Почему именно fa, а не fas, мне непонятно
@TricksfortheWeb - Начиная с FontAwesome 5, это fas.
Хорошо, попробуйте перезагрузить и посмотрите, что произойдет. У вас есть действующий URL?
@ObsidianAge Я использую отличный шрифт 4.7.0. Полагаю, это должен быть fa?
@ddd - Да; Попробуй с <i class = "fa fa-chart-bar"></i>. Имейте в виду, что значки обновляются постоянно, а некоторые значки недоступны в некоторых версиях (что объясняет некоторые квадраты). При необходимости я бы рекомендовал использовать версию 5 и использовать прокладка. Кроме того, значок camera-retro - это премиальный шрифт, используйте вместо него сплошную версию (fas), камеру или camera-alt :)
@ObsidianAge Версия 5 только что вышла? На прошлой неделе я установил "последний" font-awesome, и он все еще был 4.7.0?
@ddd - Версия 5 вышла 7 февраля. И да, это настоящий апгрейд. Я все еще использую версию 4, но новые значки будут поддерживать только версию 5. Если они вам нужны, вам необходимо обновить их. Шайба действительно есть, так что не все так плохо. И всегда перепроверяйте, в какой версии выпущен значок; не хочешь, чтобы тебя поймали :)
@ObsidianAge Появляется с npm, версия с отличным шрифтом недоступна.
Ответы 6
Вы не можете использовать FontAwesome версии V5. Просто используйте последнюю версию FontAwesome 4, она должна работать. Используйте эту ссылку
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
однако некоторые значки доступны только в FA5 - если OP доволен использованием FA4, это может быть нормально для использования ^^ (хотя рекомендуется загружать файл css, а не ссылаться на внешний сайт - если внешний сайт выходит из строя, ваш сайт css тоже)
Переход на более раннюю версию не является решением проблемы.
Just searched bar chart in node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart exists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
Это было изменено с выпуском FA5, потому что теперь есть несколько стилей для значков:
fas: FontAwesome Solidfar: FontAwesome обычныйfab: бренды FontAwesomefal: FontAwesome light
Однако FontAwesome5 free работает только для большинства иконок. Для полного опыта вам придется заплатить FontAwesome Pro.
Выберите любой значок в галерея, чтобы увидеть, какие стили доступны для него в какой версии. NB: FA4-значки здесь.
Его вопрос говорит о fa-деньгах и fa-коде, а ваш ответ - о fa-гистограмме.
И ответ применим и к ним!
У меня была та же проблема с «fa fa-sign-in», которая добавляется на сайт как «fas fa-sign-in-alt», и такая же проблема с «fa fa-trash», которая является «far fa-trash-alt» на сайте .. Не знаю, почему этот вопрос и отличия?
«fa fa-sign-in» - это синтаксис FontAwesome 4, а «fas fa-sign-in» - это FA5. Мое объяснение применимо и к этому случаю ;-)
Проблема с этим ответом заключается в том, что многие значки с отличным шрифтом не отображаются в Firefox с новым соглашением об именах. Вам следует воспользоваться решением Якобинна, чтобы простая «fa» работала в Chrome, а значит, и в firefox.
Я прошу не согласиться - но (а) я не думаю, что подход Якобинна поможет старому стилю "fa fa-money" работать с FA5 и (b) я не могу воспроизвести проблемы с "многими" FA-значками в Firefox.
Я была такая же проблема. Страница поиска значков, которые я нашел с помощью Google, устарела. Убедитесь, что вы ищете последнюю версию сайта.
Как и вы, я нашла этот значок:
<i class = "fa fa-line-chart"></I>
Это не сработало. Если вы выполните поиск по Веб-сайт, вы увидите, что это:
<i class = "fas fa-chart-line"></i>
Сработало у меня после обновления до последней версии Font Awesome:
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity = "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin = "anonymous">
Мне пришлось сделать это один раз. Думаю, на некоторых мобильных устройствах не загружался один из шрифтов:
font-family: "Font Awesome 5 Free", "FontAwesome";
синтаксис, который работал у меня, - fas fa-chart-bar https://fontawesome.com/icons/chart-bar?style=solid
это со следующими версиями: загрузочный / 4.4.1 / CSS / bootstrap.min.css шрифт-удивительный / 4.7.0 / CSS / шрифт-awesome.min.css
fas? Вы не имеете в видуfa?