Ember.js 如何在BooE应用程序中使用基础图标字体

有人知道如何在Ember应用程序中启用吗？我尝试将其放在供应商文件夹中的公用文件夹中，-仍然无法使用以下代码示例：

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

#application.hbs

我还在ember-cli-build.js中添加了上述CSS的导入：

---

app.import（'vendor/foundation icons/foundation icons.css'）
以下是实现这一目标的方法（如果有更好的方法，欢迎使用）：

从他们的./LI>下载基础图标图标存档。
将其解压缩到
您的_ember_app/public
文件夹中。
public
文件夹现在包含
foundation icons
文件夹
在返回app.toTree（）之前将导入添加到
ember cli build.js
声明如下：

app.import（'foundation-icons/foundation-icons.css'）

在
你的_ember_app/app/index.html
页面中参考上述CSS，如下所示：


现在，当一切就绪后，您可以在余烬模板中使用图标：

{{{#链接到'protected'标记名='li'}}受保护的页面{{/link到}
第四步不可用required@kumkanillam不，如果不添加步骤4，它将不起作用。您有两个选择，或者您可以将其放置在公用文件夹中，并将其包含在index.html中。单凭这一点就行。但这不会缩小，也不会与vendor.css合并。另一种选择是将css放置在供应商文件夹和app.importing中。在这种情况下，不需要在index.html中定义它。因为app.import将在vendor.css中包含此内容并缩小它。请尝试一下，如果它不起作用，请告诉我。@kumkanillam，我将
foundation icons
文件夹移动到
vendor
目录，并删除了
index.html
中指向样式表的链接。我在
ember cli build.js
中修改了导入，如下所示：
app.import（'vendor/foundation icons/foundation icons.css'，{destDir:'assets'}）。它不起作用。
{destDir:'assets'}
这对于app.import不是必需的，因为它将默认为vendor.css文件。所以我假设文件夹
vendor/foundation icons
只包含foundation-icons.css文件，其余的东西可以保存在公共文件夹中。