WordPress导航添加阿里巴巴IconFont图标

2017年12月20日14:57:55 发表评论 182

今天和大家分享WordPress导航添加阿里巴巴IconFont图标的教程,wordpress默认导航是不带图标的。如果需要设置图标,那就要进入wordpress后台-外观-菜单中设置,每个导航的css类。

我们用的最多的网页图标框架是Font Awesome,我这个主题也是用的这个,但是个人觉得这个Font Awesome图标框架有很多不足的地方,在线引用的话图标名称要一个一个找,比较困难麻烦,本地引用的话文件相对于阿里巴巴iconfont图标较大,而且Font Awesome图标选择也比较少,而阿里巴巴iconfont图标有180多万的选择余地,图标类型各类多,引用也一样的方便。

 

WordPress导航添加阿里巴巴IconFont图标

wordpress导航引用阿里巴巴iconfont图标步骤

挑选阿里巴巴iconfont图标

搜索你需要的图标,点击最上面那个“添加入库”,最后把所有需要的图标添加到项目。(自己新建个项目名)

我是做演示才选择一个添加项目,其实一个项目不何止这几个图标的。

WordPress导航添加阿里巴巴IconFont图标

WordPress导航添加阿里巴巴IconFont图标

引用阿里巴巴iconfont图标

你可以选择在线引用或者下载下来引用,推荐在线引用,省事,阿里巴巴iconfont图标在线引用也有三种方式:

  1. Unicode
  2. Font class
  3. Symbol

个人还是比较喜欢用font class这种方式的,我们复制下面的链接,在我们的wordpress的header.php模块中引用这个文件:

  1. <link href="//at.alicdn.com/t/font_510012_fvtny9k815s9vn29.css" rel="stylesheet">

WordPress导航添加阿里巴巴IconFont图标

wordpress导航万能的图标设置方式

用css类来设置wordpress导航图标

本来大部分是用这个方法的,不过可能是因为主题方面或wordpress方面的原因,我设置之后会有问题,引用的css类是直接作用在a标签上的,而不是作用在a标签里面的某个元素上,这样就导致了这样的问题,不过我用的begin主题,引用主题中的be开头的图标就不会出现这样的情况,我就估计是主题的问题。

PS:如果后台没有css类选项,要先打开显示选项中的css类。

WordPress导航添加阿里巴巴IconFont图标

WordPress导航添加阿里巴巴IconFont图标

直接在wordpress后台菜单导航标签中加入标签引用图标

这种方式是万能的,应对各式各样主题的问题都不会出现上图的现象,显示效果可以看猿梦博客

WordPress导航添加阿里巴巴IconFont图标

猿梦

发表评论

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