隐藏文字,留下图标元素

Question

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

Answer 1

您可以将字体大小设置为零:

.btn { font-size: 0; }

如果您的图标包含文本,请覆盖其字体大小:

.fa { font-size: initial; }

Answer 2

您可以使用：

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

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

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

如果您知道图标的大小，则可以将该大小强制为 s .btn，然后position:absolute;top:0;left:0;z-index:1;在图标上使用。