Question

如果将字体真棒图标直接插入我的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);
}

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

更新：这是一个使用Turbolink的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>

Answer 1

我通过替换我使用的CDN来解决了这个问题，该CDN是某种原因导致脚本与样式表的Turbo链接冲突的脚本。

问题：

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

使用涡轮链接：

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

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

1 个答案: