Font Awesome 在 Stenciljs 组件中不起作用

Posted 2023-03-06

【中文标题】Font Awesome 在 Stenciljs 组件中不起作用

【英文标题】：Font Awesome don't work inside Stenciljs component

【发布时间】：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>

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

【参考方案1】：

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

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

【参考方案2】：

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

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

FontAwesome、Office UI Fabric 和 Material 图标