在HTML 5 Web组件

Question

我开始使用HTML5 Web Components。我正在使用pollyfill webcomponents.js并使用chrome进行开发。如何让字体很棒才能在Web组件中工作。我已经尝试了他们提供的cdn和脚本标签。我认为这样可行:(但它没有，为了简洁我省略了js）

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我想你想要这个（取代cdn）：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;