在網頁設計中，圖標起著非常重要的作用，可以實現更好的視覺效果和用戶體驗。然而，在使用圖標時，我們需要注意樣式設計，確保圖標在網站中的顯示效果良好。在CSS中，我們可以使用兩種方法實現圖標上下排列。

代碼示例：
.icon {
display: inline-block;
width: 30px;
height: 30px;
background: url('icon.png') no-repeat 0 0;
}
.icon2 {
display: inline-block;
width: 30px;
height: 30px;
background: url('icon2.png') no-repeat 0 0;
}
.vertical-icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

第一種方法是使用inline-block屬性和vertical-align屬性。我們可以將圖標添加到一個容器里，并使用display: inline-block;使得容器可以與其他元素并排。同時，我們可以使用vertical-align屬性使得容器內的圖標按照垂直方向對齊。

第二種方法是使用flex布局。我們可以先將圖標添加到一個容器中，然后使用flex屬性設置容器內的圖標按照垂直布局排列。

需要注意的是，在使用圖標時，我們要確保其大小和背景位置正確。同時，我們還可以使用:hover屬性為圖標添加動態(tài)效果，優(yōu)化用戶交互體驗。