首页 网站建设 Wordpress 浏览内容

WordPress图标字体插件font-awesome代码版-升级字体

957 0 BaiDu已收录 评论留言

一、下载上传


下载地址:http://pan.baidu.com/s/1qWy4Pje密码:if3n

下载并解压后得到font-awesome文件夹,整体上传到WordPress主题目录。

二、主题集成


编辑WordPress当前主题目录下functions.php文件添加如下代码

注:集成图标字体功能,新版字体包里已经包含了调用文件;文件夹版本号需要删除
最后保存即可。

三、图标使用


图标字体的使用,相信大部分小伙伴都已经熟知了。对于首次使用的用户,还是继续介绍下好了! 先贴一下效果截图,了解一下图标字体是个什么东东:

其实,就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。 理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加class来添加即可。 比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可:

而我们想要更多的图标或代码,就需要到官方的图标库里面去查找了:
http://fortawesome.github.io/Font-Awesome/icons/

找到自己中意的图标后,点击打开即可得到相应的标签class了!
那如何使用到 WordPress 导航菜单呢?
很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的class填入到CSS类即可,比如我在官方图标库查到“家”图标的class是 fa fa-home,所以我如下填写:

font-awesome-菜单

font-awesome-菜单


保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。
如果发现点开菜单没有 CSS 类栏位怎么办?
很明显,你没把这个功能开出来。点击菜单页面右上方的【显示选项】,勾上CSS类即可:
font-awesome-css类

font-awesome-css类


如果发现点击【显示选项】没动静怎么办?
看来你的WordPress也是升级4.2或4.3了。解决办法见之前的分享【修复WordPress更新后的故障

四、更多折腾


好了, 做完上面的操作后,就可以彻底删除 font awesome 4 menus 这个插件了,强迫症们是不是又感觉轻松了一些呢?哈哈!
不过,有心的朋友可能发现了,这个图标字体的CSS文件达到20多kb,而我们真正要用的也就几个到十几个图标而已!所以,喜欢折腾的朋友可以进一步精简一下CSS文件。
打开 awesome 文件夹,编辑css文件夹下的 font-awesome.min.css 文件,删除没用到的图标css定义即可。
不过这个 font-awesome.min.css 文件是压缩后的,看起来很晕!可以先百度搜一下CSS美化工具,将其格式化之后再来编辑!
不过CSS前面引入字体和公用样式代码记得要保留,如下所示:

本文方法来自:张戈博客https://zhangge.net/5053.html,本站只是升级字体版本。

标签:
墨月的头像
  • 本文由墨月网络整理编辑,转载请以链接形式注明本文地址:https://www.moyoo.net/12404.html
    版权所有© 墨月网络 | 本文采用 BY-NC-SA 进行授权丨发布于:2015-11-26 17:03
    若未注明,均为原创;部分内容源于网络,版权归原作者所有,如有侵权,请联系我们删除。
评论头像

关注我们,实时联系

AD

注册就送20美元

Vultr

推广

alimama

赞助商

广而告之

alimama