Hide text, leave icon elements

Question

I have a pretty big site now, and it would be time-consuming to change the codes of all of the buttons, so I am wondering if CSS could do something for me with no HTML code change.

Every page has an action bar with some buttons, which all consist of an icon and text. Something like this:

<div class="action-bar">
    <a href="" class="btn btn-primary">
        <i class="fa fa-icon"></i> 
        Button label
    </a>
    <a href="" class="btn btn-primary">
        <i class="fa fa-icon"></i> 
        Button label
    </a>
</div>

What I want to achieve now, is that on the mobile devices, the text inside the button will not display; only the icon should display.

If I had a markup like this one:

<a href="" class="btn btn-primary">
    <i class="fa fa-icon"></i> 
    <span class="label">Button label</label>
</a>

Then I know I could hide all the labels by doing:

@media(max-width:768px) {
    .btn .label {
         display: none;
    }
}

So what I'm wondering is, is there a pure CSS equivalent to this, but with the first HTML markup where there is no span.label?

Answer 1

You can set the font size to zero:

.btn { font-size: 0; }

If your icons contain text, overwrite their font size:

.fa { font-size: initial; }

Answer 2

You can use:

@media(max-width:768px) {
    .btn {
        color: transparent;

    }
    .btn > .fa{
        color: black; //or color of your choice
    }
}

This will hide the text, but it doesn't deal with the size of the button.

If you know the size of the icons, you can force that size to the .btns and then use position:absolute;top:0;left:0;z-index:1; on your icons.

Answer 3

In some cases the best solution to set "invisible" label for interactive element is to use "aria-label" HTML property:

<button onclick="..." aria-label="Send" />

or

<a href="..." aria-label="Next"></a>

Description at MDN Web Docs