WordPress导航菜单图标字体插件font awesome 4 menus纯代码版
换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。
与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的。
不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 shortcode 图标调用功能。
下面说一下集成到主题的方法:
一、下载上传
下载并解压后得到 awesome 文件夹,整体上传到 WordPress 主题目录。
二、主题集成
编辑 WordPress 当前主题目录下 functions.php 文件,在<?php 之后添加如下代码:
//集成图标字体功能
include("awesome/main.php");
最后保存即可。
三、图标使用
图标字体的使用,相信大部分 Begin 用户都已经熟知了。对于首次使用的用户,张戈博客还是继续介绍下好了!
先贴一下效果截图,了解一下图标字体是个什么东东:
其实,就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。
理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加 class 来添加即可。
比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可:
<i class="fa fa-weixin"></i>
而我们想要更多的图标,就需要到官方的图标库里面去查找了:
http://fortawesome.github.io/Font-Awesome/icons/
找到自己中意的图标后,点击打开即可得到相应的标签 class 了!
那如何使用到 WordPress 导航菜单呢?
很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的 class 填入到 CSS 类即可,比如我在官方图标库查到“家”图标的 class 是 fa fa-home,所以我如下填写:
保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。
如果发现点开菜单没有 CSS 类栏位怎么办?
很明显,你没把这个功能开出来。点击菜单页面右上方的【显示选项】,勾上 CSS 类即可:
如果发现点击【显示选项】没动静怎么办?
看来你的 WordPress 也是升级 4.2 了。解决办法见张戈博客之前的分享【修复 WordPress 4.2 问题】
四、更多折腾
好了, 做完上面的操作后,就可以彻底删除 font awesome 4 menus 这个插件了,强迫症们是不是又感觉轻松了一些呢?哈哈!
不过,有心的朋友可能发现了,这个图标字体的 CSS 文件达到 20 多 kb,而我们真正要用的也就几个到十几个图标而已!所以,喜欢折腾的朋友可以进一步精简一下 CSS 文件。
打开 awesome 文件夹,编辑 css 文件夹下的 font-awesome.min.css 文件,删除没用到的图标 css 定义即可。
不过这个 font-awesome.min.css 文件是压缩后的,看起来很晕!可以先百度搜一下 CSS 美化工具,将其格式化之后再来编辑!
不过 CSS 前面引入字体和公用样式代码记得要保留,如下所示
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
好了,本文就分享到这里,喜欢折腾的朋友可以试试看。
- org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression
- 巧用分析函数循序渐进解决实际问题 (r4笔记第10天)
- 支持多用户web终端实现及安全保障(nodejs)
- 你看到的最直白清晰的CNN讲解
- oracle中的数组(第一篇)(r4笔记第9天)
- org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service()
- GITCHAT系列2:个性化推荐
- org.springframework.expression.spel.SpelEvaluationException: EL1011E: Method call: Attempted to call
- 【Keras】完整实现‘交通标志’分类、‘票据’分类两个项目,让你掌握深度学习图像分类
- PaddlePaddle发布新版API,简化深度学习编程
- 13(01)总结StringBuffer,StringBuilder,数组高级,Arrays,Integer,Character
- thymeleaf模板引擎调用java类中的方法(附源码)
- 由hugepage设置导致的数据库事故(r4笔记第28天)
- 判断js引擎是javascriptCore或者v8
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言中基于混合数据抽样(MIDAS)回归的HAR-RV模型预测GDP增长
- R语言马尔可夫体制转换模型Markov regime switching
- Python中的ARIMA模型、SARIMA模型和SARIMAX模型对时间序列预测
- python3用ARIMA模型进行时间序列预测
- R语言马尔可夫转换模型研究交通伤亡人数事故预测
- scrapy爬虫框架和selenium的使用:对优惠券推荐网站数据LDA文本挖掘
- 使用R语言进行Metroplis-in-Gibbs采样和MCMC运行分析
- R语言中的马尔科夫机制转换(Markov regime switching)模型
- R语言ARMA-EGARCH模型、集成预测算法对SPX实际波动率进行预测
- nginx快速入门
- R语言中进行期权定价的Heston模型
- 使用R语言随机波动模型SV处理时间序列中的随机波动率
- 20个ES6面试高频问题
- i++和++i傻傻分不清楚?这里给你最清楚的解答
- android APT 使用