wordpress各种主题的导航菜单通常是文字,在每个菜单前面加一个图标看起来是不是个性了许多,下面来看一下wordpress导航菜单如何加图标的。
1. 下载font awesome格式图标
font awesome提供的是一种字体型格式图标,它的免费图标有超过1300多个,下载使用部分大小不超过3M,这种字体图标很方便的随菜单文字大小色彩变化页保持一致。打开fontawesome点击For the Web下载字体图标
2.将字体图标放置合适路径位置
以wordpress默认主题twentysixteen为例,将下载的压缩文件解压后只保留webfonts文件侠和css文件夹下的all.css,其它文件可以删除,将webfonts文件件及all.css复制到twentysixteen主题下的css文件夹下面
3. 修改twentysixteen主题的functions.php文件
wordpress常见主题css样式表是通过在functions.php里用wp_enqueue_style()引用的。所以用纯文本编辑器打开functions.php找到wp_enqueue_style这行后另起一行加入”wp_enqueue_style( ‘all’, get_template_directory_uri() . ‘/css/all.css’, array( ), ‘5.3.1’ );”保存。
4. 在菜单前加入个性的font awesome图标
打开https://fontawesome.com/icons?d=gallery&m=free后在里面选择合适的图标并记录图标下方的的名称。
登陆wordpress后台,进入外观的菜单管理,在菜单结构的每个内容下面的导航标签下加入”<i class=”fas fa-XXX”></i>”,”XXX”就是你选择图标的名称,保存刷新再打开你的站点,就可以看见每个菜单前已加入了你选择的图标。
如果没有显示图标或显示方框,很有可能webfonts文件夹路径不正确,可以打开all.css最文件末尾查看路径是否与实际一致。