在網頁設計中，圖標的使用非常普遍。而有時候我們希望這些圖標能夠在一定程度上變成文字，而不是簡單地顯示一個圖標。這時候，我們就可以使用CSS中的一些技巧來實現這個效果。

.icon {
font-family: "Font Awesome";
content: "\f041"; /* 這里代表一個 Font Awesome 的圖標 */
}
.text {
font-size: 14px; /* 文字的大小 */
color: #666; /* 文字的顏色 */
margin-left: 5px; /* 文字和圖標之間的距離 */
}

代碼中的第一段，我們先給圖標設置了一個 font-family 屬性，這里我們用的是 Font Awesome 字體庫。接著，我們使用了 content 屬性來放置這個圖標。這個屬性是在偽元素（pseudo-element）中使用的，可以用來在元素的特定部位插入內容。在這個例子中，我們把它用在我們的圖標上。

第二段代碼是為我們的文字添加一些樣式。這里我們設置了文字的大小、顏色和與圖標的距離。可以根據實際場景調整這些屬性。

在 HTML 中，我們可以這樣使用：

這是一個帶圖標的文字

使用這種方法，我們就能夠在一個元素中同時使用圖標和文字，讓頁面更加豐富多彩。