1

我正在使用 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 注入有效,但 font-awesome 并没有将它扩展到 svg。这是一个可能的时间问题吗?

我已经尝试使用 font-awesome(js 和 css)的 CDN 版本和本地版本来查看这是否可能是问题所在,但事实并非如此。

Javascript 片段

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);
});
<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>

4

1 回答 1

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');

更多信息请查看官方文档

于 2019-01-24T10:06:44.963 回答