How to Change the Symbol When Click in CSS

Change Icon after clicking it and also when we click on other button in html

You can find your element by using Javascript getElementById method.

function anotherButtonClick() {
var el = document.getElementById("mailBTN");
el.classList.toggle('fa-envelope-open-text');
}

Then you can toggle your classList as you did for other button before.

HTML CSS - Make icon change color when clicked (like a link)

:visited is a link-related pseudo-class. It must be applied to the <a> tag.

.visit {
fill: lightblue;
}

a:visited .visit { /* Fix here */
fill: green;
}
<a href="#"><svg>
<rect width='300' height='100' class='visit'></rect>
</svg></a>

How do I change the icon on click in this example?

For the code pen example you provided, you can add an id to your <i> tag (<i id="icon">) and include this code in the toggleDiv method to change the icon.

HTML:

<a href="#" onclick="togglediv('item')">
button <i id="icon" class="fas fa-chevron-right"></i>
</a>

JS:

function togglediv(id) {
var div = document.getElementById(id);
div.style.visibility = div.style.visibility == "hidden" ? "hidden" : "visible";
div.style.opacity = div.style.opacity == "0" ? "1" : "0";

var icon = document.getElementById("icon");
icon.classList.toggle('fa-chevron-right');
icon.classList.toggle('fa-chevron-left');
}


Edit: Fix for issues where div does not show up on the first click.

CSS:

.right-side {
background: yellow;
padding: 30px;
display: inline-block;
width: auto;
transition:visibility 0.3s linear,opacity 0.3s linear;
position: absolute;
min-height: 100%;
}

.hide-div {
opacity: 0;
visibility: hidden;
}

.show-div {
opacity: 1;
visibility: visible;
}

HTML:

<div class="right-side hide-div" id="item">
text goes here
<p>text goes here</p>
<p>text goes here</p>
<p>text goes here</p>
</div>

JS:

var div = document.getElementById(id);
div.classList.toggle('hide-div');
div.classList.toggle('show-div');

How to change appearance of a symbol with CSS ? For eg. In my calculator i used operator(+,-,/,%,*) but the multiple (*) looks bad

Replace * with × in the HTML and do
string = string.replace('×', '*')
before running
eval(string);

Update: It's now working with fontawesome divider, but you don't need to use that. You can directly use this character ÷ and then replace by /, like we did for ×. I recommend that approach instead.

let string = "";
let buttons = document.querySelectorAll('.keys');

Array.from(buttons).forEach((keys) => {
keys.addEventListener('click', (e) => {
if (e.target.innerHTML == '=') {
string = string.replace('×', '*') // <--- add this
string = eval(string);
document.querySelector('input').value = string;
}
else if (e.target.innerHTML == 'C') {
string = ""
document.querySelector('input').value = string;
}
else if (e.target.innerHTML == 'backspace') {
string = document.querySelector('input').value
document.querySelector('input').value = string.substring(0, string.length - 1);
string = ""
}
else {
console.log(e.target)
string = string + `${e.target.dataset.operator || e.target.innerHTML}`;
document.querySelector('input').value = string;
}
})
})


// var value = document.getElementById("d").value;
// document.getElementById("d").value = value.substr(0, value.length - 1);
* {
margin: 0;
padding: 0;
}

body {
background-color: blanchedalmond;
}

.bcg {
margin: auto;
margin-top: 35px;
background-color: black;
height: 100%;
width: 312px;
display: flex;
justify-content: center;
border-radius: 10px;
border: 2px solid orange;


}

.calcu-cont {
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
border-radius: 10px;
}

h1 {
color: orangered;
margin-bottom: 75px;
}

.disp {
margin: 8px 0px -7.6px 0px;
border-bottom: 1px solid gray;
}

.row {
margin: 8px 0px;
}


.display-row {
margin-bottom: 0px;
border: none;
width: 291px;
font-size: 35px;
padding: 10px;
color: white;
outline: none;
background-color: black;
text-align: right;
}

.keys {
width: 75px;
padding: 25px;
background-color: black;
color: white;
text-align: center;
font-size: 15px;
cursor: pointer;

}

.orange-key {
color: orangered;
}

.orange-key-bcg-round {
background-color: orangered;
color: white;
border-radius: 100%;
font-weight: 300;
}

.material-symbols-outlined {
font-size: 14px;

}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<!-- google icon -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- My files -->
<!-- css -->
<link rel="stylesheet" href="style.css">

</head>

<body>

<!-- backbone-body -->
<div class="bcg">

<!-- calcu-container -->
<div class="calcu-cont">


