How to use Foundation Icon Fonts in Ember application

Question

Does anybody know how to enable Foundation Icon Fonts in Ember App ? I tried to put it in vendor folder, in public folder, - still does not work with the below code example:

# application.hbs

<ul class="menu">
      <li><a href="#"><i class="fi-list"></i><span>One</span></a></li>
      <li><a href="#"><i class="fi-list"></i><span>Two</span></a></li>
      <li><a href="#"><i class="fi-list"></i><span>Three</span></a></li>
      <li><a href="#"><i class="fi-list"></i><span>Four</span></a></li>
    </ul>

I also added the import of the above CSS in ember-cli-build.js: app.import('vendor/foundation-icons/foundation-icons.css');

Answer 1

Here is how to achive that (if there is a better way to that, it is always welcome):

1. Download Foundation Icon Fonts archive from their site.
2. Unzip it into your_ember_app/public folder. The public folder now contains foundation-icons folder.

3. Add import to ember-cli-build.js just before return app.toTree(); statement as follows:

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

4. Reference the above CSS in your_ember_app/app/index.html page as follows:

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

5. Now when everything is in place, you can use an icon in your Ember templates:

{{#link-to 'protected' tagName='li'}} <a><i class="fi-list"></i><span>Protected Page</span></a> {{/link-to}}