CSS3豎直圖標導航是一種非常流行的網頁導航樣式，它能夠讓網頁導航更加美觀、實用。下面我們來介紹一下如何使用CSS3實現豎直圖標導航。

<ul class="vertical-nav">
<li><a href="#"><i class="fa fa-home"></i>主頁</a></li>
<li><a href="#"><i class="fa fa-envelope"></i>信息</a></li>
<li><a href="#"><i class="fa fa-globe"></i>新聞</a></li>
<li><a href="#"><i class="fa fa-users"></i>社交</a></li>
<li><a href="#"><i class="fa fa-cog"></i>設置</a></li>
</ul>
.vertical-nav {
list-style: none;
margin: 0;
padding:0;
}
.vertical-nav li {
margin: 0;
padding:0;
position: relative;
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
vertical-align: top;
background: #ccc;
transition:all 0.3s ease;
}
.vertical-nav li:hover {
background: #555;
}
.vertical-nav li a {
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
}
.vertical-nav li i {
font-size: 24px;
margin: 8px 0;
}

以上代碼中，我們使用了FontAwesome圖標庫來實現圖標的顯示效果。我們首先設置了

列表的樣式為無序列表，然后將每個列表項設置為inline-block顯示，并指定其寬度、高度、背景顏色等樣式屬性。

當鼠標懸浮在列表項上時，我們使用CSS3的transition屬性來設置其顏色漸變效果。

最后，我們將圖標和導航文字包含在標簽中，并設置為display:block，完成了豎直圖標導航的實現。