css – 隐藏文字,留下图标元素

我现在有一个非常大的网站,更改所有按钮的代码会很费时间,所以我想知道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; }

原文地址：https://www.jb51.cc/css/215354.html