# How to integrate Font Awesome inside Stenciljs

**URL:** <https://forum.ionicframework.com/t/how-to-integrate-font-awesome-inside-stenciljs/172586>\
**Category:** Stencil\
**Created:** [September 5, 2019, 2:59pm UTC](https://forum.ionicframework.com/t/how-to-integrate-font-awesome-inside-stenciljs/172586 "2019-09-05T14:59:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JEricaM](https://avatars.discourse-cdn.com/v4/letter/j/b77776/32.png) [@JEricaM](https://forum.ionicframework.com/u/JEricaM)\
**Post date:** [September 5, 2019, 2:59pm UTC](https://forum.ionicframework.com/t/how-to-integrate-font-awesome-inside-stenciljs/172586/1 "2019-09-05T14:59:56Z")

</div>

**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](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.

---

<div class="post-metadata">

**Author:** ![drygnet](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@drygnet](https://forum.ionicframework.com/u/drygnet)\
**Post date:** [February 23, 2020, 9:25pm UTC](https://forum.ionicframework.com/t/how-to-integrate-font-awesome-inside-stenciljs/172586/2 "2020-02-23T21:25:54Z")

</div>

I made a demo repo for using icons in stenciljs here:

> **[drygnet/stenciljs-icons-example](https://github.com/drygnet/stenciljs-icons-example)**
>
> Using FontAwesome, Office UI Fabric and Material -icons in stenciljs - 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”)

---

<div class="post-metadata">

**Author:** ![Ponomarenko](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@Ponomarenko](https://forum.ionicframework.com/u/Ponomarenko)\
**Post date:** [July 18, 2020, 3:51pm UTC](https://forum.ionicframework.com/t/how-to-integrate-font-awesome-inside-stenciljs/172586/3 "2020-07-18T15:51:17Z")

</div>

with Stenciljs 1.9, was ok to embed all.css into styleUrls, with migration to 1.16, all.css stopped to work, have include right to css file