CSS圖標菜單自動換行是一個常見的需求，特別是在響應式設計中。當屏幕寬度變窄時，菜單中的選項可能會出現擁擠，導致用戶難以選擇他們需要的選項。為了解決這個問題，我們可以使用CSS來自動將菜單中的選項換行到下一行。

/*創建圖標菜單*/
.icon-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/*添加菜單項*/
.icon-menu li {
padding: 10px;
list-style: none;
text-align: center;
}
/*將圖標菜單項轉換為圖標*/
.icon-menu li:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
}
/*使圖標可以點擊*/
.icon-menu li a {
color: #333;
}
/*響應式設計，當屏幕寬度變小時，自動將菜單項換行*/
@media(max-width: 768px) {
.icon-menu {
flex-direction: column;
align-items: center;
}
}

在以上示例中，我們首先創建了一個名為“icon-menu”的菜單，并使用了彈性布局，并聲明了可以換行。接著我們給菜單項添加了 padding 和一些樣式，并將其轉換為圖標。為了使圖標可以點擊，我們給每個圖標添加了一個鏈接。最后，我們使用CSS媒體查詢，在窗口大小小于等于 768 像素時，將菜單改成垂直排布。

總之，CSS圖標菜單自動換行是一種簡單而實用的方法，可以使得我們的菜單在不同的屏幕大小和設備上自適應，提高用戶的體驗。如果你也正在開發響應式網站，不妨嘗試一下這個方法！