網頁中常常會用到各種圖標來裝飾頁面，但是有時候圖標大小過大會影響美觀和布局，這時候我們就需要通過CSS來按比例縮小圖標。

.icon {
display: inline-block;
width: 1em;
height: 1em;
background-image: url(icon.png);
background-size: contain;
background-repeat: no-repeat;
}

上面的代碼中，我們定義了一個.icon類來添加圖標。首先，我們設置display屬性為inline-block，這是為了讓圖標在文本流中并排顯示。然后，我們將圖標的width和height都設置為1em，這是為了讓圖標的大小隨著文字大小的變化而變化。接下來，我們設置了background-image為我們想要顯示的圖標文件路徑，并將background-size設置為contain，這是為了讓圖標按比例縮小，而且不失真。最后，我們設置了background-repeat為no-repeat，這是為了避免圖標在縮小后產生重復的效果。

使用這種方法，我們可以輕松地對網頁中的圖標進行比例縮小，使得網頁更加美觀和布局更加合理。