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. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标, ...
随机推荐
- java多线程及线程安全详解
为什么要使用多线程: 单线程只能干一件事 而多线程可以同时干好多事(将任务放到线程里执行 效率高) 而所谓同时干并不是真正意义上的同时 只是(这里就叫CPU)cpu在每个线程中随机切换来执行 ...
- BackBox错误,无法获得锁...资源暂时不可用...无法锁定管理目录
今天准备给BackBox安装leafpad时,输入 sudo apt install leafpad 后出现了如下的错误提示: E: 无法获得锁 /var/lib/dpkg/lock - open ( ...
- jQuery学习之旅 Item2 选择器【二】
这里接着上一个Item1 把jQuery的选择器讲完.主要有:属性过滤器和子元素过滤器 点击"名称"会跳转到此方法的jQuery官方说明文档. 5. 属性过滤器 Attribute ...
- nodejs模块xml2js解析xml的坑
在一个项目中,用到nodejs模块xml2js解析xml,xml的数据如下: <xml> <MsgId>6197906553041859764</MsgId> &l ...
- JS 总结----基础部分
javascript基础:1.每个属性都可以加ID2.写函数的时候注意 == 和 = 不要写错了3.html里面怎么写js里面就怎么写,但是有一例外 className 比如oDiv.class = ...
- 使用wordpress搭建自己的独立博客
最近想要搭建自己的私人博客, 各种百度,完整的搭建步骤如下! 首先得要有自己的vps或者云主机,我这里是自己的云主机,有自己的域名(我这边目前没有买域名)! 搭建步骤! 1,安装lnmp(linux+ ...
- ASP.NET Core Identity Hands On(1)——Identity 初次体验
ASP.NET Core Identity是用于构建ASP.NET Core Web应用程序的成员资格系统,包括成员资格.登录和用户数据存储 这是来自于 ASP.NET Core Identity 仓 ...
- Java 面试知识点解析(七)——Web篇
前言: 在遨游了一番 Java Web 的世界之后,发现了自己的一些缺失,所以就着一篇深度好文:知名互联网公司校招 Java 开发岗面试知识点解析 ,来好好的对 Java 知识点进行复习和学习一番,大 ...
- 基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统
前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能 ...
- Oracle解锁scott账号
在安装Oracle的最后一步,有一个口令管理的操作,当时忘了给scott账号解锁了(Oracle为程序测试提供的一个普通账户,口令管理中可以对数据库用户设置密码,默认是锁定的).现在想给scott这个 ...