今天我們來談一下如何在CSS導航欄中插入圖標。通常情況下，我們會使用font-awesome等外部庫來實現(xiàn)這個功能。但是，如果我們不想引用外部庫或者想要使用自定義圖標呢？下面我們來看看如何實現(xiàn)。 首先，在HTML中我們需要添加一個空元素用于顯示圖標。此處我們可以使用span標簽，并給它添加一個類名以便于CSS選擇器的匹配。

<ul class="nav-bar">
<li><a href="#">首頁</a><span class="icon-home"></span></li>
<li><a href="#">資訊</a><span class="icon-news"></span></li>
<li><a href="#">下載</a><span class="icon-download"></span></li>
</ul>

這里我們給span標簽添加了三個類名，分別是icon-home、icon-news和icon-download，用來表示不同的圖標。 接下來，在CSS文件中，我們要定義這三個圖標的樣式。此處我們使用偽元素::before來實現(xiàn)，具體做法是給偽元素設置content屬性，并設置顯示的圖片或字符的樣式。

.icon-home::before{ content: "\"; font-family: "FontAwesome"; }
.icon-news::before{ content: "\"; font-family: "FontAwesome"; }
.icon-download::before{ content: "\"; font-family: "FontAwesome"; }

上述代碼中，我們使用了FontAwesome字體庫中的三個圖標，也可以使用自定義的圖片或字符代替，只需要將content屬性的值替換成圖片或字符的地址或編碼即可。 至此，我們已經(jīng)成功地在CSS導航欄中插入了圖標。如果需要修改樣式或增加更多的圖標，只需要在HTML和CSS文件中相應地進行修改即可。