CSS的字體圖標功能十分實用，在網頁設計中受歡迎程度極高。它可以替代一些常用的小圖片，比如箭頭、行星、勾勾叉叉等等圖標，優點包括可以放大縮小而不失真，減少頁面HTTP請求，快速解決圖標的顏色、大小等問題。

@font-face {
font-family: 'myfont';
src: url('myfont.eot'); /* IE9 */
src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('myfont.woff') format('woff'), /* Chrome, Firefox */
url('myfont.ttf') format('truetype'), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+ */
url('myfont.svg#myfont') format('svg'); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'myfont';
font-size: 20px;
color: #000;
}

要制作自己的字體圖標，首先要找到字體圖標集的源文件，一般為矢量圖，如AI、SVG等格式，或者在網上找到相關圖標庫。然后，需要使用字體圖標工具，如icomoon等，將這些圖標添加到自己的自定義字體庫中，生成對應的字體文件。

接下來，在CSS中引用這個字體文件，并且為每個圖標定義一個代表性的Unicode編碼。為了簡化使用，可以使用第三方字體圖標庫，如Font Awesome、Glyphicons等。然后，只需要在需要使用圖標的地方，使用標簽，并給它一個代表性的類名，即可輕松添加字體圖標。

<i class="icon-home"></i>
<i class="icon-search"></i>
<i class="icon-envelope"></i>
<i class="icon-trash"></i>

總體上說，使用CSS制作字體圖標是一個相對簡單的過程，但可以大大提高頁面的視覺效果和交互性，加強用戶對頁面的印象。同時，也提高了開發者對網頁設計的靈活性和創造性。