在網頁設計中，底部導航欄是非常常見的一種設計，而底部導航欄的圖標文字的設計也是至關重要的一步。在CSS中，可以使用眾多的屬性來實現底部導航欄圖標文字的設計。

首先，使用pre標簽來展示以下代碼：

/* 底部導航欄樣式 */
.bottom-nav {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: #fff;
}
/* 圖標樣式 */
.bottom-nav .icon {
display: inline-block;
width: 25%;
text-align: center;
}
/* 文字樣式 */
.bottom-nav .text {
font-size: 12px;
color: #666;
margin-top: 5px;
}

以上示例中，使用了position屬性將底部導航欄定位到頁面底部，并且使用了width和height屬性來設置底部導航欄的寬度和高度。同時，底部導航欄中的圖標和文字分別使用了.icon和.text的類名來實現樣式的分離。

其中，圖標樣式使用了display屬性將元素設置為inline-block，使其能夠在同一行內顯示，并且使用text-align屬性將圖標的文本居中對齊。在文字樣式中，使用了font-size和color屬性來設置文字的大小和顏色，使用margin-top屬性來設置文字距離圖標的上邊距。

通過以上代碼的設計，可以實現一個美觀的底部導航欄圖標文字設計，為網頁提供更好的用戶交互體驗。