Polymer 2 中的字体真棒答案

【问题标题】：Font-awesome in Polymer 2Polymer 2 中的字体真棒
【发布时间】：2018-05-10 15:30:18
【问题描述】：

我想使用 fontawesome 图标。我有以下网络组件，但未显示图标：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<dom-module id="mi-icono">
  <template>
    <i class="fas fa-address-card"></i>
    <i class="fas fa-trash-alt"></i>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class MiIcono extends Polymer.Element {
      static get is() { return 'mi-icono'; }
      static get properties() {
        return {};
      }
    }

    window.customElements.define(MiIcono.is, MiIcono);
  </script>
</dom-module>

有谁知道为什么不显示图标？

【问题讨论】：

我也有同样的问题，如果您找到解决方案，请告诉我。我对这两个答案都投了反对票，因为您使用的是 SVG + JS FA 图标（就像我一样）并且他们使用的是纯 css + webfonts，这不是您的问题，也不是您的代码中的纯 JS ......我认为它与shadow-root，因为 JS 可以使用任何聚合物 dom 模块之外的图标..

标签： font-awesome polymer-2.x

【解决方案1】：

首先，创建一个样式导入文件：(import.html)

<link rel="import"      href="../../bower_components/polymer/polymer-element.html">
<link rel="stylesheet"  href="css/fa-regular.min.css">

<dom-module id="font-awesome">
  <template>
    <style>
      <!-- TODO: Paste contents of fontawesome-all.css here! -->
      <!-- TODO: Update paths in pasted content to match directory structure -->
      <!-- Would be awesome to use @import here but it doesn't work? -->
    </style>
  </template>
</dom-module>

现在您可以在应用程序中导入文件：

<link rel="import" href="../../lib/fontawesome-5.0.6/import.html">

一定要在任何你想使用图标的地方包含导入：

<dom-module id="my-super-cool-polymer-app">
  <template>
    <style include="font-awesome">
      <!-- etc -->

【讨论】：

HTML 导入已弃用。这是唯一的方法吗？

【解决方案2】：

看起来 font-awesome.css 被加载到了你的元素之外，所以 shadow dom 然后隐藏了is，这样没有文档级 CSS 可以设置它的样式。

在聚合物 2 和 font-awesome 4.7 中对我有用的是在 dom-module 中包含 css：

<dom-module id="demo">

<!-- this is deprecated but still works in v2:
https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#external-stylesheets-->
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <template>
    <i class="fa fa-caret-up"></i>
  </template>

</dom-module>

刚刚对其进行了测试，并且在 IE (11+)、FF、Safari 11、Chrome v53- 中运行良好，但从 Chrome v54 开始，插入符号无法正确呈现：

当 font-awesome.css 也包含在主文档中时，这在 Chrome 中可以正常工作吗？！

【讨论】：