在進行網頁設計時，很多時候需要在頁面中加入一些圖標來增強視覺效果。CSS圖標兩行字布局便是一種經典的設計方式。這種布局適用于在標題下方加入簡短描述的場景，可以提供更加清晰明了的信息呈現方式。

實現CSS圖標兩行字布局可以采用以下步驟：

/* HTML代碼 */
<div class="icon-box">
<i class="icon icons-bag"></i>
<h3>購物袋</h3>
<p>這里是購物袋的描述</p>
</div>
/* CSS樣式 */
.icon-box {
width: 200px;
height: 100px;
text-align: center;
padding-top: 20px;
}
.icon {
font-size: 36px;
margin-bottom: 10px;
}
h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 14px;
}

在HTML代碼中，使用了一個div元素，設定了它的寬度和高度，以及居中對齊。在div元素內部，使用了一個i元素，用于顯示圖標。在本例中，使用的是一個叫做“icons-bag”的CSS類，可以在CSS樣式中定義具體的圖標樣式。接著，使用了一個h3元素和一個p元素，分別用于顯示標題和描述信息。

在CSS樣式中，定義了上述HTML代碼中實際使用到的元素樣式。其中，圖標元素的樣式中設置了font-size和margin-bottom兩個屬性，用于定義圖標的字體大小和下邊距。標題和描述信息則分別設置了font-size和font-weight屬性，用于定義它們的字體大小和字重。這里定制的樣式可以根據實際需求而調整。

通過以上步驟，即可成功實現CSS圖標兩行字布局。這種設計方式簡潔明了，易于理解，非常適合用于各類網頁設計項目。