[教程]从零WordPress菜单栏开发-图标添加

前言

进阶教程，不适合萌新，但适合开发中的萌新。月宅教你从无到有，来完成一个完整的导航栏，但不包括CSS样式。

教程一

拿到一个什么都没有的空主题，想要在后台拥有菜单栏按钮，那么就必须先注册这个挂件。在functions.php文件下添加。如果你的网站拥有这些菜单，那么添加，如果只需要头部，那么就这一个头部菜单。

//注册菜单栏
 register_nav_menus( array(
 'header_menu' => '头部菜单' ,
 'header_right_menu' => '头部右侧菜单' ,
 'footmenu1' => '底部菜单1' ,
 'footmenu2' => '底部菜单2',
 'footmenu3' => '底部菜单3',
 ) );

教程二

已经拥有了菜单按钮后，需要输出该菜单栏，如果你已经编写好了CSS样式，那么直接插入到ul中，月宅的自己写的导航栏已经用CSS写好了样式与二级菜单，只需要把这行代码插入ul中就可以输出li标签。

 <?php wp_nav_menu( array( 'menu' => 'header_menu', 'depth' => 0) );?>

教程三

目前已经拥有了菜单栏添加的地方，也有了首页顶部导航栏，那么接下来是需要图标。我们需要下载官方图标库。到http://fontawesome.io/进行下载。然后将css、fonts、less、scss上传到主题文件夹中。如果你不需要字体，那么只需要输出css，如月宅自己的地址。

	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/ico/css/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/ico/css/font-awesome.min.css">

教程四

然后我们到这里http://fontawesome.io/icons/ 点开需要的图标，接着到刚刚的菜单栏下，直接写在名字前面即可。例如：

<i class="fa fa-circle-o-notch" aria-hidden="true"></i>关于↓