CSS的自定義字體可以用來代表小圖標，這個方法比使用圖片作為圖標有很多好處，其中一個主要的好處是減少了HTTP請求次數(shù)，同時也可以改變圖標的顏色和大小。

@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9以下兼容 */
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.ttf') format('truetype'), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
[class^="icon-"]:before, 
[class*=" icon-"]:before {
font-family: 'iconfont';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-add:before {
content: "\e643";
}
.icon-delete:before {
content: "\e644";
}

這里的代碼中，我們定義了一個iconfont字體文件，然后使用了:before偽類來設置icon的內(nèi)容。這種方法可以讓我們通過簡單的添加一個class來插入不同的icon，例如：.icon-add和.icon-delete。

當然，如果你想要使用第三方的icon庫比如Font Awesome或Glyphicons等，它們都提供了可以直接復制到你的CSS文件中的代碼，這樣你就可以很方便地開始使用這些icon了。