最近我在浏览别的博客的文章时,无意间发现了一个很好看的小装饰。那就是在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. 微信小程序-获取地理位置

    近期公司使用微信小程序开发一套应用,涉及到使用小程序的获取地理位置接口,但是在使用测试过程中发现获取的经纬度偏差较大, 之后进行了一番搜索,终于找到了, 原文地址:http://blog.csdn.n ...

  2. WPF 毛笔字

    1.先来看看InkCanvas的一般用法: <InkCanvas>     <InkCanvas.DefaultDrawingAttributes>           < ...

  3. Thread部分总结以及小例子

    Thread总结:一直以来用thread比较多,一般会在同步以及ui中用到.以下对于经常用作为简单介绍.一 实现方法: 一种直接new thread,另外一种是实现Runnable接口,在创建thre ...

  4. Get Docker CE for CentOS

    To get started with Docker CE on CentOS, make sure you meet the prerequisites, then install Docker. ...

  5. Spring Security 源码分析(四):Spring Social实现微信社交登录

    社交登录又称作社会化登录(Social Login),是指网站的用户可以使用腾讯QQ.人人网.开心网.新浪微博.搜狐微博.腾讯微博.淘宝.豆瓣.MSN.Google等社会化媒体账号登录该网站. 前言 ...

  6. javascript 内存管理

    1.垃圾回收机制 在编写Javascript程序时,开发人员不用关心内存问题,内存分配及无用内存的回收完全实现了自动化管理.垃圾收集器会按照预定的时间间隔, 周期性的找出那些不再继续使用的变量,然后释 ...

  7. Javascript书籍推荐----(步步为赢)

    在此分享一些高清javascript书籍,因为我也没有全部看完,所以在这只是推荐,不同的书适合不同的人,所有的书在网上均有电子书,若找不到,请在博客留言,我有大部分书籍的电子稿.希望有更多的好书分享出 ...

  8. 20.如何从app业务逻辑提炼api接口

    在app后端的工作中,设计api是一个很考验设计能力的工作.在项目的初始阶段,只知道具体的业务逻辑,那怎么把业务逻辑抽象和提炼,设计出api呢?通过阅读本文,可解答以上疑惑. 在本文中,是用以前做过的 ...

  9. BZOJ_3144_[Hnoi2013]切糕_最小割

    BZOJ_3144_[Hnoi2013]切糕_最小割 Description Input 第一行是三个正整数P,Q,R,表示切糕的长P. 宽Q.高R.第二行有一个非负整数D,表示光滑性要求.接下来是R ...

  10. zookeeper(zkCli)命令概览

    连接: ./zkCli.sh -timeout 0 -r -server ip:port -timeout:当前会话的超时时间,zookeper依靠与客户端的心跳来判断会话是否有效,单位是毫秒-r: ...