4

Stencil version:

 @stencil/core@1.3.0

I want to use font awesome inside my Stencil component.

I followed these steps https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

1 - Create a "Stencil component starter" project

2 - Install fontawesome npm install --save-dev @fortawesome/fontawesome-free

3 - I've referenced font awesome inside 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 - I've added the icon inside my component

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

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

I'm not able to include font awesome inside my stencil component. I'm stuck here.

JEricaM
  • 752
  • 2
  • 14
  • 31

2 Answers2

2

Basically this problem is not only related to font-awesome and stenciljs its a general "custom-font" with "web-components" problem. Here is a link to the thread with working solution. I Tried it out by myself works perfectly.

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

Christian Meyer
  • 1,139
  • 1
  • 12
  • 18
0

I made a demo repo for using icons in stenciljs here: https://github.com/drygnet/stenciljs-icons-example

Example components with different approaches for:

FontAwesome, Office UI Fabric and Material Icons

Johan Blomgren
  • 598
  • 3
  • 10