Ionicons breaking on Ionic beta.13 [Fixed]

ionic-v1
1

Just noticed updated my ionic project to beta.13.
For some reason none of the IOS or Android Ionicons are working.
Was there a change in how Ionicons is loaded in beta.13?

Edit: Seems it that beta.13 shipped with the old version of Ionicons v1.5.2. It’s just been updated to 2.0.0 within the last day. Fixed it by replacing all references to Ionicons in the ionic.css file with the new version at https://github.com/driftyco/ionicons/blob/master/css/ionicons.css and replacing the lib/fonts folder with the fonts folder at https://github.com/driftyco/ionicons/tree/master/fonts

1 Like
2

Thanks for the info. I tried to do the same but I am getting no icons at all. Could you please paste the resulting css file?

EDIT: I need to recreate my css file from the sass file, and also be aware that the ionicons names for ios have changed, they changed from -ios7- to -ios-, so I also need to renamed the icons to match the newer version names, that is why I was having no icons at all.

3

Im very new to sass so not sure how to go about recreating or recompiling the css from sass. It would be great if you can tell me the steps for doing this.

4

Just run “ionic serve” command inside your project root folder, this will compile sass among other useful things it does. Check: http://ionicframework.com/docs/guide/testing.html

5

One of the first things I did was run ionic serve but i get a box where some of the new icons should be, which is why i was wondering if there is some step I missed.

6

Be sure to replace the ionicons related files inside the lib/ionic folder,
Replace the “ionic/fonts” folder with the newer ionicons version.
Also Replace the files inside “ionic/scss/ionicons”

be sure to backup your prokect just in case anything goes wrong.

7

First step was to backup :wink:

I have already replaced the fonts and the scss files in their respective places (the same places you mentioned)
However other than those there is nothing else related to ionicons in the lib/ionic folder.

All the old icons still work fine and the new FourSquare icon shows up, but nothing else shows up (e.g. the Snapchat icon is just a box)

8

mmm will need to check in more detail, I got the boxy icons because of the reasons I already explained.

I guess the boxy icons are because of that fonts are not present in the css or svg files, does the snapchat icon is present in the scss and svg?
Also check in the resulting app css if the snapchat icon classes are there.
Your resulting css should point to the 2.0.0 version in the font face classes

besides that I am out of possible solutions.

9

So i went about restoring the backup of my project, then cloaning the ionicons repository locally. After which I replaced the scss and font files from this clone into my project.
Then I ran ionic serve again and still did not get the fonts to work. Getting blanks or boxes.

I guess ill wait for the next beta release which hopefully should have the new font files.

10

I tried it again. I copied the font files and the scss files into my ionic project. Ran ionic serve but the scss does not seem to re-compile and give me the icons. I get blanks or boxes everywhere.

Any advice on how to run a specific scss rebuild?

11

There is another topic about the same question here: Beta 14 Ionicons using v.1.5?

The extra step mentioned is to execute gulp in order to re-create the scss files