Issue
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
?
Solution
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; }
Answered By - Rokin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.