CODEWITHSUNDEEP
jqueryhtmlcss
StreetCoder
StreetCoder

Reputation: 10061

How to hide text besides of awesome font icon

I used awesome font and add text left of the icon. I want to hide the text when it will be browsed in the smaller browser. But I don't understand how to point that text using css. My code is: 

<button class="slideout-menu-toggle"><i class="fa fa-bars"></i> Menu</button>

I want to hide the word Menu when it will be browsed in smaller device. Is there any way to determine the word. I tried add <span> in the menu but text gets break and display in new line.

Upvotes: 0

Views: 3785

Answers (3)

Quentin
Quentin

Reputation: 943645

You can't point at text with CSS, only elements.

  1. Wrap the text in a <span>
  2. Find the CSS that triggers the line break on the span you tried before and fix it
  3. Restyle the span to hide the text (e.g. by resizing it and setting overflow: hidden) when the media query matches the window width you want

Upvotes: 4

Iain G
Iain G

Reputation: 54

Display:none hides the text from screen readers too. Instead use 

{
text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }

See this article

Upvotes: 0

Billy
Billy

Reputation: 2448

try this, I added a span and it didn't break the text.

@media screen and (max-width: 500px) {
    .slideout-menu-toggle > span{
        display:none;
    }
}
<button class="slideout-menu-toggle"><i class="fa fa-bars"></i> <span>Menu</span></button>

Upvotes: 0

Related Questions