当前位置： 移动技术网 > IT编程>网页制作>CSS > WordPress怎样设置菜单栏旋转小图标

WordPress怎样设置菜单栏旋转小图标

2019年03月18日  | 移动技术网IT编程  | 我要评论

最近我在浏览别的博客的文章时，无意间发现了一个很好看的小装饰。那就是在wordpress菜单栏上的小图标。于是我研究了研究，弄到了设置方法之后决定把它分享出来。

wordpress怎样添加菜单栏小图标菜单栏的小图标

设置步骤：

1， 我们先到wordpress后台--插件--安装插件页面 搜索：font awesome 4 menus，下载安装并启用。

2， wordpress后台---外观---菜单，点开显示选项，并且勾选上css类，于是在下面的菜单中就有了css类（可选）

wordpress怎样添加菜单栏小图标如图所示

3， 打开这个图标选择网站：https://fortawesome.github.io/font-awesome/icons/ 点开一个认为合适的图标字体，在下会显示类似这样的css代码

  1. 1 <i class="fa fa-home"></i>

     

4，我们复制代码中间像“fa fa-home”的内容粘贴到菜单栏的css类中，保存之后到网站上查看就ok了。

注：前缀尽量为fa fa-xxxx如果为fas fa-xxxx可能会显示不出来！！！

菜单栏图标转动方法：

首先在主题的css代码中添加如下代码：

  1. 1 <br>
2 .fa-spin {
3 animation: 2s linear 0s normal none infinite running fa-spin;
4 }

     

然后在菜单里，在我们刚才设置的fa fa-xxxx后面添加上fa-spin就好了，或者是直接添加以下代码：

  1. <i class="fa fa-wordpress fa-spin"></i>wazty博客

     

保存之后刷新博客，你就能看到旋转的小图标了！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网