Use font awesome inside an HTML 5 Web Component

Question

I am getting started with HTML5 Web Components. I am using the pollyfill webcomponents.js and using chrome for development. How can I get font awesome to work inside a web component. I have tried both the cdn and the script tag they provide. I thought this would work:(but it didn't, also I omitted the js for brevity)

.wrapper {
  height: 100%;
  width: 100%;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
}
.month-title {
  height: 20%;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.day-body {
  height: 70%;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#title {
  height: 10%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
}
#monthTitle {
  flex-grow: 1;
  background-color: #4cff00;
}
.month-button {
  background-color: #ffd800;
}

<script src="https://use.fontawesome.com/4483f1d3f2.js"></script>

<div class="wrapper snow">

  <div id="title">

    <div id="leftButton" class="month-button">

      <i class="fa fa-chevron-left"></i>


    </div>

    <div id="monthTitle">

    </div>

    <div id="rightButton" class="month-button">

      <i class="fa fa-chevron-right"></i>


    </div>

  </div>

  <div class="month-title">

  </div>

  <div class="day-body">

  </div>

</div>

The code looks just fine. Did you try downloading font awesome files and then use it? That will narrow the problem down. — Gourav Chawla, May 12 '16 at 03:16
The code snippet above seems to be working fine. The right and left arrows are showing here if you run it. Did you check it? Isn't that what you want? — Gourav Chawla, May 12 '16 at 03:21
This is inside a web component in the shadow dom. Its not just in a page. — Michael W Riemer Jr, May 12 '16 at 04:36
heres a [similar question](https://stackoverflow.com/questions/54546007/why-doesnt-font-awesome-work-in-my-shadow-dom) — dcts, Mar 21 '20 at 01:24

score 0 · Answer 1 · answered May 12 '16 at 03:26

I think you wanted this (replaced cdn) :

.wrapper {
  height: 100%;
  width: 100%;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
}
.month-title {
  height: 20%;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.day-body {
  height: 70%;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#title {
  height: 10%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
}
#monthTitle {
  flex-grow: 1;
  background-color: #4cff00;
}
.month-button {
  background-color: #ffd800;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="wrapper snow">

  <div id="title">

    <div id="leftButton" class="month-button">

      <i class="fa fa-chevron-left" aria-hidden="true"></i>

    </div>

    <div id="monthTitle">

    </div>

    <div id="rightButton" class="month-button">

      <i class="fa fa-chevron-right" aria-hidden="true"></i>


    </div>

  </div>

  <div class="month-title">

  </div>

  <div class="day-body">

  </div>

</div>

if you go to font-awesome now they don't give you the link to the cdn. They email you the script tag. Also this is inside a web component. The client dom is encapsulated. That is the real problem I am having. — Michael W Riemer Jr, May 12 '16 at 04:37

Use font awesome inside an HTML 5 Web Component

1 Answers1