隨著越來越多的網頁設計和開發工具的流行，矢量圖標已經成為了網頁設計和開發中必不可少的一部分。而CSS調用矢量圖標可以為網頁提供更好的可擴展性和可維護性。下面將介紹如何使用CSS調用矢量圖標。

首先，我們需要準備好矢量圖標。常見的矢量圖標格式有SVG、EPS、AI等。這里以SVG格式的矢量圖標為例。我們可以使用在線的矢量圖標庫，如Iconfont、Font Awesome等，下載相關的SVG矢量圖標文件。下載完成后，我們需要在HTML文檔頭部加入以下代碼：

<link rel="stylesheet" href="path/to/iconfont.css">

這里的iconfont.css是我們在矢量圖標庫下載后得到的文件，其中包含了矢量圖標的CSS調用代碼。接下來，我們可以在需要使用矢量圖標的地方，使用以下代碼：

<i class="iconfont icon-xxx"></i>

其中，iconfont是我們在下載的CSS文件中設置的class名稱，icon-xxx是矢量圖標的名稱，xxx可以根據具體的需求進行修改。例如，如果我們下載了一張圖標名為phone的矢量圖標，那么我們可以使用以下代碼：

<i class="iconfont icon-phone"></i>

最后，我們可以調整矢量圖標的大小、顏色等屬性。例如，如果我們需要調整圖標的大小為48px，可以在CSS文件中添加以下代碼：

.icon-xxx {
font-size: 48px;
}

通過上面的介紹，我們知道了如何使用CSS調用矢量圖標。使用矢量圖標可以提高網頁的加載速度和響應速度，同時也可以為網頁提供更好的可擴展性和可維護性，讓代碼更加簡潔和優雅。所以，在網頁設計和開發中，我們應該盡量使用矢量圖標來優化網頁的性能和用戶體驗。