在網頁設計中，圖標的使用能夠提升頁面的美觀性和易讀性，而在CSS中圖標的引用文件也是一個重要的部分。 在CSS中引用圖標文件有很多種方式，其中比較常見的一種是使用字體圖標。字體圖標是一種特殊的字體文件，其中包含了各種常用的圖標，比如箭頭、星星等等。為了引用這樣的字體圖標，需要先下載字體文件，然后使用@font-face規則將字體文件引入頁面中，如下所示：

@font-face {
font-family: "IconFont";
src: url("iconfont.eot"); /* IE9以下瀏覽器需要使用eot格式 */
src: url("iconfont.eot?#iefix") format("embedded-opentype"),
url("iconfont.woff") format("woff"),
url("iconfont.ttf") format("truetype"),
url("iconfont.svg#IconFont") format("svg");
}

在上面的代碼中，我們定義了一個名為“IconFont”的字體家族，并通過多個src屬性指定了不同格式的字體文件路徑。其中，第一個src屬性是為了兼容IE9以下的瀏覽器，因為這些瀏覽器無法讀取其他格式的字體文件。第二個src屬性及其后面的部分列出了常見的其他字體文件格式。 當字體文件引用完成后，我們就可以使用其中的圖標了。如下所示，該段代碼使用了“IconFont”中的一個圖標。

p::before {
font-family: "IconFont";
content: "\e600"; /* “IconFont”中的圖標代碼 */
}

在上面的代碼中，我們使用::before偽元素為p標簽前添加了一個圖標。通過font-family屬性，我們已經指定了要使用的字體家族為“IconFont”，因此接下來的content屬性中就可以使用該字體的圖標代碼了。在這里，我們使用了16進制碼值為“e600”的圖標代碼。 除了使用字體圖標，我們還可以使用其他形式的圖標，比如嵌入式圖像（inline image）和SVG圖標等等。無論使用何種方式引用圖標文件，都需要遵循相應的語法規則，才能在CSS中成功調用圖標。