用了wordpress后，大伙都不約而同的給菜單用上了圖標字體，確實給博客帶來了一定的美化效果。不過，在強迫癥的眼里，能代碼化就盡量不用插件吧！于是將這個插件改造成代碼版，順便精簡了基本用不到的?shortcode 圖標調用功能。在這里，我為大家帶來了這兩種方式的具體操作方法。

一、插件使用方法

下載 ?font-awesome-4-menus這個插件并安裝。

通過這個網站找到自己喜歡的圖標http://fortawesome.github.io/Font-Awesome/icons/，找到自己中意的圖標后，點擊打開即可得到相應的標簽class了！

那如何使用到 WordPress 導航菜單呢？

很簡單，依次打開 WordPress 后臺==>外觀==>菜單，然后點開已有菜單，將得到的class填入到CSS類即可，比如我在官方圖標庫查到“家”圖標的class是 fa fa-home，所以我如下圖填寫：

保存之后，WordPress 導航菜單上的【首頁】前面就會出現一個“家”的圖標了。

如果發現點開菜單沒有 CSS 類欄位怎么辦？

很明顯，你沒把這個功能開出來。點擊菜單頁面右上方的【顯示選項】，勾上CSS類即可：

二代碼安裝方法

好了， 做完上面的操作后，就可以徹底刪除?font awesome 4 menus 這個插件了，強迫癥們是不是又感覺輕松了一些呢？哈哈！

不過，有心的朋友可能發現了，這個圖標字體的CSS文件達到20多kb，而我們真正要用的也就幾個到十幾個圖標而已！所以，喜歡折騰的朋友可以進一步精簡一下CSS文件。

打開?awesome 文件夾，編輯css文件夾下的?font-awesome.min.css 文件，刪除沒用到的圖標css定義即可。

不過這個?font-awesome.min.css 文件是壓縮后的，看起來很暈！可以先百度搜一下CSS美化工具，將其格式化之后再來編輯！

不過CSS前面引入字體和公用樣式代碼記得要保留！

CSS

@font-face {

font-family: ‘FontAwesome’;

src: url(‘../fonts/fontawesome-webfont.eot?v=4.3.0’);

src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0′) format(’embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.3.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.3.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.3.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

.fa {

display: inline-block;

font: normal normal normal 14px/1 FontAwesome;

font-size: inherit;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

transform: translate

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

@font-face {

font-family: ‘FontAwesome’;

src: url(‘../fonts/fontawesome-webfont.eot?v=4.3.0’);

src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0’) format(’embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.3.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.3.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.3.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

.fa{

display: inline-block;

font: normal normal normal 14px/1 FontAwesome;

font-size: inherit;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

transform: translate(0, 0);

}

好了，本文就分享到這里，喜歡折騰的朋友可以試試看。

Kan博客資源網 , 版權所有丨如未注明 , 均為原創丨本網站采用BY-NC-SA協議進行授權 , 轉載請注明來自Kan博客資源網

總結

以上是生活随笔為你收集整理的wordpress菜单显示css字体,WordPress导航菜单图标字体插件font awesome 4 menus的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。