WordPress导航菜单图标字体 awesome

952 次浏览次阅读
没有评论

共计 1351 个字符,预计需要花费 4 分钟才能阅读完成。

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

WordPress 导航菜单图标字体 awesome

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

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

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

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

WordPress 导航菜单图标字体 awesome

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

WordPress 导航菜单图标字体 awesome

保存之后就可以显示图一的效果了。如果刷新后没有显示,可能是你的 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| 无

正文完
 
新秀网
版权声明:本站原创文章,由 新秀网 2020-03-17发表,共计1351字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)