除非我刷新页面，否则使用 Javascript 生成的 Font Awesome 图标不会显示答案

【问题标题】：Font Awesome Icons generated with Javascript not showing unless I refresh page除非我刷新页面，否则使用 Javascript 生成的 Font Awesome 图标不会显示
【发布时间】：2018-11-28 15:18:24
【问题描述】：

如果我的字体真棒图标像这样直接插入到我的 HTML 代码中，则它们可以在整个应用程序中正常工作：

<div>
  <i class="fas fa-address-book"></i>
</div>

但是当我使用 Javascript 动态添加它们时，除非我刷新页面，否则它们不会出现。例如，除非我刷新页面，否则这将不起作用：

for (i=0; i < fields_number; i++){
  var weight_field = document.createElement('div');
  weight_field.innerHTML = ('<i class="fas fa-address-book"></i>')
  container.appendChild(weight_field);
}

如何在不刷新的情况下显示图标？

更新：这是一个使用 turbolinks 的 rails 5 应用程序。

我正在通过以下方式使用 CDN 添加很棒的字体：

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

【问题讨论】：

应该class="fas ..." 是class="fa ..." 还是fas 有特殊含义？我以前没见过。
@wbadart 这只是 font awesome 在他们的文档中提供的 HTML 代码。
您使用的是哪个版本的 fontawesome？您的代码适用于我的版本 4 (jsfiddle)
@SebastianDelgado FA 现在在 v5 中有 fas，而不是 fa。
请提供更多代码。您的代码适用于我的版本 5 jsfiddle

标签： javascript html ruby-on-rails font-awesome turbolinks

【解决方案1】：

我通过替换我使用的 CDN 解决了这个问题，这是一个脚本，由于某种原因与带有样式表的 turbo-links 冲突。

问题：

  <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

使用 TURBOLINK：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

【讨论】：