CSS圖標在現代網頁設計中是非常常見的元素，因為它們可以輕松地提高網頁的可讀性、導航和品牌知名度。但是，如果在不同屏幕大小或分辨率的設備上網站能夠自適應的話，這些圖標就會自然而然地適應觀看它們的用戶的需求。

幸運的是，CSS使得這個過程變得非常簡單和容易。可以通過使用CSS的font-size屬性來控制圖標的大小，而不必使用任何JavaScript庫或其他插件。下面是一個代碼示例：

.icon {
font-size: 2em; /* set font size to 2 times the default size */
}

在上面的例子中，.icon是任何具有此類名的元素的類名，我們使用font-size屬性將其大小設置為2倍。這使得它在不同的分辨率或屏幕寬度下可以保持一致的大小。

當然，對于一些具有不同大小和比例的圖標，需要調整font-size屬性的值來使它們在瀏覽器中看起來更加自然。一種方法是使用媒體查詢來針對不同的分辨率和屏幕大小進行調整，如下所示：

/* default size */
.icon {
font-size: 2em;
}
/* set size for screens smaller than 640px */
@media screen and (max-width: 640px) {
.icon {
font-size: 1.5em;
}
}
/* set size for screens smaller than 480px */
@media screen and (max-width: 480px) {
.icon {
font-size: 1em;
}
}

上面的代碼設置了不同大小的圖標，適用于不同寬度的屏幕。當屏幕小于640像素時，圖標大小為默認大小的1.5倍;當屏幕小于480像素時，圖標大小為默認大小的1倍。在這個例子中，我們使用了媒體查詢來觸發樣式規則，以確保圖像在不同尺寸的屏幕上呈現適當的大小.