我现在有一个非常大的网站,更改所有按钮的代码会很费时间,所以我想知道CSS是否可以为我做一些没有
HTML代码更改的事情.
每个页面都有一个带有一些按钮的操作栏,这些按钮都包含一个图标和文本.像这样的东西：
<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>
我现在想要实现的是,在移动设备上,按钮内的文字不会显示;只显示图标.
如果我有这样的标记：
<a href="" class="btn btn-primary">
<i class="fa fa-icon"></i>
<span class="label">Button label</label>
</a>
然后我知道我可以通过以下方式隐藏所有标签：
@media(max-width:768px) {
.btn .label {
display: none;
}
}
所以我想知道的是,是否存在与此相当的纯CSS,但是第一个HTML标记没有span.label？
解决方法
您可以将字体大小设置为零：
.btn { font-size: 0; }
如果您的图标包含文本,请覆盖其字体大小：
.fa { font-size: initial; }
