No icons in iOS emulator (Yeoman generator-ionic problem)

ionic-v1
1

Hi guys, I’m new here. Ionic seems like a great piece of framework, thanks for that!

Anyway, my problem: Icons do work when I run the app in my web browser but once I open the app in the iOS emulator I just get an empty rectangle instead of the actual icons. This is the same problem for all icons in my app:

I am including the icons this way:

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">
  <ion-tab title="Login" icon="icon ion-log-in" href="#/auth/login">
    <ion-nav-view name="login-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register Account" icon="icon ion-person-add" href="#/auth/register">
    <ion-nav-view name="register-tab"></ion-nav-view>
  </ion-tab>
</ion-tabs>

I used the Yeoman generator-ionicjs (v0.0.6) to scaffold my project.

I serve the app to the browser running grunt serve.

I serve the app to the emulator running grunt emulate:ios (installed ios-sim beforehand via npm).

Any ideas why this is happening and how I can fix the problem?

2

Are you including the ionic css in your <head>?

Needs to be something like this :

    <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>

You also need to have the Ionic fonts in your app.

3

This was too obvious. Thanks to your suggestion I had the idea to actually check the CSS file generated by grunt. Turns out that the path to the icon font gets messed up during concatenation. So this is a grunt problem and should be fixed in generator-ionicjs. I’ll report the issue there.

In the meantime, if anybody is experiencing the same problem using the same stack:

After concatenation you have to change the different paths to the icon font inside www/styles/vendor.css from “/bower_components/ionic/release/fonts/ionicons.eot” to “…/bower_components/ionic/release/fonts/ionicons.eot”

4

Slightly offtopic but grunt emulate:ios seems awesome! Can you share your Gruntfile.js here so we (I :P) can see how you did that?

5

Sadly, I do not deserve credit for the Grunffile.js :wink:

I am using the latest version (0.0.6) of https://github.com/diegonetto/generator-ionic
See the GitHub repo for the gruntfile. I am trying to fix the path problem now.

1 Like
6

Glad to see my generator making it onto these forums! Was planning on posting here once the project stabilized a bit but it looks like you guys beat me to it :smile:

At any rate this fonts bug was fixed in version0.0.8. Currently 0.0.14 is the latest release and it comes with a few new helpful features like prompts for installing some commonly used Cordova plugins along side your application and Karma unit tests with Istanbul code coverage reports.

The generated Gruntfile.js does some other helpful things (as @stizzle mentioned), like wrap all the Cordova CLI commands for convenience as well as support a browser based development workflow with a built in live-reload server via grunt serve.