CSS標題前面的小圖標是一種常見的網頁設計元素，可以增加頁面的視覺效果，提高網頁的美觀程度。通常，這些小圖標都是使用CSS的:before偽元素來實現，在CSS中，使用:before偽元素可以在元素的前面添加一個內容，在這個內容前面設置一個背景圖片即可實現圖標的效果。

.selector:before {
content: "";
display: inline-block;
width: 20px; /*圖標寬度*/
height: 20px; /*圖標高度*/
background: url("icon.png") no-repeat center center; /*圖標路徑*/
background-size: contain; /*圖標大小適應*/
margin-right: 5px; /*圖標與文字的間距*/
}

上面的代碼中，.selector表示添加圖標的選擇器名稱，content屬性用于插入一個空的內容，display屬性設置偽元素展示為行內塊級元素，即可以與文字排列在同一行，background屬性設置背景圖片及其位置，background-size屬性用于適應圖標大小，margin-right屬性用于設置圖標與文字之間的距離。

需要注意的是，為了使圖標與文字對齊，我們通常需要設置其行高（line-height），以確保圖標的垂直居中效果，同時還需要設置圖標的vertical-align屬性值為middle。另外，為了確保在低版本IE中的兼容性，我們需要添加zoom:1屬性。

.selector {
line-height: 20px; /*與圖標高度相同*/
}
.selector:before {
content: "";
display: inline-block;
width: 20px; /*圖標寬度*/
height: 20px; /*圖標高度*/
background: url("icon.png") no-repeat center center; /*圖標路徑*/
background-size: contain; /*圖標大小適應*/
margin-right: 5px; /*圖標與文字的間距*/
vertical-align: middle; /*垂直居中*/
zoom: 1; /*IE6/7 hack*/
}

最后，我們可以選擇不同的圖標來美化不同的標題。通常，在網上可以找到許多免費的圖標資源，例如iconfont、FontAwesome等，我們也可以將自制的圖標導入到網頁中，或者使用CSS3中的CSS Sprites技術來實現多個圖標的合并，以減少頁面請求，提高網頁性能。