Open In App
Related Articles

How to display icon next to show/hide text on button ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will learn how to add icons with the show/hide text button and also you can use that icon as a button. It will be done here by using JavaScript. In this example, with the help of JavaScript, you can easily toggle between show and hide. Add any icons beside the button or you can use icons as a button also. Here you just need to link with the awesome font’s icons that will bring the icons to your webpage. In this example clicking the text beside the fire icon trigger the show/hide function. 

Required things: A <div> that will show and hide your element as you set, a text that will work as a button, and the JavaScript to do the job. The below code will illustrate the approach more clearly. 

Example: (No space is going to be taken up by the element when the property of the display is set to “none.”) 

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to display icon next to
        show/hide text on button?
    </title>
 
    <link rel="stylesheet" href=
</head>
 
<body>
    <div onclick="showme('widget');" id="geeks">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <i class="fa fa-fire"></i>
    </div>
 
    <div id="widget" style="display:none;">
        <h3>
            GeeksforGeeks: A Online Computer
            Science Portal for Geeks
        </h3>
    </div>
 
    <script>
        function showme(id) {
            let gfg = document.getElementById(id);
            let GFG = document.getElementById("geeks");
             
            if (gfg.style.display == 'block') {
                gfg.style.display = 'none';
                GFG.innerHTML =
                    'GFG <i class="fa fa-fire"></i>';
            } else {
                gfg.style.display = 'block';
                GFG.innerHTML =
                    'Tag-line <i class="fa fa-fire"></i>';
            }
        }
    </script>
</body>
 
</html>

                    

Output:  

How to display icon next to show/hide text on button?

How to display icon next to show/hide text on button?



Last Updated : 20 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads