bug: Missing ionicons.woff in www/build/fonts/

[5amfung]

Type: bug

Ionic Version: 2.x

Platform: all

I got the following error in the browser when I ran ionic serve from a freshly made tabs starter app.

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/build/fonts/ionicons.woff?v=3.0.0-alpha.3

ionicons.woff is referenced in www/build/css/app.ios.css.

Here's my ionic info:

$ ionic info

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:  
Ionic Version: 2.0.0-alpha.51
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: 1.8.3 
ios-sim version: 5.0.4 
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.2 Build version 7C68</span>

[5amfung]

Manually updating fonts to the following in ionic.config.js fixed the problem. But I think the ionic CLI should fix it.

fonts: {
      src: [
        'node_modules/ionic-framework/fonts/**/*.ttf',
        'node_modules/ionicons/dist/fonts/*.ttf',
        'node_modules/ionicons/dist/fonts/*.woff*'
      ],
      dest: "www/build/fonts"
    }

[brandyscarney]

The starter projects are updated now to include ionicons in package.json and the ionic.config.

https://github.com/driftyco/ionic2-app-base/blob/master/package.json#L7 https://github.com/driftyco/ionic2-app-base/blob/master/ionic.config.js#L14

Please refer to the CHANGELOG for alpha.51 if you are having issues in an existing project:

https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#ionicons-were-moved

Thanks!

[5amfung]

@brandyscarney I just checked that my package.json and ionic.config.js are exactly the same as in the starter projects. But I ran into the problem unless I included the files in the fonts section.

[brandyscarney]

Can you try updating it to match the conference app and see if that works?

src: ['node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)'],

https://github.com/driftyco/ionic-conference-app/blob/master/ionic.config.js#L18

[5amfung]

Thanks @tlancina @brandyscarney for making the fix. I was going to jump in to create a PR. But you beat me to the punch.

[adirzoari]

@tlancina @5amfung what solution for this problem? i have the same error

[adirzoari]

i get error when i write it

[loursbourg]

This is invalid JSON, Add quote marks : { "name": "tasklist", "app_id": "b8ec0680", "v2": true, "typescript": true, "fonts": { "src": ['node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)'], "dest": "www/build/fonts" } }

[AlGantori]

My ionic.config.json has the same as the ionic-app-base

{
  "name": "UPS.TS.RC4",
  "app_id": "",
  "v2": true,
  "typescript": true  
}

But I still see this error when running off the web in a browser.

http://mumti.org/mumti/g/assets/fonts/ionicons.woff2?v=3.0.0-alpha.3 I also see at the very beginning of the loading http://mumti.org/mumti/g/cordova.js

ionic info

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.2.0
Xcode version: Not installed

My package.json

  "scripts": {
    "build": "ionic-app-scripts build",
    "clean": "ionic-app-scripts clean",
    "ionic:build": "ionic-app-scripts build  && beep ",
    "ionic:serve": "ionic-app-scripts serve && beep ",

    "watch": "ionic-app-scripts watch && beep ",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build",
    "run:after": "beep",
    "serve:after": "beep",
    "beep": "bash.exe beep.sh",
    "beep0": "bash.exe -c \"echo -en '\\a' \" "
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/core": "3.1.1",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "2.3.0",
    "ionic-native": "2.9.0",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "^2.0.10"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-x-socialsharing"
  ],
  "cordovaPlatforms": [
    {
      "platform": "android",
      "version": "",
      "locator": "android"
    },
    {
      "platform": "browser",
      "version": "",
      "locator": "browser"
    }
  ],
  "description": "UPS.TS.RC6: An Ionic project",
  "config": {
    "ionic_source_map": "source-map"
  }
}

[judsonmusic]

I also had to add .woff2 to my mime types on my hosting server.

[AlGantori]

Add this mime to your web.config

<!--
https://stackoverflow.com/questions/28235550/proper-mime-type-for-woff2-fonts
  -->   
            <remove fileExtension=".woff2" />
                <mimeMap fileExtension=".woff2" mimeType="font/woff2" />

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.