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);
}

好了,本文就分享到这里,喜欢折腾的朋友可以试试看。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自动化测试实战

HTML第一课——基础知识普及【1】

3037
来自专栏Jerry的SAP技术分享

巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验

这篇文章介绍一种使用代理设计模式(Proxy Design Pattern)的方法来改善您的前端应用里图片加载的体验。

1194
来自专栏一个会写诗的程序员的博客

Vue.js 极简教程jsfiddle Hello World 例子:参考资料:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

2031
来自专栏子勰随笔

Markdown格式优化及使用技巧

6317
来自专栏从零开始学 Web 前端

从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

4042
来自专栏黒之染开发日记

我在移动web开发中遇到的各种问题

目前(2015年8月3日15:02:24)在大部分安卓手机都发现这个问题,触发bug的条件知道了,但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚...

1282
来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

? 提示:前天文章,重发,不想看的请略过,上次失误忘了加效果图 (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经...

2199
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

5111
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

5687
来自专栏Guangdong Qi

# 微信小程序开发之-事件触发控件

2583

扫码关注云+社区

领取腾讯云代金券