In this blog we will see how to make a like/dislike icon in html through css,you can do so by following the given codes below.
Step 1: Go to notepad and type the given codes below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
font-size: 100px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: green;
}
</style>
</head>
<body>
<h2 text align="center">Example Demo</h2>
<p>Click the like icon to see the like icon working , and click the dislike icon to see dislike icon working.</p>
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
<script>
function myFunction(x) {
x.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>
Step 2:Save the file in .html extension and run.
Step 1: Go to notepad and type the given codes below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
font-size: 100px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: green;
}
</style>
</head>
<body>
<h2 text align="center">Example Demo</h2>
<p>Click the like icon to see the like icon working , and click the dislike icon to see dislike icon working.</p>
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
<script>
function myFunction(x) {
x.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>
Step 2:Save the file in .html extension and run.
html language codes to beginners
ReplyDeletehtml example - Link hover text-decoration underline