wordpress导航标 wordpress导航源码

关于wordpress 添加导航菜单图标

这个的前提是导航在header里，不在的话你要对应着你的主题改位置

成都创新互联从2013年创立，是专业互联网技术服务公司，拥有项目网站建设、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元肃南裕固族自治做网站,已为上家服务,为肃南裕固族自治各地企业和个人服务,联系电话:13518219792

首先，登录您的WordPress管理后台，依次进入【Appearance(外观) – Menus(菜单或叫做导航菜单)】模块，进入导航菜单设置页面；

如果您之前没有使用或者没有设置过菜单的话，您需要点击右侧上方的“+”按钮，添加新的 Menu Name(菜单名)，之后，点击右侧的 Create Menu(创建菜单)按钮，激活新的菜单(本例新建菜单名称为header_menu)

建立新菜单header_menu后，默认状态的菜单是空的；在这个页面左侧，你可以看到 Theme Locations(主题位置)、Custom Links(自定义链接)、Pages(页面列表)、Categories(分类列表)等内容。

在左侧的这些内容中，选择你要显示的页面、分类或自定义链接等项目后，点击各个项目分别对应的 Add to Menu(添加到菜单)按钮，使得你选中的栏目添加到右侧的新建菜单header_menu中，以添加Pages(页面列表)项目为例

添加到右侧新建菜单header_menu中的栏目以列表形式出现，现在你需要在这里，用鼠标上下拖拽的方式排列菜单的显示顺序；需要注意的是添加进来的菜单都是一级显示的，如果你要建立二级（多级）菜单的话，你还需要同样适用鼠标上下左右标拖拽方式设置二级（多级）菜单，每右移一格为一级

保存完后，您的自定义菜单就设置好了。

说简单一下，利用插件实现，试试这个插件Font Awesome 4 Menus，

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

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

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

图标字体选择器名称，打开此页查看：

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

i class="fa fa-home"/i

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

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

在主题设置+自定义CSS里面加入如下代码即可实现哦！

.menu-item.hot:after {

background-color: red;

border-radius: 3px;

color: #fff;

content: "HOT";

font-size: 10px;

line-height:1;

padding: 1px 3px;

position: absolute;

right: -1px;

top: 12px;

}

当前文章：wordpress导航标 wordpress导航源码
URL地址：http://cdiso.cn/article/ddecess.html