WordPress导航菜单图标字体 awesome

共计 1351 个字符，预计需要花费 4 分钟才能阅读完成。

什么是图标字体？首先来看一下效果图：

在文章底部下部压缩包 awesome.zip 并解压到当前主题根目录下

怎么实现这样的效果呢？
一、编辑 WordPress 当前主题目录下 functions.php 文件，在 <?php 之后添加如下代码：

// 集成图标字体功能
include("awesome/main.php");

二、WordPress 后台 ==> 外观 ==> 菜单，然后点开已有菜单，将得到的 class 填入到 CSS 类即可，比如我在官方图标库查到“home”图标的 class 是 fa fa-home

有些博主的菜单结构下没有 CSS 类这项，可在上面“显示选项”中勾选开启：

保存之后就可以显示图一的效果了。如果刷新后没有显示，可能是你的 WordPress 版本太低了, 需要升级.

如果想要更多的 css 类定义图标可以到官方网站上面去找:

http://fortawesome.github.io/Font-Awesome/icons/

优化 CSS, 打开 awesome 文件夹，编辑 css 文件夹下的 font-awesome.min.css 文件，删除没用到的图标 css 定义即可。

本文附件已提供修改完成的 CSS

/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@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);
}

awesome.zip|https://www.lanzous.com/iad6x0h| 无