CODEWITHSUNDEEP
javascripthtmlfont-awesome
user10278089
user10278089

Reputation:

Switching between font awesome icons

I'm trying to switch between icons using the unicode. I'm not sure what i'm doing wrong, I've tried switching using their className instead, that didn't work for me either, any answers are appreciated. (I would like to use vanilla javascript only no jquery)

const burger = document.getElementById('toggle');

burger.addEventListener('click', (e) => {
  const tog = e.target;
  if (tog.innerHTML === "&#xf0c9") {
    nav.style.display = "flex";
    tog.innerHTML = "&#xf00d";
  } else {
    nav.style.display = "none";
  }

});
<header class="navbar">
  <i class="fa" id="toggle">&#xf0c9</i>

  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Search</a>
  </nav>
</header>

Upvotes: 0

Views: 734

Answers (2)

user3589620
user3589620

Reputation:

@AlexandreJ provided a solution.

But what, if you want to run a function with a particular CSS class and run another function with another CSS class?

You could do something like this:

// fa-bars <-> fa-close

function toggleBetweenTwoClasses(el, c1, c2) {
  var currentClass = el.getAttribute("class");
  var newClass;
  if (currentClass.indexOf(c1) !== -1) {
    newClass = currentClass.replace(c1, c2);
    // Do stuff 1
  }
  if (currentClass.indexOf(c2) !== -1) {
    newClass = currentClass.replace(c2, c1);
    // Do stuff 2
  }
  el.setAttribute("class", newClass);
}

function myToggleBetweenTwoClasses(el, c1, c2) {
  toggleBetweenTwoClasses(document.getElementById("toggle"), "fa-bars", "fa-close");
}

var icon = document.getElementById("toggle");


icon.addEventListener("click", myToggleBetweenTwoClasses);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<header class="navbar">
  <i class="fa fa-bars" id="toggle"></i>
  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Search</a>
  </nav>
</header>

Upvotes: 1

AlexandreJ
AlexandreJ

Reputation: 11

Switch between classes with classList.toggle 

let burger = document.getElementById('mybtn');

function toggleBetweenClasses(el, c1, c2) {
  el.classList.toggle(c1);
  el.classList.toggle(c2);
}

function myToggleBetweenClasses(el, c1, c2) {
  toggleBetweenClasses(burger, "fa-bars", "fa-times");
}

burger.addEventListener('click', myToggleBetweenClasses);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="fas fa-bars" id="mybtn"></i>

Upvotes: 1

Related Questions