CSS首字圖標是指在頁面中使用文字作為圖標的一種方式，常常應用于網站的導航菜單或縮略語標記中。下面我們將介紹如何實現CSS首字圖標。

HTML代碼示例：
<ul class="menu"><li><a href="#">首頁</a></li><li><a href="#">產品介紹</a></li><li><a href="#">關于我們</a></li><li><a href="#">聯系我們</a></li></ul>

以上是一個簡單的導航菜單，我們需要為每個菜單項添加首字圖標。我們可以通過CSS的偽元素選擇器 ::before 或 ::after 來實現。

CSS代碼示例：
.menu li a::before {
content: " ";
display: inline-block;
width: 16px;
height: 16px;
background-image: url(icon.png);
background-size: 100%;
margin-right: 5px;
}

以上代碼中，我們使用了 ::before 偽元素來創建每個菜單項的首字圖標。通過 content 屬性將空格轉換為字體，將其作為背景圖片來創建圖標。為了讓圖標居中顯示，并與文字對齊，我們設置了 display:inline-block; width:16px; height:16px; 以及 margin-right:5px; 屬性。

除了使用背景圖片來創建首字圖標外，我們還可以使用 Unicode 字符、SVG 圖片等方式。

以上就是CSS首字圖標的實現方法，通過使用偽元素選擇器，我們可以方便地在頁面中添加優雅的圖標效果。