隐藏文字，保留图标元素

我现在有一个很大的站点，更改所有按钮的代码将很耗时，因此我想知道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？