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>

所以我想知道的是，是否有一个纯CSS等价于此，但是第一个HTML标记没有

span.label

您可以使用：

@media(max-width:768px) {
    .btn {
        color: transparent;

    }
    .btn > .fa{
        color: black; //or color of your choice
    }
}

这将隐藏文本，但不处理按钮的大小

---

如果您知道图标的大小，可以将该大小强制设置为

.btn

s，然后使用

位置：绝对；排名：0；左：0；z指数：1。
假设图标的宽度为1em，您可以执行以下操作


/*只是为了让图标可见*/
.fa.fa-icon{
显示：内联块；
宽度：1米；高度：1米；
背景：橙色；
}
a{
显示：内联块；
宽度：1em；/*设置为与图标相同*/
颜色：白色；/*设置为与背景相同*/
溢出：隐藏；
}
您可以将字体大小设置为零：

.btn { font-size: 0; }

如果图标包含文本，请覆盖其字体大小：

.fa { font-size: initial; }

这是一个很好的解决方案，因为一个按钮中可以有多个图标。但是，请注意，有些浏览器将
字体大小：0
解释为“用户设置的最小字体大小”。因此，您仍然可以获得6px的按钮大小或任何最小大小。另一个注意事项是，
font-size:initial
在IE11中不受支持，下面您还可以添加
white space:nowrap
，以防止它打断多行。
.btn { font-size: 0; }

.fa { font-size: initial; }