WordPress怎样设置菜单栏旋转小图标
最近我在浏览别的博客的文章时,无意间发现了一个很好看的小装饰。那就是在WordPress菜单栏上的小图标。于是我研究了研究,弄到了设置方法之后决定把它分享出来。
菜单栏的小图标
设置步骤:
1, 我们先到WordPress后台--插件--安装插件页面 搜索:Font Awesome 4 Menus,下载安装并启用。
2, WordPress后台---外观---菜单,点开显示选项,并且勾选上CSS类,于是在下面的菜单中就有了CSS类(可选)
如图所示
3, 打开这个图标选择网站:https://fortawesome.github.io/Font-Awesome/icons/ 点开一个认为合适的图标字体,在下会显示类似这样的CSS代码
<i class="fa fa-home"></i>
4,我们复制代码中间像“fa fa-home”的内容粘贴到菜单栏的CSS类中,保存之后到网站上查看就OK了。
注:前缀尽量为fa fa-XXXX如果为fas fa-XXXX可能会显示不出来!!!
菜单栏图标转动方法:
首先在主题的CSS代码中添加如下代码:
<br>
.fa-spin {
animation: 2s linear 0s normal none infinite running fa-spin;
}
然后在菜单里,在我们刚才设置的fa fa-XXXX后面添加上fa-spin就好了,或者是直接添加以下代码:
<i class="fa fa-wordpress fa-spin"></i>WaZty博客
保存之后刷新博客,你就能看到旋转的小图标了!
WordPress怎样设置菜单栏旋转小图标的更多相关文章
- android Editview中加小图标或者文字实现
关于这个问题,如果只是加小图标的话,已经提供了很好的支持,drawableLeft属性就可以设置左边的小图标,类推,右边也可以 不过如果你要加的是文字,我找了下,没有相应的属性,我们只能通过转换思路去 ...
- css3 向上淡入 小图标翻转 360度旋转
代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...
- jquery easyui iconcls(小图标)属性的设置
今天用easyui做accordion的时候,觉得它自带的图标不够漂亮,想换成自己的图标,可是菜鸟我不知道怎么设置,上网查找,因为问题太水了,找不到,只好自己摸索,现在终于解决了,所以记录下来,同时也 ...
- echarts设置小图标位置
// <!-- 左上角小图标 --> toolbox: { show : true, // orient: 'horizontal', // 布局方式,默认为水平布局,可选为: // // ...
- 用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- 请用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- fontAwesome代替网页icon小图标
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...
- CSS之fontAwesome代替网页icon小图标
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...
- [转]请用fontAwesome代替网页icon小图标
原文地址:https://www.cnblogs.com/wangfupeng1988/p/4129500.html 1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标, ...
随机推荐
- 微信小程序-获取地理位置
近期公司使用微信小程序开发一套应用,涉及到使用小程序的获取地理位置接口,但是在使用测试过程中发现获取的经纬度偏差较大, 之后进行了一番搜索,终于找到了, 原文地址:http://blog.csdn.n ...
- WPF 毛笔字
1.先来看看InkCanvas的一般用法: <InkCanvas> <InkCanvas.DefaultDrawingAttributes> < ...
- Thread部分总结以及小例子
Thread总结:一直以来用thread比较多,一般会在同步以及ui中用到.以下对于经常用作为简单介绍.一 实现方法: 一种直接new thread,另外一种是实现Runnable接口,在创建thre ...
- Get Docker CE for CentOS
To get started with Docker CE on CentOS, make sure you meet the prerequisites, then install Docker. ...
- Spring Security 源码分析(四):Spring Social实现微信社交登录
社交登录又称作社会化登录(Social Login),是指网站的用户可以使用腾讯QQ.人人网.开心网.新浪微博.搜狐微博.腾讯微博.淘宝.豆瓣.MSN.Google等社会化媒体账号登录该网站. 前言 ...
- javascript 内存管理
1.垃圾回收机制 在编写Javascript程序时,开发人员不用关心内存问题,内存分配及无用内存的回收完全实现了自动化管理.垃圾收集器会按照预定的时间间隔, 周期性的找出那些不再继续使用的变量,然后释 ...
- Javascript书籍推荐----(步步为赢)
在此分享一些高清javascript书籍,因为我也没有全部看完,所以在这只是推荐,不同的书适合不同的人,所有的书在网上均有电子书,若找不到,请在博客留言,我有大部分书籍的电子稿.希望有更多的好书分享出 ...
- 20.如何从app业务逻辑提炼api接口
在app后端的工作中,设计api是一个很考验设计能力的工作.在项目的初始阶段,只知道具体的业务逻辑,那怎么把业务逻辑抽象和提炼,设计出api呢?通过阅读本文,可解答以上疑惑. 在本文中,是用以前做过的 ...
- BZOJ_3144_[Hnoi2013]切糕_最小割
BZOJ_3144_[Hnoi2013]切糕_最小割 Description Input 第一行是三个正整数P,Q,R,表示切糕的长P. 宽Q.高R.第二行有一个非负整数D,表示光滑性要求.接下来是R ...
- zookeeper(zkCli)命令概览
连接: ./zkCli.sh -timeout 0 -r -server ip:port -timeout:当前会话的超时时间,zookeper依靠与客户端的心跳来判断会话是否有效,单位是毫秒-r: ...