前言

  刚刚安装完主题模板,设置好菜单。发现菜单栏光秃秃的,发现很多大佬在其前面加上可爱图标,心生羡慕,就也开始了添加之路,让自己Blog更美观。

通用WP博客主题

1.首先安装 Font Awesome 4 Menus 插件,并且启用(可点此下载我 手工汉化的插件)。
然后打开“外观”--“菜单”选项,点击右上角的“显示选项”,勾选“CSS类”。

2.然后在菜单选项中,在 “CSS类” 填入你想要的图标名称。
可以在这个网站查找图标:Fontawesome 中文网
注意:填写名称必须是 “fa” 与空格开头!

图标名使用方法参考:

3.最后保存菜单,在前台刷新就可以看到效果了!如果没有效果,换个图标试试哦!
4.可以不用插件,在主题头文件引用 font-awesome.css 然后按照下方 Sakura主题 修改即可

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

Sakura主题修改

由于 Sakura 主题已经引用了 Fontawesome 所以直接 后台-外观-修改菜单 即可,找到你想要的图标参考如下填写

<i class=" fa fa-quora"></i> 初见

动态图标设置

  1. 我们需要用到这个网站Font Awesome Animation,然后还需要在头部引用一个 CSS【Sakura 主题同样自带,此步跳过】
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css">
  1. 然后找到你要的图标和想要的动画,继续修改 后台-外观-菜单,全部填到标题里
<span class="faa-parent animated-hover"><i class="fa fa fa-quora faa-pulse"></i> 初见</span>

3.如果没有效果,换个图标和动画试试哦

图标补充修改

修改首页Discovery图标及其样式

打开路径themes/Sakura/index.php文件CTRL+F搜索fa按如下图

效果图

本文部分转载雾时の森


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。