目前新版本的WPCOM主題菜單都默認已經(jīng)支持圖標(biāo)的選取,可通過后臺菜單設(shè)置選項直接勾選需要的圖標(biāo),簡單快捷,無需再添加繁瑣的代碼即可實現(xiàn)菜單圖標(biāo)功能

WPCOM主題自帶了數(shù)百個圖標(biāo)庫,在TheSimple的導(dǎo)航菜單中就用到了,但是在wordpress的后臺設(shè)置面板中,我們并沒有提供設(shè)置的入口,那么需要怎么使用它呢?這里就給大家簡單介紹一下。

其實使用還是非常簡單的,首先進入Wordpress后臺,進入外觀>菜單,然后選擇要編輯的菜單,如果 沒有菜單那么就創(chuàng)建新菜單,如圖所示:

如何給網(wǎng)站導(dǎo)航菜單添加圖標(biāo)

從這個頁面可以看到在左側(cè)有一些項目,例如頁面、分類目錄、自定義鏈接等,只需要將左邊的項目選中,然后點擊添加到菜單,即可添加一個菜單鏈接,添加后會出現(xiàn)在右側(cè)菜單結(jié)構(gòu)里面,這個界面可以通過拖動改變順序,也可以通過往右側(cè)拖動實現(xiàn)二級菜單的設(shè)置,這樣就可以建立好一個菜單了。

不過這樣簡單設(shè)置保存以后還是不會出現(xiàn)圖標(biāo),細心的你有沒有發(fā)現(xiàn),上圖中首頁和產(chǎn)品介紹前有一小段代碼呢?對了,這就是實現(xiàn)圖標(biāo)顯示的關(guān)鍵代碼:

<i?class="fa?fa-home"></i>

在菜單導(dǎo)航標(biāo)簽前面加上上面的代碼即可添加一個小房子的圖標(biāo),如圖,點擊菜單右側(cè)的小箭頭展開:

如何給網(wǎng)站導(dǎo)航菜單添加圖標(biāo)

如果想要添加其他圖標(biāo),修改代碼中的home即可,具體圖標(biāo)名稱請參考:https://fontawesome.com/v4.7.0/icons/

這樣設(shè)置以后,就可以看到導(dǎo)航圖標(biāo)了,效果如下:

如何給網(wǎng)站導(dǎo)航菜單添加圖標(biāo)