使用Javascript操作FontAwesome [英] Manipulate FontAwesome with Javascript

问题描述

我正在做一个小项目，以了解有关Javascript的更多信息，以便将来可以处理svg动画.

I'm working on a little project to learn more about Javascript so I can work on svg animations in the future.

现在我正在使用一个按钮，单击该按钮将更改他的输入.

Now I'm working on a button that will change his input when you click on it.

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>

将其放在摘要中有点困难，因为我无法加载字体真棒的CDN.

It's a little hard to put it in a snippet because I can't load the font awesome cdn.

-|我正在尝试做的事情|-

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

When you enter the page the circle will have an icon on a trashcan. When the user clicks the circle the trashcan will disappear and the undo icon will show up. This is for removing an item in my application and undo it when you want it back.

-|问题|-

我可以删除字体样式并将其添加到FontAwesome图标吗?因为它将转化为SVG的

Can I remove and add style to FontAwesome icons? Because it will transform into SVG's

我希望我已经解释清楚了，希望有人可以帮助我.

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

推荐答案

请确保每当您使用

Make sure to target the right element whenever you use the SVG with JavaScript method. There won't be an <i> for you to select after the replacement.

Font Awesome使用变异观察者知道何时更改类后，需要更改SVG.

Font Awesome uses mutation observers to know when it needs to change the SVG after you change the class.

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>

这篇关于使用Javascript操作FontAwesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！