can two bootstrap icon class name work next to each other (class name priority)?-CodePudding

I have a class name called (bi bi-clipboard), I want to when I click on it to change the class name to (bi-clipboard-check), so the problem is that it added the class name next to the other class name like this:

before clicking:

<i  onclick="changeIcon(this)"></i>

After clicking:

<i  onclick="changeIcon(this)"></i>

Method:

function changeIcon(icon){
    icon.classList.toggle("bi-clipboard-check");
}

I saw somewhere else that was using fontawesome when you click on it, the class toggles by toggle() javascript method, and it works, but mine doesn't work as two class-names are next to each other. any solutions will be appreciated.

CodePudding user response：

If you are able to use jQuery (and you could, since you are using bootstrap) you can just toggle the two classes separately.

See demo below

$(function() {
  $(".bi").on('click', function() {
    $(this).toggleClass("bi-clipboard-check");
    $(this).toggleClass("bi-clipboard");

    console.log($(this).prop('classList').value);
  });
});

.bi {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-color: green;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i ></i>