WordPress网站菜单图标CSS怎么添加 安装WP导航图标字体插件

WordPress网站上，添加图标字体，非常美观，支持响应式设计的WP主题模板。

图标字体和小图像格式的图标不同：

• 支持视网膜显示.
• 可以无限放大。
• 将导航菜单上的项目分别个性化为Icon字体。

如何使用图标字体？

第 1 步：安装插件

• WP后台 → 插件 → 安装插件 → 搜索“Font Awesome 4 Menus”，下载并安装并启用；
• 你也可以直接在网站上下载，然后上传后通过FTP上传或安装。

第 2 步：寻找图标字体

 点此前往 图标字体官方网站

打开图标字体官方网站，找到我们需要的图标 ▼

• 你可以在单击图标时显示的 <i class =“fa fa-home”> </ i>复制 fa fa-home。
• 如果主页图标名称为home，那么我们需要在 “菜单CSS类” 中输入 fas fa-home

第 3 步：菜单输入CSS类字体图标

• WP后台 → 外观 → 菜单，进入菜单设置页面。
• 选择并编辑一个菜单项，
• 在CSS类中，粘贴我们刚刚复制的图标字体名称（fa fa-home） ▼

• （其他图标的操作是相同的）
• 最后点击保存可以。

注意事项

如果在编辑菜单项面板中没有CSS类，则可以打开右上角的 “显示选项”，并在显示菜单的高级属性中，选中“CSS类” ▼

• 当然，这个图标字体库不限于在导航菜单中使用，只要将相应的图标代码添加到主题模板的相应位置即可。

前图标字体非常流行，图标字体使用简单，与图片格式的小图标相比，支持视网膜显示，可以无限放大。特别是一些响应式设计的主题模板，都会或多或少使用图标字体，包括我制作的Ality主题和目前用的Begin主题，除了主题集成的图标字体，我们还可以单独为导航菜单上的项目也配上个性化的图标字体。

具体方法：

一、WP后台--插件--安装插件页面搜索：Font Awesome 4 Menus，下载安装并启用。

(注：Begin主题用户无需安装上述插件)

二、WP后台---外观---菜单，进入菜单设置页面，选择并编辑一个菜单项，在CSS类中输入一个图标字体选择器名称

如果在编辑菜单项目面板中无CSS类，可以打开右上角的“显示选项”，在显示菜单高级属性中勾选“CSS类”。

图标字体选择器名称，打开此页查看：http://fontawesome.io/icons/

点开一个认为合适的图标字体，在下会显示类似：

只需在菜单CSS类中输入fa fa-home就可以了。

当然这个图标字体库并不只局限于使用在导航菜单上，只要把相应的图标代码加到主题模板的相应位置，也同样可以显示。

如果认为上面插件提供的图标字体不符合自己的要求（其实这套Font Awesome图标字体早已烂大街），还可以自己做一套更加个性化的图标字体。

图标字体在线制作：https://icomoon.io/app/