2

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');

belgoros
  • 3,590
  • 7
  • 38
  • 76

1 Answers1

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}}

belgoros
  • 3,590
  • 7
  • 38
  • 76
  • 4th step is not required – Ember Freak Jan 30 '18 at 20:05
  • @kumkanillam Nope, if you don't add the step 4, it will not work – belgoros Feb 05 '18 at 08:49
  • You have two choice, either you can place it in public folder and include it in index.html. this alone will work. But this will not be minified and will not be merged with vendor.css. Another choice is placing css in vendor folder and app.importing thats it. no need to define it in index.html in this case. since app.import will include this content in vendor.css and minify it. Please try it and let me know if its not working. – Ember Freak Feb 05 '18 at 09:10
  • @kumkanillam, I moved `foundation-icons` folder to `vendor`directory and removed the link to stylesheet in `index.html`. I modified the import in `ember-cli-build.js`as follows: `app.import('vendor/foundation-icons/foundation-icons.css', { destDir: 'assets' });`. It didn't work. – belgoros Feb 05 '18 at 14:23
  • `{ destDir: 'assets' }` this is not required for app.importing since it will default to vendor.css file. So I assume folder `vendor/foundation-icons` contains only foundation-icons.css file, remaining other stuff you can keep it in public folder itself. – Ember Freak Feb 05 '18 at 14:31
  • @kumkanillam no, keeping just `foundation-icons.css` in `vendor/foundation-icons` foler and the rest in `public` folder and importing just `app.import('vendor/foundation-icons/foundation-icons.css');` didn't wotk. It fails to load `GET /assets/foundation-icons.woff GET /assets/foundation-icons.ttf GET /assets/foundation-icons.woff GET /assets/foundation-icons.ttf` – belgoros Feb 05 '18 at 14:54
  • Reason for this GET request failed, `foundation-icons.css` file referencing and expecting `.ttf` and `.woff` file in the same folder, so in our case `foundation-icons.css` will be included in `vendor.css` and it will be in assets folder. Two solutions either we can change reference in `foundation-icons.css` relative to public folder like `../foundation-icons/foundation-icons.ttf`. or we can include those files too in ember-cli-build.js which I demoed in https://github.com/kumkanillam/foundations-test. Thanks for listening. – Ember Freak Feb 06 '18 at 01:30