How to Hide Button Text in Phone Mode ?

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

While building a website for small-screen devices like smartphones, it becomes important that we use every bit of screen space wisely, we could not afford to waste any area. To achieve this, we can hide some peripheral elements in phone mode.

Hiding button text in phone mode:

Example: This example is implemented using CSS. We can use media queries in CSS to hide button text according to the screen size of the device.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
 
        /* Basic styling */
        #btn {
            width: auto;
        }
 
        /* It is triggered when screen
           size becomes <=768px */
        @media(max-width:768px) {
            #btn-text {
 
                /* It hides the button text 
                when screen size <=768px */
                display: none;
            }
        }
    </style>
</head>
 
<body>
    <h2 style="color:green">
        w3wiki
    </h2>
     
    <b>
        Hiding button text 
        in phone mode</b><br /><br />
    <button id="btn">
        <img src=
"https://media.w3wiki.net/wp-content/uploads/20210520182549/myDelete.png"
            id="icon">
        <span id="btn-text">Delete</span>
    </button>
</body>
 
</html>

Example 2: The following example is implemented using bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <!-- Including Bootstrap CSS file -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        crossorigin="anonymous">
 
    <style>
        #btn {
            width: auto;
        }
    </style>
</head>
 
<body>
    <h2 style="color:green">
        w3wiki
    </h2>
     
    <b>
        Hiding button text 
        in phone mode
    </b>
    <br /><br />
     
    <button>
        <img src=
"https://media.w3wiki.net/wp-content/uploads/20210520182549/myDelete.png"
            id="icon">
 
        <!-- In Bootstrap, d-none class sets 
            the display property of span to 
            none in all screen sizes and 
            d-md-inline-block sets the display 
            property to inline-block when 
            screen size >=768px (medium sized
            displays)   -->
        <span class="d-none d-md-inline-block">
            Delete
        </span>
    </button>
</body>
 
</html>