Font Awesome 在 Stenciljs 组件中不起作用

Question

模板版本：

 @stencil/core@1.3.0

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

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

1 - 创建一个 "Stencil component starter" 项目

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。我被困在这里了。

Answer 1

基本上这个问题不仅与 font-awesome 和 stenciljs 有关，它还是一个带有“web-components”问题的一般“自定义字体”。这是带有工作解决方案的线程的 link。我自己试了一下，完美无缺

Answer 2

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

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

FontAwesome、Office UI Fabric 和 Material 图标

Font Awesome 在 Stenciljs 组件中不起作用

Font Awesome don't work inside Stenciljs component

font-awesome

stenciljs