Манипулируйте FontAwesome с помощью Javascript - PullRequest
Новая
       12

Манипулируйте FontAwesome с помощью Javascript

0 голосов
/ 08 мая 2018

Я работаю над небольшим проектом, чтобы узнать больше о 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>

Немного сложно поместить его во фрагмент, потому что я не могу загрузить шрифт.

- | Что я пытаюсь сделать | -

При входе на страницу у кружка будет значок на мусорной корзине. Когда пользователь нажимает на кружок, мусорная корзина исчезает, и появляется значок отмены. Это для удаления элемента в моем приложении и отмены его, когда вы хотите его вернуть.

- | Вопрос | -

Можно ли удалить и добавить стиль для значков FontAwesome? Потому что он превратится в SVG

Надеюсь, я хорошо это объяснил и кто-то может мне помочь.

Проект: http://www.projectnova.nl/changeClick/

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Убедитесь, что вы указали правильный элемент, когда используете метод SVG с JavaScript . После замены вы не сможете выбрать <i>.

Font Awesome использует наблюдателей мутаций , чтобы узнать, когда необходимо изменить 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>
0 голосов
/ 08 мая 2018

Имейте в виду, этот метод работает только при использовании Font Awesome с CSS. Чтобы использовать метод 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";
});
...