当前位置:万花网 > Wordpress建站 > 正文

wordpress给首页导航添加个性icon!

Tips:本文最后更新于【 2019-05-21 14:30:07 】,某些文章具有时效性,若有错误或已失效,请在下方留言或联系小P君

Notice: 这篇文是写在自己博客上的,可能后期博客上会把此类文章删除,我就把他移过来吧!

给大家介绍两种方法来添加WordPress导航小图标icon

第一种就是用的免费字体Awesome,收录了675+个图标

目前被广泛运用的就是这种方式了,简单好用,兼容各种浏览器。

  • 首先在插件库找到插件,下载安装并启用;
  • 找到后台菜单页面,右上角-显示选项-显示高级菜单属性-选择css类;
  • 找到你需要添加icon的菜单,输入图标代码;
  • 图标代码库,点我直达
  • 完成,Ctrl+F5,强制刷新下你的页面,看一下,是不是有了。

wordpress给首页导航添加个性icon!

搜素 插件名称 Font Awesomen 4 Menus

wordpress给首页导航添加个性icon!

wordpress给首页导航添加个性icon!

那么在php中引用方式;

<i class="fa fa-edit" aria-hidden="true"></i>

wordpress给首页导航添加个性icon!

接下来我们介绍第二种方法

阿里妈妈的Iconfont平台,可使用阿里账号或者GitHub账号登陆,点我直达;你可以自己设计图标上传到这个平台,也可将图标转换成字体,供前端工程师调用。

wordpress给首页导航添加个性icon!

  • Iconfont平台登陆以后,首先搜索你需要的图标,添加入库;
  • 购物车图标下方添加至项目;
  • 在项目库找到接入代码放入当前主题下面的style.css目录下

wordpress给首页导航添加个性icon!

例如:(替换这段成自己项目库内代码)

/* 这个是你自己项目内代码 */
@font-face {
font-family: 'iconfont'; /* project id 967485 */
src: url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.eot');
src: url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.woff2') format('woff2'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.woff') format('woff'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.ttf') format('truetype'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.svg#iconfont') format('svg');
}

另外务必在后面加上这段代码

/* 务必加上这段代码 */

.iconfont{
font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

最后一步在导航添加icon样式,复制项目后台图标代码,例如后台代码为 &#xe7be;wordpress给首页导航添加个性icon!

在导航名称前面加上如下

<i class="iconfont">&#xe7be;</i>

wordpress给首页导航添加个性icon!

完成后尝试刷新下你的页面,图标已经生效了。

当然两种方法仅供参考,有更好的方法,可以给我推荐一下,

两种方式都还是不错的,Awesome字体是免费的,首选吧!

阿里妈妈目前没有说收费,但是并没有说是免费,后期要不要收费还说不定。次选。

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏
作者保留所有权,侵删请联系,转载请注明: » 万花网 » wordpress给首页导航添加个性icon!

低至¥89元/年限时抢

抢阿里云服务器1折起代金券

立即抢购

评论1

  1. #1

    用过这个。

    奶爸de笔记1年前 (2019-05-21)