some ionicons not showing

℡╲_俬逩灬. 提交于 2019-11-30 22:08:50

Apparently the latest version of ionic when building an ionic app using ionic start from CMD loads an outdated icon library v1.5.2 (latest is v2.0.0).

  • To update the fonts go to the latest ionicons site and download.
  • Unzip and navigate to the /fonts dir and copy these 4 files to the www/lib/ionic/fonts dir of your app (overwrite).
  • Do the same for the scss folder and paste to www/lib/ionic/scss/ionicons (overwrite).
  • Lastly open the ionicons.css file from your extracted zip file /css/ionicicons.css and copy the contents of that file to www/lib/ionic/css/ionicons.css (NOTE: Make sure you edit and only replace the existing font version takes up about the first 1500 - 2000 lines, you will see the comments indicating)

Looks like you're using Ionic, rather than just Cordova.

You could do a partial upgrade to the forthcoming release of Ionic, which includes Ionicons v2:

  1. Download /config/lib/fonts and /scss/ionicons from the latest nightly into the corresponding places in your /www/lib folder

  2. Make sure you have gulp installed locally: npm install gulp

  3. Run ionic setup sass (NOTE: backup your ionic.project file first as this makes some changes)

  4. Replace the files in /www/lib/ionic/css with the new ones in /www/css (requires some renaming).

  5. Fix the relative paths in these copied files: replace ../lib/ionic/fonts with ../fonts

I'm sure there's an easier way, but this worked for me. Someone's made a feature suggestion for always keeping ionicons up to date.


Update:

Animated icons aren't supported with Ionicons v2 yet (ion-spinner will be the replacement). Here's a hack to get them back:

https://github.com/driftyco/ionicons/issues/111#issuecomment-65788526

You need to add display:inline-block to the animation class to work on Android.

For newer versions just use:

<ion-spinner></ion-spinner>

more: ion-spinner

I had the same issue. The easiest way to resolve:

Delete www/ionic/fonts and www/ionic/scss/ionicons directory.

Then run ionic lib update from your project root directory.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!