HTML5圖標導航代碼讓網頁變得更加美觀和易于瀏覽。以下是一個簡單的例子，您可以使用它來設計您自己的網站導航。
首先，您需要為每個導航圖標分配一個唯一的ID，并在HTML中創建一個位于BODY標簽內的NAV標簽。這將告訴瀏覽器此處顯示導航。
<html> <head> <title>我的網站</title> </head> <body> <nav> <a href="#home" id="home-icon"></a> <a href="#about" id="about-icon"></a> <a href="#products" id="products-icon"></a> <a href="#contact" id="contact-icon"></a> </nav> </body> </html>接下來，您需要選擇和設置您的圖標。FontAwesome是一個很好的選擇，它提供了各種各樣的圖標，并且非常易于使用。 您需要將FontAwesome的CSS文件鏈接到您的HTML文件中。這樣，您就可以使用任何FontAwesome元素了。
<link rel="stylesheet" integrity="sha384-g6vbJHjyxmzR1XipQkhPuM2Ks5JPHA0UTarlPfzs3PjpkFV0ILbNxNFgswYXvNQ5" crossorigin="anonymous">使用FontAwesome圖標，您可以將每個導航元素綁定到它自己的ID，如下所示：
<nav> <a href="#home" id="home-icon"><i class="fas fa-home"></i></a> <a href="#about" id="about-icon"><i class="fas fa-user"></i></a> <a href="#products" id="products-icon"><i class="fas fa-shopping-bag"></i></a> <a href="#contact" id="contact-icon"><i class="fas fa-envelope"></i></a> </nav>最后，您可以使用CSS樣式表為這些元素添加樣式。您可以選擇設置其顏色，大小和其他屬性以確保它們與您的網站的設計風格相吻合。 這就是HTML5圖標導航代碼的基礎知識。通過使用FontAwesome圖標和CSS樣式表，您可以輕松地創建網站導航。
下一篇三級css導航菜單