zoukankan      html  css  js  c++  java
  • WordPress怎样设置菜单栏旋转小图标

    最近我在浏览别的博客的文章时,无意间发现了一个很好看的小装饰。那就是在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博客

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

    无论怎样,我们都要笑对生活。
  • 相关阅读:
    EXT性能优化(转载)
    xampp 下配置mail()函数发邮件
    从存储过程中返回结果 (转载)
    HDU1394 Minimum Inversion Number
    HDU4414 Finding crosses
    POJ1328 Radar Installation
    HDU3308 LCIS
    POJ2352 Stars
    POJ2513 Colored Sticks
    HDU4027 Can you answer these queries?
  • 原文地址:https://www.cnblogs.com/yuantongblog/p/10548734.html
Copyright © 2011-2022 走看看