新秀网
记录生活点点滴滴

WordPress导航菜单图标字体 awesome

什么是图标字体?首先来看一下效果图:

在文章底部下部压缩包awesome.zip并解压到当前主题根目录下

怎么实现这样的效果呢?
一、编辑WordPress当前主题目录下functions.php文件,在<?php 之后添加如下代码:

//集成图标字体功能
include("awesome/main.php");

二、WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的class填入到CSS类即可,比如我在官方图标库查到“home”图标的class是 fa fa-home

有些博主的菜单结构下没有CSS类这项,可在上面“显示选项”中勾选开启:

保存之后就可以显示图一的效果了。如果刷新后没有显示,可能是你的WordPress版本太低了,需要升级.

如果想要更多的css类定义图标可以到官方网站上面去找:

http://fortawesome.github.io/Font-Awesome/icons/

优化CSS,打开 awesome 文件夹,编辑css文件夹下的 font-awesome.min.css 文件,删除没用到的图标css定义即可。

本文附件已提供修改完成的CSS

/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@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);
}

awesome.zip|https://www.lanzous.com/iad6x0h|无

赞(0) 打赏
未经允许不得转载:新秀网 » WordPress导航菜单图标字体 awesome

评论 抢沙发

评论前必须登录!