Where to place external CSS and fonts

1

I wonder what is the right place to put external CSS files and fonts (like Foundation Icons fonts, for example) in an Ember app ? I put the whole unzipped folder into public folder, added the import in ember-cli-build.js like that:

app.import('foundation-icons/foundation-icons.css');

and referenced it in app/index.htmlas follows:

<link integrity="" rel="stylesheet" href="{{rootURL}}foundation-icons/foundation-icons.css">

Is it correct ?

2

Everything in the public folder is included in the build. So the css must be added to vendor.css or app.css and not in the public folder (you don’t have to add it to your index.html than). The font files must go into public like you did. We add bootstrap 3 like this.

https://github.com/martinic/ember-cli-bootstrap-css/blob/master/index.js

3

You can add font files like this.

https://github.com/martinic/ember-cli-bootstrap-fonts/blob/master/index.js

4

@broerse, Thank you for your response. The unzipped foundation-icons has the following structure:

foundations-icons
  svgs (contains the images)
  foundation-icons.css
  foundation-icons.eot
  foundation-icons.svg
  foundation-icons.ttf
  foundation-icons.woff

So, as far as I understood, I’ll have to copy everything in vendor folder but import them separately in ember-cli-build.js:

app.import('vendore/foundation-icons/foundation-icons.css', {
  destDir: 'assets'
});

app.import('vendore/foundation-icons/svg', {
  destDir: 'assets/images'
});

app.import('vendore/foundation-icons/foundation-icons.eot', {
  destDir: 'assets/fonts'
});

app.import('vendore/foundation-icons/foundation-icons.ttf', {
  destDir: 'assets/fonts'
});

app.import('vendore/foundation-icons/foundation-icons.woff', {
  destDir: 'assets/fonts'
});

Correct ?
5

I think the .css is the only thing that needs importing. This should be done in treeForVendor See above.

The fonts should be add to the public folder like you did before or in treeForPublic See above.

6

Finally, here is the solution that worked:

  1. Copy the entire folder foundation-icons into vendor folder.
  2. Add imports into ember-cli-build.js as follows:
app.import("vendor/foundation-icons/foundation-icons.css");
  app.import("vendor/foundation-icons/foundation-icons.woff", {
      destDir: 'assets'
  });
  app.import("vendor/foundation-icons/foundation-icons.ttf", {
      destDir: 'assets'
  });
  1. Remove if declared the link to foundation-icons.css in index.html page.

Thank you for your help.

2 Likes