Question

我将that package与Font Awesome图标一起使用，我可以将它与Polymer一起使用。我想在<paper-menu-button>标签中使用它。可能吗？我怎样才能做到这一点？我尝试添加icon="fa-save"参数，但它不起作用......

我的代码看起来：

      <core-toolbar id="mainheader">
        <paper-menu-button icon="fa-save" class="white" halign="left" valign="bottom">
          <core-item label="Visibility"></core-item>
          <core-item label="Extension"></core-item>
          <core-item label="Info"></core-item>
        </paper-menu-button>
      </core-toolbar>

Answer 1

需要使用<core-iconset>元素使图标可用，以便与icon属性一起使用。 http://www.polymer-project.org/docs/elements/core-elements.html#core-iconset

更新

我刚刚发布了包BWU FontAwesome IconsetSvg for core-elements and paper-elements。

它适用于您的示例。您可以直接使用它或将其用作示例如何为纸张元素和核心元素创建自己的图标集

渲染质量（在Chrome中）可能会更好，但似乎已修复http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Answer 2

GünterZöchbauer的绝佳选择。我采用了一种不同的方法，其中所有SVG字形都在一个元素文件中定义。请参阅Font-Awesome Polymer Iconset。

当然，该文件太大而无法在生产中使用，因此您可能希望使用此python script生成子集。

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

Answer 4

您可以使用该包将FontAwesome用作聚合物组件中的图标：https://pub.dartlang.org/packages/polymer_fontawesome

如果你使用dart-polymer-1或者不想使用聚合物的凉亭，这是很好的方法。

看起来像：

<iron-icon icon="fa:eye"></iron-icon>

聚合物 - 在pager-menu-button中使用Font Awesome图标

4 个答案:

更新