隨著Web開發技術的不斷升級，使用矢量圖標在樣式設計中越來越得到廣泛的應用。相比于傳統的位圖圖標，矢量圖標具有可伸縮、色彩可調、大小可控等優勢，特別適合在不同設備和分辨率下進行布局和展示。

CSS中使用矢量圖標也非常簡單。下面是一個簡單的例子：

.icon {
width: 20px;
height: 20px;
background-image: url('icon.svg'); /* 引入SVG矢量圖標 */
background-repeat: no-repeat;
}

在CSS中定義一個類名為“icon”的元素，指定其寬高為20px，作為背景圖片引入SVG矢量圖標，并且設置不重復顯示。這樣，一個簡單的矢量圖標就顯示在了頁面上。

當然，這只是最簡單的應用場景。在實際開發中，我們還可以通過CSS對矢量圖標進行更加復雜的操作。例如，通過“background-position”屬性來控制不同狀態下的顯示效果，或者通過“:hover”偽類來實現動態交互效果，等等。

總的來說，CSS中使用矢量圖標是一種非常便捷的方式，可以彌補傳統圖片在高清設備和不同尺寸屏幕下出現的模糊和失真問題。同時，還可以讓頁面更加輕便，減少HTTP請求的數量，提高網站的性能表現。