在網頁設計中，使用圖標字體成為越來越流行的趨勢。這種方式可以讓我們使用小的字體圖標來代替圖片，從而提升網頁的加載速度。在CSS中引用圖標字體也是非常簡單的。
首先，我們需要從一個圖標字體庫中選擇一種字體，比如FontAwesome或Glyphicons。然后，我們需要將該字體庫文件引入到我們的項目中。FontAwesome提供了webfonts目錄下的四個文件：fontawesome-webfont.eot、fontawesome-webfont.svg、fontawesome-webfont.ttf和fontawesome-webfont.woff。我們可以使用以下CSS代碼將該字體庫文件引入到我們的項目中。

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

在上述代碼中，“font-family”屬性將字體庫命名為“FontAwesome”，也可以自定義設置成其他名稱。由于字體庫包含多個文件，我們可以使用在“src”屬性中使用逗號分隔符，來在不同瀏覽器和環境下引用不同的字體文件。
我們可以在CSS中添加以下代碼定義圖標的樣式。

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

在上述代碼中，“font”屬性定義了字體的各種屬性，包括字體族、字重、字體樣式等。然后，“text-rendering”屬性定義了如何呈現字體。最后，“-webkit-font-smoothing”和“-moz-osx-font-smoothing”屬性定義了不同瀏覽器中字體的平滑度。
最后，我們可以使用以下代碼添加我們喜歡的圖標。

<p><i class="fa fa-heart"></i> I love CSS!</p>

在上述代碼中，“class”屬性將該元素定義為一個圖標，而“fa”和“fa-heart”則是字體庫中定義的圖標類名。通過這種方式，我們可以使用不同的類名，來添加不同的圖標。
綜上所述，通過引用圖標字體，我們可以輕松地將小而美的圖標加載到網頁上，從而提升網頁加載速度和用戶體驗。