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. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标, ...
随机推荐
- 计算机协议、标准以及OSI模型的简单介绍
由概念启发学习,引导学习.本篇文章中包含了一些最基本的概念和底层知识.虽然零碎,但是这是基础. 一.协议和标准 协议指的是一组控制数据通信的规则.协议有三要素:语法(syntax),语义(semant ...
- java 字符常量池
一.题目: 问题:String str = new String(“hello”),“hello”在内存中是怎么分配的? 答案是:堆,字符串常量区. Java中的字符串常量池和JVM运行时数据区 ...
- linux简单内核链表排序
#include <stdio.h> #include <stdlib.h> #define container_of(ptr, type, mem)(type *)((uns ...
- latex数学公式笔记
1.空格 两个quad空格 a \qquad b $a \qquad b$ 两个m的宽度 quad空格 a \quad b $a \quad b$ 一个m的宽度 大空格 a\ b $a\ b$ 1/3 ...
- 谁还没遇上过NoClassDefFoundError咋地——浅谈字节码生成与热部署
谁还没遇上过NoClassDefFoundError咋地--浅谈字节码生成与热部署 前言 在Java程序员的世界里,NoClassDefFoundError是一类相当令人厌恶的错误,因为这类错误通常非 ...
- js中的拷贝问题
浅拷贝的实现 // 浅拷贝函数 var dad = {name:'chen',age:18}; var son = {sex:'男'}; function clone(dad,son){ var so ...
- JS题目合集---新技术层出不穷,打好基础才是上策~
在IT界中公司对JavaScript开发者的要求还是比较高的,但是如果JavaScript开发者的技能和经验都达到了一定的级别,那他们还是很容易跳到优秀的公司的,当然薪水就更不是问题了.但是在面试之前 ...
- app后端设计(7)-- 项目管理
移动互联网行业是个快速发展的行业,需求不断变化,产品更新快.基于移动互联网的以上特点,在开发产品的过程中,我们放弃了传统的瀑布流开发模型,引入了精益的理念和scrum这个敏捷开发框架,下面谈谈实施过程 ...
- python使用itchat库实现微信机器人
itchat是一个开源的微信个人号接口,可以使用该库进行微信网页版中的所有操作,比如:所有好友.添加好友.拉好友群聊.微信机器人等等.详细用户请看文档介绍,在这里. 本文主要使用该库完成一个能够处理微 ...
- FTP用户无法登陆排错详解
FTP作为一种简单便捷的文件共享技术,在许多企业内部得到使用.若启用FTP的验证控制,管理员更可对不同的用户设置不同的访问权限,控制用户对特定内容的访问.IIS中的FTP站点只有一种验证方式,即基本验 ...