CSS字體圖標是使用CSS屬性和字體文件來實現的圖標，它比傳統圖像（如PNG或SVG）有很多優勢，例如：它可以縮放，可以更改顏色和字體等。下面我們來介紹一下CSS字體圖標的寫法。

.icon {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
display: inline-block;
margin-right: 10px;
}
.icon-heart:before {
content: "\f004";
}
.icon-envelope:before {
content: "\f0e0";
}
.icon-search:before {
content: "\f002";
}

首先，我們需要引入一個支持CSS字體圖標的字體文件，如Font Awesome。然后，在CSS中定義一個公共的樣式類"icon"。這個樣式類應該設置字體家族，字體粗細，字體大小等通用的屬性。

接下來，為每個字體圖標創建一個類，并在類中使用偽元素:before來定義字體圖標的內容。其中，content屬性用于指定字體圖標的Unicode字符編碼，可以通過查找字體文件的文檔來獲取每個圖標的編碼。

在HTML中，我們只需要使用這些類名來顯示相應的字體圖標：

<i class="icon icon-heart"></i>
<i class="icon icon-envelope"></i>
<i class="icon icon-search"></i>

如上所示，我們使用<i>標簽來顯示字體圖標，只需要將相應的類名添加到標簽中即可。

通過以上步驟，我們就可以使用CSS字體圖標來美化我們的網頁，并且可以輕松地實現顏色、大小和縮放等樣式的自由定制。