Font Awesome 在 Stenciljs 组件中不起作用答案

【问题标题】：Font Awesome don't work inside Stenciljs componentFont Awesome 在 Stenciljs 组件中不起作用
【发布时间】：2020-01-08 12:24:18
【问题描述】：

模板版本：

 @stencil/core@1.3.0

我想在我的 Stencil 组件中使用很棒的字体。

我按照这些步骤https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

1 - 创建一个“Stencil 组件启动器”项目

2 - 安装 fontawesome npm install --save-dev @fortawesome/fontawesome-free

3 - 我在 src/index.html

中引用了很棒的字体

<script src="../node_modules/@fortawesome/fontawesome-free/css/all.css"></script>
    <script src="../node_modules/@fortawesome/fontawesome-free/js/all.js"></script>

4 - 我在组件中添加了图标

...
  render() {
    return (
      <button>
        <i class="fas fa-camera"></i>
      </button>
    );
  }
...

5-<i class="fas fa-camera"></i>

我无法在我的模板组件中包含很棒的字体。我被困在这里了。

【问题讨论】：

标签： font-awesome stenciljs

【解决方案1】：

基本上，这个问题不仅与 font-awesome 和 stenciljs 有关，它是一个带有“web-components”问题的一般“custom-font”。这是带有工作解决方案的线程的链接。我自己试了一下，效果很好。

https://stackoverflow.com/a/57623658/8196542

【讨论】：

【解决方案2】：

我在这里制作了一个在 stenciljs 中使用图标的演示仓库： https://github.com/drygnet/stenciljs-icons-example

具有不同方法的示例组件：

FontAwesome、Office UI Fabric 和 Material 图标

【讨论】：