HTML5底部圖標導航是一種非常常見的網頁設計技巧，可以讓用戶在瀏覽網頁時更加方便快捷地導航和瀏覽內容。如果你想在你的網頁上添加這樣的導航，下面是一個基本的HTML5底部圖標導航代碼示例：

<nav class="bottom-nav">
<a href="#"><i class="fa fa-home"></i><span>首頁</span></a>
<a href="#"><i class="fa fa-book"></i><span>文章</span></a>
<a href="#"><i class="fa fa-user"></i><span>個人中心</span></a>
<a href="#"><i class="fa fa-cog"></i><span>設置</span></a>
</nav>

這個示例代碼中，我們使用了一個nav元素作為整個底部導航的容器，并添加了一個class="bottom-nav"作為樣式類。在nav標簽內部，我們使用了四個a標簽來創建四個導航按鈕，每個按鈕包括一個圖標和一個描述文字。在圖標部分，我們使用了FontAwesome字體圖標庫中的圖標，這些圖標可以用比較簡單的方式在網頁上使用。在文字描述部分，我們使用了一個span元素來包裹文字內容。 在這段代碼中，我們使用了HTML5中的新元素nav來創建一個語義化的底部導航容器，這能夠使得搜索引擎更加準確地理解我們的網頁結構。此外，我們還使用了FontAwesome字體圖標庫，這些圖標庫能夠為我們提供很多現成的圖標，并且減少了圖片資源的網絡請求。 需要注意的是，這只是一個簡單的示例代碼。如果你想要更加豐富和定制化的底部導航，你需要使用更多的HTML和CSS知識，并進行更加深入的學習。希望這個示例代碼對你有些啟發和幫助。