Question

模具版本：

 @stencil/core@1.3.0

我想在我的Stencil组件内使用超棒的字体。

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

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

2-安装字体很棒的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>

我无法在模板组件中添加超棒的字体。我被困在这里。

Answer 1

基本上，此问题不仅与字体超赞有关，而且还与stenciljs一起是带有“网络组件”问题的通用“自定义字体”。那些有这种问题的人不必花很长时间搜索，所以我在这里发布了带有解决方案的线程链接：

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

Answer 2

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

使用不同方法的示例组件：

FontAwesome，Office UI织物和材质图标

Awesome字体无法在Stenciljs组件中使用

2 个答案: