Where to put Foundation Icons CSS

Design
1

I can’t figure out where to put the Foundation Icons in an Ember app. :(.

  1. I unzipped the icons archive and copy-pasted the entire fonder into vendor directory of the Ember project.
  2. I added the import to the ember-cli-build.js as follows:
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-foundation-6-sass': {
      'foundationJs': 'all'
    }
  });

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

  return app.toTree();
};
  1. Trying to access an icon as follows in application.hbs failed:

<li><a href="#"><i class="fi-list"></i><span>Four</span></a></li>

Can you tell me the right place to put the CSS and the way to da that right. Thank you.