Некоторые ионы не отображаются

Question

Я заметил, что некоторые значки, которые я использую в своем проекте Cordova, не отображаются ни на одном из моих устройств. У тех, которые не работают, кажется, есть слово ios или android в имени иконки (например: ion-android-list или ion-ios-book-outline). Есть идеи, почему они просто появляются пустыми? Пока что все иконки, которые я использовал с общим именем, работают нормально (например, ion-clock, ion-card). Названия иконок, которые я получаю отсюда: ionicons

Я включил это в мой файл index.html:

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

Answer 1

По-видимому, последняя версия ionic при создании ионного приложения с использованием ionic start из CMD загружает устаревшую библиотеку иконок v1.5.2 (последняя версия v2.0.0).

• Для обновления шрифтов перейдите на последний сайт ionicons и загрузите.
• Разархивируйте и перейдите в каталог / fonts и скопируйте эти 4 файла в каталог www/lib/ionic/fonts вашего приложения (перезаписать).
• Сделайте то же самое для папки scss и вставьте в www/lib/ionic/scss/ionicons (перезаписать).
• Наконец, откройте файл ionicons.css из распакованного zip-файла /css/ionicicons.css и скопируйте содержимое этого файла в www/lib/ionic/css/ionicons.css (ПРИМЕЧАНИЕ. Убедитесь, что вы редактируете и заменяете только существующий шрифт версия занимает около первых 1500 - 2000 строк, вы увидите комментарии с указанием)

Answer 2

Похоже, вы используете Ionic, а не просто Cordova.

Вы можете сделать частичное обновление до предстоящего выпуска Ionic, который включает Ionicons v2:

1. Загрузите /config/lib/fonts и / scss / ionicons из последних еженедельников в соответствующие места в папке /www/lib

2. Убедитесь, что у вас установлен gulp: npm install gulp

3. Бежать ionic setup sass (ПРИМЕЧАНИЕ: сначала сделайте резервную копию файла ionic.project, так как это внесет некоторые изменения)

4. Замените файлы в /www/lib / ionic / css новыми в / www / css (требуется переименование).

5. Исправьте относительные пути в этих скопированных файлах: замените../lib/ionic/fonts на../fonts

Я уверен, что есть более простой способ, но это сработало для меня. Кто-то сделал особенное предложение по постоянному обновлению ионов.

---

Обновить:

Анимированные иконки пока не поддерживаются в Ionicons v2 (вместо ионного спиннера). Вот взломать, чтобы вернуть их:

https://github.com/driftyco/ionicons/issues/111

Вам нужно добавить display:inline-block в классе анимации для работы на Android.

Answer 3

Я была такая же проблема. Самый простой способ решить:

удалять www/ionic/fonts а также www/ionic/scss/ionicons каталог.

Тогда беги ionic lib update из корневого каталога вашего проекта.

Answer 4

Для более новых версий просто используйте:

<ion-spinner></ion-spinner>

больше: ионный прядильщик

Answer 5

Я думаю, это может быть об используемой версии ionic, если это V5 или если @ionic/angularверсия V5, тогда вам нужно использовать ionicons версии 5, а не 4 (у них разные имена).