Toggle Font-Awesome Icon funktioniert nur bedingt Lösung 2
Dann hier klicken
Der hier verwendete Code
<html>
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
i{
width:100px;
height:100px;
display:block;
border:1px solid red;
margin:0 auto;
overflow:hidden;
}
i.fa-thumbs-down:before{
display:block;
height:100px;
width:100px;
line-height:80px;
font-size:34px;
background:green;
color:white;
content:'HOCH';
}
.fa-thumbs-up:before{
display:block;
height:100px;
width:100px;
font-size:33px;
line-height:80px;
content:'Runter';
background:blue;
color:white;
}
h2{
text-align:center;
}
</style>
</head>
<body>
<h2>Mit add und remove class</h2>
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
<h2>Mit repleace class</h2>
<i onclick="myFunction1(this)" class="fa fa-thumbs-up"></i>
<script>
function myFunction(x) {
if(x.classList.contains('fa-thumbs-up')){
x.classList.remove("fa-thumbs-up");
x.classList.add("fa-thumbs-down");
}else{
x.classList.remove("fa-thumbs-down");
x.classList.add("fa-thumbs-up");
}
}
function myFunction1(x) {
if(x.classList.contains('fa-thumbs-up')){
x.classList.replace("fa-thumbs-up","fa-thumbs-down");
}else{
x.classList.replace("fa-thumbs-down","fa-thumbs-up");
}
}
</script>
</body>
</html>