<h1>Calculator</h1>

<!-- display -->
<div class="disp">
<input type="text" class="display-row" maxlength="26" readonly>
</div>

<!-- keys-Divided into rows -->
<div class="row">
<button class="button keys orange-key nob">C</button>
<button class="button keys orange-key nob material-icons">backspace</button>
<button class="button keys orange-key nob">%</button>
<button class="button keys orange-key nob" data-operator="/">
<i class="fa-solid fa-divide"></i>
</button>
</div>
<div class="row">
<button class="button keys">7</button>
<button class="button keys">8</button>
<button class="button keys">9</button>
<button class="button keys orange-key">×</button>
</div>
<div class="row">
<button class="button keys">4</button>
<button class="button keys">5</button>
<button class="button keys">6</button>
<button class="button keys orange-key">-</button>
</div>
<div class="row">
<button class="button keys">1</button>
<button class="button keys">2</button>
<button class="button keys">3</button>
<button class="button keys orange-key">+</button>
</div>
<div class="row">
<button class="button keys orange-key"><span class="material-symbols-outlined">
calculate
</span></button>
<button class="button keys">0</button>
<button class="button keys">.</button>
<button class="button keys orange-key-bcg-round">=</button>
</div>

</div>
</div>

<!-- JS -->
<script src="script.js"></script>
</body>

</html>

How to add :after and :before icon that change on click button dropdown?

:before and :after aren't doing what you think they're doing in this case. https://developer.mozilla.org/en-US/docs/Web/CSS/::before

However, you can actually treat Fontawesome icons as classes and then toggle them the same way you're handling the menu. See: https://fontawesome.bootstrapcheatsheets.com/ find the icon you want, copy the HTML tag, and then add the class to your CSS(everything in the <i> minus the fa part) and then manipulate them as you would any other CSS element. Add the actual HTML tag wherever you want the icon.

var dropdownBtn = document.querySelectorAll('.drop_btn');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.fa-angle-up');
icon.classList.toggle("down");
dropCont.classList.toggle("show");

//Add this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;

if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("down");
iconDrop = icon;
}));
.drop_btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}

.fa-angle-up {
display: inline-block;
position: absolute;
right: 2em;
margin: 0;
padding: 0;
transform: rotateY(0);
transform-origin: center;
transition: 0.3s linear;
}

.fa-angle-up.down {
display: inline-block;
position: absolute;
right: 2em;
margin: 0;
padding: 0;
transform: rotateZ(-180deg);
transform-origin: center;
transition: 0.3s linear;
}

.drop_btn:hover {
background: #000;
color: #fff;
}

.drop_container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}

.drop_container.show {
max-height: 300px;
transition: max-height 0.3s ease-in;
}

.drop_container>.item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="dropdown-menu">

<div class="drop_btn">One<i class="fa fa-angle-up"></i></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>

<div class="drop_btn">Two<i class="fa fa-angle-up"></i></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>

</div>

How to change color when click icon in css

1 Fiddle Link http://jsfiddle.net/JfGVE/2029/

<span>
<button class="saveHome hoverPulse pan typeReversed">
<span class="stackIcons">
<i class="iconHeartActive iconOnly"></i>
<i class="iconHeartEmpty typeReversed iconOnly"></i>
</span>
</button>
</span>



//CSS Code

button{
width: 100px;
height: 50px;
position: relative;
}

.iconHeartEmpty::before{
content: "\f001";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 35%;
left: 5%;
}
.iconHeartActive::after{
content: "\f001";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: red;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 35%;
left: 5%;
}
.hide{
display: none;
}



//Script

$( ".saveHome" ).click(function() {
$(".stackIcons i" ).toggleClass( "hide" );
});

Change icon on click and then revert to original on next click

if ($('.tab-container').length > 0) {  $('.tab img').on('click', function(e) {    $('.tab-icon').toggleClass('active-tab')  });}
 .active-tab{    content:url("https://n6-img-fp.akamaized.net/icones-gratis/inicio-icone-silhouette_318-85097.jpg?size=338c&ext=jpg");    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class='tab-container'>  <div class='tab'>    <a href='#this-is-the-first-tab' id='this-is-the-fist-tab'>      <img height="50" width="50" id="x" src='https://img-21.ccm2.net/1-NtiXuJNqGFChdD_IIpOnM9aOA=/200x/31027358c0f24fd3bd484a485b5a652c/ccm-faq/1538-9tLde1xY3nSyajQH-s-.png' class='tab-icon'>    </a>  </div></div>


Related Topics



Leave a reply



Submit