2

有人知道如何在 Ember App中启用Foundation Icon Fonts吗？我试图将它放在供应商文件夹中，在公用文件夹中 - 仍然不适用于以下代码示例：

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

我还在 ember-cli-build.js 中添加了上述 CSS 的导入： app.import('vendor/foundation-icons/foundation-icons.css');

4

1 回答 1

1

以下是实现这一目标的方法（如果有更好的方法，总是受欢迎的）：

  1. 从他们的网站下载 Foundation Icon Fonts 存档。
  2. 解压到your_ember_app/public文件夹中。该public文件夹现在包含foundation-icons文件夹。

  3. 将 import 添加到ember-cli-build.jsjust beforereturn app.toTree();语句中，如下所示：

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

  4. 在页面中引用上面的 CSSyour_ember_app/app/index.html如下：

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

  5. 现在一切就绪后，您可以在 Ember 模板中使用图标：

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

于 2018-01-30T15:43:47.207 回答