在 HTML 5 Web 组件中使用 font awesome

Posted 2023-03-06

【中文标题】在 HTML 5 Web 组件中使用 font awesome

【英文标题】：Use font awesome inside an HTML 5 Web Component

【发布时间】：2016-09-07 16:13:48

【问题描述】：

我开始使用 html5 Web 组件。我正在使用pollyfill webcomponents.js 并使用 chrome 进行开发。如何让字体真棒在 Web 组件中工作。我已经尝试过他们提供的 cdn 和 script 标签。我认为这会起作用:(但它没有，为了简洁我也省略了js）

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

【问题讨论】：

代码看起来还不错。您是否尝试下载字体真棒文件然后使用它？这将缩小问题范围。

上面的代码 sn-p 似乎工作正常。如果你运行它，这里会显示左右箭头。你检查了吗？这不是你想要的吗？

这是在 shadow dom 的 web 组件中。它不只是在一个页面中。

@MichaelWriemerJr 你现在找到解决方案了吗？

这是similar question

【参考方案1】：

我想你想要这个（替换 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>

【讨论】：

如果你现在去 font-awesome，他们不会给你 CDN 的链接。他们通过电子邮件向您发送脚本标签。这也位于 Web 组件内部。客户端 dom 被封装。这是我真正遇到的问题。