wordpress导航菜单如何加图标方法

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最文件末尾查看路径是否与实际一致。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部