Font Awesome 无法在 Stencil JS 组件内部工作

Question

模板版本： @stencil/core@1.3.0

我想在我的 Stencil 组件中使用 Font Awesome。

我按照以下步骤进行操作https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

1. 创建“Stencil 组件入门”项目
2. 安装真棒字体：npm install --save-dev @fortawesome/fontawesome-free
3. 参考 Font Awesome 里面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>
        );
      }

我无法在我的模板组件中包含很棒的字体。我被困在这里：<i class="fas fa-camera"></i>

Answer 1

基本上这个问题不仅与 font-awesome 和 stenciljs 有关，它是一个一般的“自定义字体”和“网络组件”问题。这是包含工作解决方案的线程的链接。我自己尝试了一下，效果非常好。

/sf/answers/4033656091/