最近我在浏览别的博客的文章时,无意间发现了一个很好看的小装饰。那就是在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>
    .fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
    }

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

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

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

WordPress怎样设置菜单栏旋转小图标的更多相关文章

  1. android Editview中加小图标或者文字实现

    关于这个问题,如果只是加小图标的话,已经提供了很好的支持,drawableLeft属性就可以设置左边的小图标,类推,右边也可以 不过如果你要加的是文字,我找了下,没有相应的属性,我们只能通过转换思路去 ...

  2. css3 向上淡入 小图标翻转 360度旋转

    代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...

  3. jquery easyui iconcls(小图标)属性的设置

    今天用easyui做accordion的时候,觉得它自带的图标不够漂亮,想换成自己的图标,可是菜鸟我不知道怎么设置,上网查找,因为问题太水了,找不到,只好自己摸索,现在终于解决了,所以记录下来,同时也 ...

  4. echarts设置小图标位置

    // <!-- 左上角小图标 --> toolbox: { show : true, // orient: 'horizontal', // 布局方式,默认为水平布局,可选为: // // ...

  5. 用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  6. 请用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  7. fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  8. CSS之fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  9. [转]请用fontAwesome代替网页icon小图标

    原文地址:https://www.cnblogs.com/wangfupeng1988/p/4129500.html 1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标, ...

随机推荐

  1. arcEngine开发之IMapControl接口

    简介 IMapControl接口最重要的是包含IMap属性,还提供另外的属性用于:管理一般的外观显示,管理图层,加载地图文档以及跟踪在界面上显示的图形. 小知识点:一般一个接口的最新实现是 Defau ...

  2. Web3与智能合约交互实战

    写在前面 在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互.这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dap ...

  3. python 关于操作文件的相关模块(os,sys,shutil,subprocess,configparser)

    一:os模块 os模块提供了许多允许你程序与操作系统直接交互的功能 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname&quo ...

  4. 关于新建Eclipse新建一个WEB项目后创建一个jsp文件头部报错问题?

    点击项目右键→Build Path→Libraries→AddLibrary→Server Runtime→Apache Tomcat v7.0→Finsh  操作步骤如上! http://jingy ...

  5. Nagios安装、配置、问题记录

    http://youyizhimen.blog.163.com/blog/static/170917267201201745523276/ 本文描述了我在使用Nagios的过程中遇到的一些问题.解决办 ...

  6. iOS推送:Java服务器端发送表情(绘文字)

    http://blog.csdn.net/musou_ldns/article/details/8692520 功能的时候,客户要求能够给iphone发送表情图标,也就是绘文字. 手机环境:iOS5. ...

  7. 国内第一本micropython的书出版《机器人Python极客编程入门与实战》

    第一本micropython的书<机器人Python极客编程入门与实战>. 购买地址:https://item.taobao.com/item.htm?spm=2013.1.w4018-1 ...

  8. python九九

    学了有一段时间了,才发现自己连九九乘法表都写不出,好好笑,哈哈. 代码实现: for i in range(1,10): for j in range(1,i+1): print('%dx%d=%-2 ...

  9. 6种基础排序算法java源码+图文解析[面试宝典]

    一.概述 作为一个合格的程序员,算法是必备技能,特此总结6大基础算法.java版强烈推荐<算法第四版>非常适合入手,所有算法网上可以找到源码下载. PS:本文讲解算法分三步:1.思想2.图 ...

  10. 【爆料】-《伯明翰大学学院毕业证书》UCB一模一样原件

    ☞伯明翰大学学院毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归 ...