Значки Font Awesome, созданные с помощью Javascript, не отображаются, пока я не обновлю страницу - PullRequest
Новая
       15

Значки Font Awesome, созданные с помощью Javascript, не отображаются, пока я не обновлю страницу

0 голосов
/ 28 ноября 2018

Потрясающие значки моего шрифта работают должным образом во всем приложении, если они вставлены прямо в мой 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);
}

Как сделать так, чтобы значки отображались без обновления?

Обновление: это приложение rails 5, котороеиспользует turbolinks.

, и я добавляю шрифт awesome с использованием CDN следующим образом: 

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

1 Ответ

0 голосов
/ 28 ноября 2018

Я решил эту проблему, заменив использованный CDN, который по какой-то причине конфликтовал с турбо-ссылками с таблицей стилей.

ПРОБЛЕМАТИЧЕСКИЙ: 

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