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
    }
}

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

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

Answer 3

假设图标的宽度为1em，您可以执行类似

的操作

activity

Update

（橙色方块是图标;我不想包含完整的FontAwesome，所以我不得不假装一点。）

隐藏文字，留下图标元素

3 个答案: