CODEWITHSUNDEEP
css
Digital Ninja
Digital Ninja

Reputation: 3731

Hide text, leave icon elements

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?

Upvotes: 33

Views: 58308

Answers (4)

Dzmitry Kulahin
Dzmitry Kulahin

Reputation: 1870

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

Upvotes: 1

Rokin
Rokin

Reputation: 2137

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; }

Upvotes: 56

Mr Lister
Mr Lister

Reputation: 46559

Assuming the width of the icons is 1em, you can do something like

/* just to make the icon visible */
.fa.fa-icon {
  display:inline-block;
  width:1em; height:1em;
  background:orange;
}

a {
  display:inline-block;
  width: 1em; /* set to same as icon */
  color:white; /* set to same as background */
  overflow:hidden;
}
<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>

(where the orange squares are the icons; I didn't feel like including the complete FontAwesome, so I had to fake it a little.)

Upvotes: 0

Zibellino
Zibellino

Reputation: 1433

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.

Upvotes: 6

Related Questions