专栏首页张戈的专栏WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

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 条评论
登录 后参与评论

相关文章

  • 关于网站图标favicon.ico那点事儿,你造吗?

    众所周知,联盟成员导航是中国博客联盟的特色之一。而网站图标则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。 但是随着成员数量的增长,图标便成了页面的拖...

    张戈
  • [不定期更新]简单的shell脚本练习实例

    此文将整理一些简单实用、有趣易学的 shell 练习脚本,希望可以帮到一些想学习 shell 的初学者。张戈也会在闲暇时间不定期更新此文,对已有实例进行改进和注...

    张戈
  • 远程桌面报错解决:No Remote Desktop License Servers Available

    摘 要 用户发来反馈,使用部门Windows跳板机报错:The remote session was disconnected because there a...

    张戈
  • 全民购物的新趋势:直播带货系统

    伴随着直播平台及短视频爆发式增长,如何在全民直播的时代背景下吸引更多资金涌入成为多方共同需求,“直播+”也成为行业发展的必然趋势,而直播带货系统则以其不可替代的...

    云豹kj的晨曦
  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。

    IMWeb前端团队
  • HashMap?面试?我是谁?我在哪?

    来源:cnblogs.com/zhuoqingsen/p/HashMap.html

    Java团长
  • cant found Microsoft.VSSDK.BuildTools.15.0.26201

    可以打开 EncodingNormalior\packages 文件夹,删除所有的文件,然后重新编译。

    林德熙
  • HashMap?面试?我是谁?我在哪

    现在是晚上11点了,学校屠猪馆的自习室因为太晚要关闭了。勤奋且疲惫的小鲁班也从屠猪馆出来了,正准备回宿舍洗洗睡,由于自习室位置比较偏僻所以是接收不到手机网络信号...

    技术从心
  • spark计算两个DataFrame的差集、交集、合集

    spark 计算两个dataframe 的差集、交集、合集,只选择某一列来对比比较好。新建两个 dataframe :

    机器学习和大数据挖掘
  • Java中使用Hibernate系列之启动方法学习(第二节)

    有了第一节的学习,我们就可以加载和储存一些Event对象了,但在加载和储存前需要一些基本的设置来启动Hibernate,在Hibernate启动过程中包括要创建...

    用户1289394

扫码关注云+社区

领取腾讯云代金券