使用 Javascript 操作 FontAwesome

Question

我正在做一个小项目，以了解更多关于 Javascript 的知识，以便将来可以处理 svg 动画。

现在我正在开发一个按钮，当你点击它时会改变他的输入。

circle = document.getElementById('circle');
$remove = document.getElementById('remove');
remove.style.display = "block";
$undo   = document.getElementById('undo');
undo.style.display = "none";

circle.onclick = function() {
  remove.style.display = "none";
  undo.style.display   = "block";
}

.circle {
  width: 200px; height: 200px;
  background-color: #10ac84;
  border-radius: 50%;
} 
.circle svg  { font-size: 1.5em; }

<div class="circle" id="circle">
  <i class="fas fa-trash-alt" id="remove"></i>
  <i class="fas fa-undo" id="undo"></i>
</div>

将它放入 sn-p 有点困难，因为我无法加载字体 awesome cdn。

-|我要做什么 |-

当您进入该页面时，该圆圈将在垃圾桶上显示一个图标。 当用户单击圆圈时，垃圾桶将消失，撤消图标将出现。 这是为了删除我的应用程序中的一个项目，并在您想要它时撤消它。

-|问题 |-

我可以删除 FontAwesome 图标并为其添加样式吗？因为它会转换成SVG的

我希望我已经解释得很好，并且有人可以帮助我。

项目：http://www.projectnova.nl/changeClick/

Answer 1

确保在使用SVG with JavaScript 方法时定位正确的元素。替换后不会有<i>供您选择。

Font Awesome 使用 mutation observers 知道在您更改类后何时需要更改 SVG。

document.getElementsByTagName("button")[0].addEventListener("click", evt => {
  const icon = evt.currentTarget.querySelector("svg");
  if (icon.classList.contains("fa-user")) {
    icon.classList.remove("fa-user");
    icon.classList.add("fa-github-square");
  } else {
    icon.classList.remove("fa-github-square");
    icon.classList.add("fa-user");
  }
});

<script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js" integrity="sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR" crossorigin="anonymous"></script>

<button><i class="fas fa-user"></i></button>

Answer 2

请注意，此方法仅在使用带有 CSS 的 Font Awesome 时有效。要将 JavaScript 与 SVG 方法一起使用，请查看其他答案。

如果您使用单个 i 标记并动态更改图标 class，这将更容易实现。

例如：

<div class="circle">
    <i class="fas fa-trash-alt" id="remove"></i>
</div>

然后您只需在 fa-undo 和 fa-trash-alt 类之间切换。

// select the element
var removalIcon = document.querySelector("#remove");

// add event listener
removalIcon.addEventListener("click", function () {
    this.className = "fas fa-undo";
});