Font Awesome doesn't work inside of a Stencil JS component

Question

Stencil version: @stencil/core@1.3.0

I want to use Font Awesome inside my Stencil component.

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

1. Create a "Stencil component starter" project
2. Install Font Awesome: npm install --save-dev @fortawesome/fontawesome-free
3. Reference 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. Add the icon inside my component:

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

I'm not able to include font awesome inside my stencil component. I'm stuck here: <i class="fas fa-camera"></i>

Answer 1

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

Answer 2

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

Answer 3

I found an elegant way to integrate font awesome with stencilJS.

1. Install the FontAwesome npm

   npm install --save-dev @fortawesome/fontawesome-free;

2. Then inside your component in your component css file add the @import statement

   @import "~@fortawesome/fontawesome-free/css/all.css";

Documentation: CSS @import

Sample code:

import { Component, Prop, h } from '@stencil/core';


@Component({
    tag: 'my-tooltip',
    styleUrl: 'my-tooltip.css', // add the @import statement inside the CSS file
    shadow: true,
})
export class MyTooltip {

    @Prop() text: string;



    render() {
        return (<div>
            
            <slot />
            --
            <i class="fa-solid fa-circle-question"></i>
            --
        </div>);
    }
}

------ [my-tooltip.css file] -----

@import "~@fortawesome/fontawesome-free/css/all.css";