0
230
ViewsHow to change a FontA. icon to another one that has the same class name
I've been trying to a FontA. icon to another one that has the same class name. What I tried was to add a class name named "active". Because there were only two icons to change back and forth, I thought HTML can show an icon I want by checking if the icon has "active". When the icon has "active", then I want to display it, but if not, I don't need to. I think the problem is that they have the same class names.
The JS displayed this problem.
Also, there is only one way to hide an element?? Even if I added these below,
opacity: 0;
visibility: hidden;
I saw blank space on a page. I didn't like it, so I wrote display: none; instead. But, I just wanna know there are some other ways to hide an element.
1 answers
Answer question0
I won't understand your query well, But as much as I understand you want to change the icon of using js.
It can be done using CSS only.
"Just use className.active to simply change the styling of the class Element. 'Eg:- .bi-list.active' It will change the style only on the class which has .active as its class item."
For CSS Only having Same Cl
let icon1 = document.querySelectorAll('.bi')[0];
let icon2 = document.querySelectorAll('.bi')[1];
function changeIcon(){
icon1.classList.toggle('active');
icon2.classList.toggle('active');
}i{
display:none;
}
i.active{
display:inline;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
</head>
<body>
<span>
<i class="bi bi-list active" onclick="changeIcon()"></i>
<i class="bi bi-x-lg" onclick="changeIcon()"></i>
</span>
</body>ass name
For Javascript:
let icon = document.querySelector('.bi-list');
function ChangeIcon(){
if(icon.classList.item(1) == "bi-list"){
icon.classList.remove("bi-list");
icon.classList.add("bi-x-lg");
}
else{
icon.classList.remove("bi-x-lg");
icon.classList.add("bi-list");
}
}.menu .bi{
color:blue;
display:inline;
}<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
</head>
<body>
<span class="menu">
<i class="bi bi-list" onclick="ChangeIcon()"></i>
<!--<i class="bi bi-list active" onclick="ChangeIcon()"></i>
<i class="bi bi-x-lg"></i>-->
</span>
</body>
</html>And For the same classes, You can use document.querySelectorAll('.bi')[0] for accessing 1st element and ('.bi')[1} for accessing 2nd element.
If you want me to change anything in this code, Let me know!