CSS隱藏按鈕上的字

按鈕在網頁設計中扮演著重要的角色。但有時候我們希望在按鈕上只顯示圖標而不顯示文字，這時候我們可以使用CSS來實現(xiàn)隱藏按鈕上的字。

首先，在HTML中創(chuàng)建一個包含圖標和文字的按鈕：

<button class="icon-button">
<i class="fa fa-search fa-lg"></i> Search
</button>

這里用了Fontawesome的圖標和文字“Search”

.icon-button {
background: transparent;
border: none;
color: #333;
font-size: 16px;
}
.icon-button i {
margin-right: 6px;
}

這里CSS中用了一個“icon-button”類來對按鈕進行樣式設置，又用了一個“fa”類來設置Fontawesome的圖標。現(xiàn)在我們要隱藏掉“Search”文字，我們只需要添加一個新的類：

.hide-text {
font-size: 0;
color: transparent; 
}

在這個新的“hide-text”類中，我們把字體大小設置為0，然后把字體顏色設為透明，這樣文字就不會顯示了。然后我們把這個類添加到按鈕上：

<button class="icon-button hide-text">
<i class="fa fa-search fa-lg"></i> Search
</button>

現(xiàn)在“Search”文字就隱藏了，只留下了圖標。