给博客导航菜单添加icon字体图标,非WordPress站点同样适用

  • A+
所属分类:建站记实
前言

图标是站长们耳熟能详的东西了,引入后不仅能增加站点的美观,更可以增加用户的友好性,相对于要加载额外的CSS来说,好处简直远远大于弊端。浏览了网上清一色的做法都是使用Font Awesome 4 menus插件或者干脆将Font Awesome 4 menus的代码直接复制到function.php里面,树懒先生想要引入国内的阿里妈妈图标库,便记录了此篇文章!

给博客导航菜单添加icon字体图标,非WordPress站点同样适用

阿里妈妈图标库是非常好看的,有众多的原创图标,比起Font Awesome 4 来讲不仅仅是符合了国人的使用习惯和审美,重要的是阿里妈妈提供了丰富的引用方法和外链,节省了建站的资源消耗。当然也可以完全本地化,不过树懒先生不是很推荐,因为麻烦不说还导致了CDN资源的消耗,虽说消耗不了多少MB的流量。

引入图标库的第一步当然是引入CSS了,Begin可以直接在辅助功能里面设置(直接引入会导致外链内化,推荐添加到额外CSS中),其他主题或者程序的话推荐在header.php中加入代码。

阿里妈妈图标库的官网是http://iconfont.cn/,进入官网后推荐使用微博账号登录,之后进入帮助-代码应用,找到所需代码。如果嫌麻烦的话直接引入如下代码:

  1. <link rel='stylesheet' id='iconfontd-css' href='https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css?ver=24/11/2017' type='text/css' media='all' />

之后在自定义-菜单-展开里添加额外的导航标签即可比如添加如下代码:

  1. <i class="iconfont icon-xiaomi">首页</i>

xiaomi是可以替换的文字段,可以替换成阿里妈妈图标库图标底部的文字段。这里细心的朋友可能会发现了,首页图标怎么是xiaomi啊,那是因为树懒先生发现,官方的图标库并没有引入过多的图标,仅仅引入了部分常见的图标,如果有需要还是要下载项目下的CSS,这就限制了图标的使用范围。当然如果需要什么图标完全可以在阿里妈妈图标库中将喜欢的图标添加进购物车......之后在侧栏下载代码引入即可,这样做虽然略微麻烦,但是也减少了额外的图标引入,很干净。

给博客导航菜单添加icon字体图标,非WordPress站点同样适用

树懒先生提醒大家,注意官方的特点,文中的做法是不支持多色图标的,如有需求,还是乖乖加载生成好的图标吧!最后icon-xxx并不是不变的,需要在项目包中的iconfont.css里查看

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: