Question

我使用Javascript配置页面，根据JSON数据选择并注入不同的图标。有时，在页面刷新之前，一个或多个注入的图标不会出现。我发现Firefox在所有图标上都失败了，但刷新后Chrome就可以了。

如果我检查DOM，我可以看到缺少的元素在HTML中

<i id="live-icon" class="fas fa-check fa-2x"></i>

而工作元素显示为

<svg id="airdrop-icon" class="svg-inline--fa fa-times-circle fa-w-16 fa-2x" aria-hidden="true" data-prefix="fas" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
<!-- <i id="airdrop-icon" class="fas fa-times-circle fa-2x"></i> -->

所以看起来我的DOM注入工作，但字体真棒并没有将它扩展到svg。这是一个可能的时间问题吗？

我尝试使用CDN版本的font-awesome（js和css）和本地运行来查看是否可能是问题，但事实并非如此。

Javascript片段

＆＃13;

const liveIcon = 'fas fa-check fa-2x';
const notLiveIcon = 'fas fa-times-circle fa-2x';
const liveColor = 'green';
const notLiveColor = 'red'

function SetElementIconById(id, icon) {

  const i = document.getElementById(id);
  i.setAttribute('class', icon);
}

function SetElementColorById(id, color) {
  const span = document.getElementById(id);
  const bg = document.getElementById(id);
  bg.setAttribute('class', bg.getAttribute('class') + ' ' + color);
}

document.addEventListener("DOMContentLoaded", function(event) {

  SetElementColorById('live-color', liveColor);
  SetElementColorById('live-body-color', liveColor + " darken-2")
  SetElementIconById('live-icon', liveIcon);
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<!-- Live -->
<div class="col s12 m6 l4">
  <div id="live-color" class="card white-text hoverable tooltipped center-align" data-position="top" data-delay="50" data-tooltip="Live date">
    <div class="card-content vtiny">
      <h5 style="font-weight: 300"><i class="fas fa-heartbeat fa-sm"></i> Live</h5>
    </div>
    <div id="live-body-color" class="card-content vtiny">
      <p><i id="live-icon"></i></p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用fa SVG符号。

在您的页面中：

<i data-fa-symbol="delete" class="fas fa-trash fa-fw"></i>

图像已加载并转换为svg，可以在页面的任何位置（HTML或JS）重复使用。

然后，您可以像这样在页面中使用它（以避免多次执行将其转换为svg的javascript代码）：

<svg><use xlink:href="#delete"></use></svg>

您可以像在javascript上那样使用它（此处是jQuery）：

$("#selector").append('<svg><use xlink:href="#delete"></use></svg>Remove');

有关更多信息，请检查official documentation

使用Javascript向DOM注入Font-Awesome图标直到页面刷新才显示

1 个答案: