WordPress怎样设置菜单栏旋转小图标
程序员文章站
2022-03-03 12:13:00
最近我在浏览别的博客的文章时,无意间发现了一个很好看的小装饰。那就是在WordPress菜单栏上的小图标。于是我研究了研究,弄到了设置方法之后决定把它分享出来。 菜单栏的小图标 设置步骤: 1, 我们先到WordPress后台--插件--安装插件页面 搜索:Font Awesome 4 Menus, ......
最近我在浏览别的博客的文章时,无意间发现了一个很好看的小装饰。那就是在wordpress菜单栏上的小图标。于是我研究了研究,弄到了设置方法之后决定把它分享出来。
菜单栏的小图标
设置步骤:
1, 我们先到wordpress后台--插件--安装插件页面 搜索:font awesome 4 menus,下载安装并启用。
2, wordpress后台---外观---菜单,点开显示选项,并且勾选上css类,于是在下面的菜单中就有了css类(可选)
如图所示
3, 打开这个图标选择网站:https://fortawesome.github.io/font-awesome/icons/ 点开一个认为合适的图标字体,在下会显示类似这样的css代码
-
1 <i class="fa fa-home"></i>
4,我们复制代码中间像“fa fa-home”的内容粘贴到菜单栏的css类中,保存之后到网站上查看就ok了。
注:前缀尽量为fa fa-xxxx如果为fas fa-xxxx可能会显示不出来!!!
菜单栏图标转动方法:
首先在主题的css代码中添加如下代码:
-
1 <br> 2 .fa-spin { 3 animation: 2s linear 0s normal none infinite running fa-spin; 4 }
然后在菜单里,在我们刚才设置的fa fa-xxxx后面添加上fa-spin就好了,或者是直接添加以下代码:
-
<i class="fa fa-wordpress fa-spin"></i>wazty博客
保存之后刷新博客,你就能看到旋转的小图标了!
下一篇: 数据库日常练习题,每天进步一点点(2)