Font Awesome don't work correctly

[JEricaM]

Stencil version:

 @stencil/core@1.3.0 

I'm submitting a: [x] bug report [ ] feature request [ ] support request

Current behavior:

I want to use font awesome inside my Stencil component. To do this I followed this guide https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers and referenced the icon inside my code with <i class="fas fa-camera"></i> but I don't see any Icon.

Expected behavior: I expect that the icon show correctly.

Steps to reproduce: 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>
    );
  }
...

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

[AlexSerrano22]

Hi, @JEricaM, I did something different to work with font awesome. first I created a font awesome component, you could see an example here: font-awsome-react-component that is a component for React but you can follow the same approach. in the SCSS file of this component, I included the font awesome styles.

then I copy the fonts on my file system:

and I included on my pages. <link rel="stylesheet" href="/fontAwesome/font-awesome.css" /> this define the font face.

and using the font-awesome-component I can use the icons.

[JEricaM]

Thank you so much, I'll try this :D

[manucorporat]

Stencil serves the www folder as the root, so it’s not possible to go down to ../node_modules, instead you can add a copy task to your www output target to copy font-awesome into your www folder

[drygnet]

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

without inserting anything on index.html (my use case does not allow it and i like my components "self-contained")

[abhilashdonepudi]

drygnet,

Your example is working in dev. Not working in prod. Any insight ?

[drygnet]

drygnet,

Your example is working in dev. Not working in prod. Any insight ?

Do you install the font files in the webfonts-directory ?

What errors do you get in the console?

[tiagoboeing]

@drygnet Your example works for scoped components, but not when using Shadow DOM (default). 😐

[drygnet]

@drygnet Your example works for scoped components, but not when using Shadow DOM (default). 😐

@tiagoboeing that is true, you would need to merge the font-css with the font-face and then put that css in the component. Example of inline font can be found in the fabric-inline-css. https://github.com/drygnet/stenciljs-icons-example/blob/master/src/assets/fabric/css/fabric-icons-inline.css

but any font-file could be base64-encoded and inlined in your css, my use case does not require shadow Dom

[NoelLH]

I know this is an old issue, but wanted to jump in with something I tried recently to load FontAwesome (6) icons with just SVGs: partly in case it's helpful, and also in case anyone sees any big performance or maintainability problems with this approach! We haven't done it in an app in anger yet and I'm not really sure what the impact on bundled size will be compared to using fonts. It feels cleaner than needing fonts but maybe it's a terrible idea!

Here's a real snippet, where getBeneficiaryIcons() is a fn returning IconDefinition[] from @fortawesome/fontawesome-svg-core. We variously import specific icons from @fortawesome/**-icons (some pro, some free) and this part mirrors an approach we've already used in Angular components directly.

In the Angular version we render with angular-fontawesome. To get to a similar outcome in Stencil components I've done this DIY approach, taking the SVG path from the library:

{this.getBeneficiaryIcons().map(iconDefinition => (
  <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512">
    <path d={iconDefinition.icon[4].toString()} />
  </svg>
))}

Here's a whole sample component in the context of the open repo.

Any reactions + ideas welcome!