Question

现在不推荐使用applyAuthorStyles，不再显示font-awesome图标。这个问题how to incorporate font awesome in a dart component?有一些有用的信息，但我无法获得未经测试的建议。

这是一个非常简单的抵押贷款计算器组件项目的模板：

<polymer-element name="plus-payment-schedule">
  <template>
    <style>
    </style>
      <fieldset>
        <legend>Payment Schedule</legend>
        <label><span class="fa fa-calendar fa-fw" style="width:1.5em"></span> Start Date</label>
        <plus-date-input id="date"></plus-date-input>
        <div class="payment-schedule">
          <table id="schedule_table">
          </table>
        </div>
      </fieldset>
  </template>
  <script type="application/dart" src="payment_schedule.dart"></script>
</polymer-element>

在聚合物0.10.0之前，使用建议的 applyAuthorStyles 补丁，此代码有效。意思是，通过应用那些字体很棒的类（ class =＆＃34; fa fa-calendar fa-fw＆＃34; ），出现了字体很棒的图标。我已删除 applyAuthorStyles 并进行了更新所需的其他聚合物初始化更改。该组件工作正常，除了字体 - 真棒图标不再显示。

当我运行这个抵押贷款计算器app并查看检查员时，我看到这些类适用于跨度。所以我想问题是类的定义（fa fa-calendar fa-fw）不可用？

有关如何使此特定方案有效的任何信息？

该组件已托管here

Answer 1

不推荐使用applyAuthorStyles。因此，您必须在<template>中包含样式表。

问题在于@font-face目前在聚合物元素内部不起作用。解决方案是在常规文档中包含@font-face并将类添加到聚合物中或在两个地方都包含font-awesome.css。

这应该解决它。

另见： - https://code.google.com/p/dart/issues/detail?id=18581 - https://github.com/Polymer/docs/issues/434

问候，罗伯特

Answer 2

考虑使用Font-Awesome Polymer Iconset或使用this generator

生成您自己的子集

您可以在核心图标和其他基于图标的元素中使用FA，如下所示：

<core-icon icon="fa:calendar"></core-icon>

Answer 3

有一个元素。

使用此：https://www.npmjs.com/package/fontawesome-iconset：

从fa-icons.html
将其放入新的iron-iconset-svg
导入iron-iconset-svg和iron-icon
像其他iron-icon

您可以在此处查看使用方法：https://elements.polymer-project.org/elements/iron-icon

<span>中的font-awesome聚合物“＆gt; 0.10.0”</span>

3 个答案: